fix icon colors

margelo · Jan 2, 2024 · 4ea1be5 · 4ea1be5
1 parent 6eb0649
commit 4ea1be5
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 31 deletions.
diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
@@ -8,8 +8,8 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip/PopoverAnchorTooltip';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
@@ -96,40 +96,39 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility
         onPress();
     };
 
-
     return (
         <Tooltip text={translate('common.new')}>
             <PressableWithoutFeedback
                 role={CONST.ROLE.BUTTON}
                 style={[styles.h100]}
                 onPress={toggleFabAction}
             >
-            <View style={styles.bottomTabBarItem}>
-                <AnimatedPressable
-                    ref={(el) => {
-                        fabPressable.current = el;
-                        if (buttonRef) {
-                            buttonRef.current = el;
-                        }
-                    }}
-                    accessibilityLabel={accessibilityLabel}
-                    role={role}
-                    pressDimmingValue={1}
-                    onPress={toggleFabAction}
-                    onLongPress={() => {}}
-                    style={[styles.floatingActionButton, animatedStyle]}
-                >
-                    <Svg
-                        width={variables.iconSizeNormal}
-                        height={variables.iconSizeNormal}
+                <View style={styles.bottomTabBarItem}>
+                    <AnimatedPressable
+                        ref={(el) => {
+                            fabPressable.current = el;
+                            if (buttonRef) {
+                                buttonRef.current = el;
+                            }
+                        }}
+                        accessibilityLabel={accessibilityLabel}
+                        role={role}
+                        pressDimmingValue={1}
+                        onPress={toggleFabAction}
+                        onLongPress={() => {}}
+                        style={[styles.floatingActionButton, animatedStyle]}
                     >
-                        <AnimatedPath
-                            d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
-                            animatedProps={animatedProps}
-                        />
-                    </Svg>
-                </AnimatedPressable>
-            </View>
+                        <Svg
+                            width={variables.iconSizeNormal}
+                            height={variables.iconSizeNormal}
+                        >
+                            <AnimatedPath
+                                d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
+                                animatedProps={animatedProps}
+                            />
+                        </Svg>
+                    </AnimatedPressable>
+                </View>
             </PressableWithoutFeedback>
         </Tooltip>
     );

diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -52,8 +52,8 @@ import EReceiptIcon from '@assets/images/eReceiptIcon.svg';
 import Exclamation from '@assets/images/exclamation.svg';
 import Exit from '@assets/images/exit.svg';
 import Expand from '@assets/images/expand.svg';
-import ExpensifyCard from '@assets/images/expensify-card-icon.svg';
 import ExpensifyAppIcon from '@assets/images/expensify-app-icon.svg';
+import ExpensifyCard from '@assets/images/expensify-card-icon.svg';
 import ExpensifyFooterLogoVertical from '@assets/images/expensify-footer-logo-vertical.svg';
 import ExpensifyFooterLogo from '@assets/images/expensify-footer-logo.svg';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -232,7 +232,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         contentFit?: ImageContentFit;
 
         /** Is this in the Pane */
-        isPaneMenu: false,
+        isPaneMenu: false;
     };
 
 function MenuItem(
@@ -446,7 +446,8 @@ function MenuItem(
                                                     fill={
                                                         displayInDefaultIconColor
                                                             ? undefined
-                                                            : iconFill ?? StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true, isPaneMenu)
+                                                            : iconFill ??
+                                                              StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true, isPaneMenu)
                                                     }
                                                 />
                                             )}

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -29,6 +30,7 @@ type SearchProps = {
 
 function Search({onPress, placeholder, tooltip, style, containerStyle}: SearchProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
 
     return (
@@ -46,6 +48,7 @@ function Search({onPress, placeholder, tooltip, style, containerStyle}: SearchPr
                                 src={Expensicons.MagnifyingGlass}
                                 width={variables.iconSizeSmall}
                                 height={variables.iconSizeSmall}
+                                fill={theme.icon}
                             />
                             <Text
                                 style={styles.searchInputStyle}

diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
@@ -137,6 +137,7 @@ function SubscriptAvatar({mainAvatar = {}, secondaryAvatar, subscriptIcon, size
                         width={subscriptIcon.width}
                         height={subscriptIcon.height}
                         additionalStyles={styles.alignSelfCenter}
+                        fill={theme.icon}
                     />
                 </View>
             )}

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -60,7 +60,7 @@ function BottomTabBar() {
                 >
                     <Icon
                         src={Expensicons.Gear}
-                        fill={currentTabName === SCREENS.ALL_SETTINGS || currentTabName === SCREENS.WORKSPACE.INITIAL ? theme.iconMenu : undefined}
+                        fill={currentTabName === SCREENS.ALL_SETTINGS || currentTabName === SCREENS.WORKSPACE.INITIAL ? theme.iconMenu : theme.icon}
                     />
                 </PressableWithFeedback>
             </Tooltip>