Refactor default fill color value in BlockingView, Icon and HeaderWit…

…hBackButton components
software-mansion-labs · Nov 14, 2023 · cf7765a · cf7765a
1 parent e10f7a1
commit cf7765a
Show file tree

Hide file tree

Showing 41 changed files with 90 additions and 29 deletions.
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -237,6 +237,7 @@ function AddPlaidBankAccount({
                     height={iconSize}
                     width={iconSize}
                     additionalStyles={iconStyles}
+                    fill={themeColors.icon}
                 />
                 <Text style={[styles.ml3, styles.textStrong]}>{bankName}</Text>
             </View>

diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
@@ -11,6 +11,7 @@ import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
 import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AttachmentCarouselCellRenderer from './AttachmentCarouselCellRenderer';
@@ -165,6 +166,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             {page === -1 ? (
                 <BlockingView
                     icon={Illustrations.ToddBehindCloud}
+                    iconColor={themeColors.offline}
                     iconWidth={variables.modalTopIconWidth}
                     iconHeight={variables.modalTopIconHeight}
                     title={translate('notFound.notHere')}

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -127,7 +127,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             {page === -1 ? (
                 <BlockingView
                     icon={Illustrations.ToddBehindCloud}
-                    iconColor={undefined}
                     iconWidth={variables.modalTopIconWidth}
                     iconHeight={variables.modalTopIconHeight}
                     title={translate('notFound.notHere')}

diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
@@ -175,14 +175,20 @@ function AttachmentView({
     return (
         <View style={[styles.defaultAttachmentView, ...containerStyles]}>
             <View style={styles.mr2}>
-                <Icon src={Expensicons.Paperclip} />
+                <Icon
+                    fill={themeColors.icon}
+                    src={Expensicons.Paperclip}
+                />
             </View>
 
             <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{file && file.name}</Text>
             {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && (
                 <Tooltip text={translate('common.download')}>
                     <View style={styles.ml2}>
-                        <Icon src={Expensicons.Download} />
+                        <Icon
+                            fill={themeColors.icon}
+                            src={Expensicons.Download}
+                        />
                     </View>
                 </Tooltip>
             )}

diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
@@ -8,6 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import ControlSelection from '@libs/ControlSelection';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 
 const propTypes = {
@@ -86,6 +87,7 @@ function ImageCropView(props) {
                 <View style={[containerStyle, styles.l0, styles.b0, styles.pAbsolute]}>
                     <Icon
                         src={props.maskImage}
+                        fill={themeColors.icon}
                         width={props.containerSize}
                         height={props.containerSize}
                     />

diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -5,6 +5,7 @@ import compose from '@libs/compose';
 import getButtonState from '@libs/getButtonState';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
 import Icon from './Icon';
@@ -101,7 +102,10 @@ function Banner(props) {
                                     role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                     accessibilityLabel={props.translate('common.close')}
                                 >
-                                    <Icon src={Expensicons.Close} />
+                                    <Icon
+                                        src={Expensicons.Close}
+                                        fill={themeColors.Icon}
+                                    />
                                 </PressableWithFeedback>
                             </Tooltip>
                         )}

diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
@@ -9,7 +9,6 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 
 const propTypes = {
@@ -45,7 +44,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    iconColor: themeColors.offline,
+    iconColor: null,
     subtitle: '',
     shouldShowLink: false,
     linkKey: 'notFound.goBackHome',

diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -64,7 +64,6 @@ function FullPageNotFoundView({children, shouldShow, titleKey, subtitleKey, link
                 <View style={[styles.flex1, styles.blockingViewContainer]}>
                     <BlockingView
                         icon={Illustrations.ToddBehindCloud}
-                        iconColor={undefined}
                         iconWidth={variables.modalTopIconWidth}
                         iconHeight={variables.modalTopIconHeight}
                         title={translate(titleKey)}

diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.js b/src/components/BlockingViews/FullPageOfflineBlockingView.js
@@ -5,6 +5,7 @@ import networkPropTypes from '@components/networkPropTypes';
 import {withNetwork} from '@components/OnyxProvider';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
+import themeColors from '@styles/themes/default';
 import BlockingView from './BlockingView';
 
 const propTypes = {
@@ -23,6 +24,7 @@ function FullPageOfflineBlockingView(props) {
         return (
             <BlockingView
                 icon={Expensicons.OfflineCloud}
+                iconColor={themeColors.offline}
                 title={props.translate('common.youAppearToBeOffline')}
                 subtitle={props.translate('common.thisFeatureRequiresInternet')}
             />

diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js
@@ -6,6 +6,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import Collapsible from './Collapsible';
 
@@ -54,7 +55,10 @@ class CollapsibleSection extends React.Component {
                     >
                         {this.props.title}
                     </Text>
-                    <Icon src={src} />
+                    <Icon
+                        src={src}
+                        fill={themeColors.icon}
+                    />
                 </PressableWithFeedback>
                 <View style={styles.collapsibleSectionBorder} />
 

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
@@ -5,6 +5,7 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import Button from './Button';
 import Header from './Header';
@@ -101,6 +102,7 @@ function ConfirmContent(props) {
                         <View style={[styles.flexRow, styles.mb3]}>
                             <Icon
                                 src={props.iconSource}
+                                fill={themeColors.icon}
                                 width={variables.appModalAppIconSize}
                                 height={variables.appModalAppIconSize}
                                 additionalStyles={[...props.iconAdditionalStyles]}

diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -40,8 +40,8 @@ function DeeplinkRedirectLoadingIndicator({translate, openLinkInBrowser, session
                     <Icon
                         width={200}
                         height={164}
+                        fill={themeColors.icon}
                         src={Illustrations.RocketBlue}
-                        fill={undefined}
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>

diff --git a/src/components/DistanceMapView/index.android.js b/src/components/DistanceMapView/index.android.js
@@ -31,7 +31,6 @@ function DistanceMapView(props) {
                 <View style={StyleUtils.combineStyles(styles.mapViewOverlay, props.overlayStyle)}>
                     <BlockingView
                         icon={Expensicons.EmptyStateRoutePending}
-                        iconColor={undefined}
                         title={translate('distance.mapPending.title')}
                         subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
                         shouldShowLink={false}

diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
@@ -16,12 +16,13 @@ import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import headerWithBackButtonPropTypes from './headerWithBackButtonPropTypes';
 
 function HeaderWithBackButton({
-    iconFill = undefined,
+    iconFill = themeColors.icon,
     guidesCallTaskID = '',
     onBackButtonPress = () => Navigation.goBack(ROUTES.HOME),
     onCloseButtonPress = () => Navigation.dismissModal(),

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -3,7 +3,6 @@ import {ImageSourcePropType, StyleProp, View, ViewStyle} from 'react-native';
 import ImageSVG from '@components/ImageSVG';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import IconWrapperStyles from './IconWrapperStyles';
 
@@ -57,7 +56,7 @@ class Icon extends PureComponent<IconProps> {
     public static defaultProps = {
         width: variables.iconSizeNormal,
         height: variables.iconSizeNormal,
-        fill: themeColors.icon,
+        fill: null,
         small: false,
         inline: false,
         additionalStyles: [],

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -299,6 +299,7 @@ function OptionRowLHN(props) {
                                 >
                                     <Icon
                                         testID="Pencil Icon"
+                                        fill={themeColors.icon}
                                         src={Expensicons.Pencil}
                                     />
                                 </View>
@@ -310,6 +311,7 @@ function OptionRowLHN(props) {
                                 >
                                     <Icon
                                         testID="Pin Icon"
+                                        fill={themeColors.icon}
                                         src={Expensicons.Pin}
                                     />
                                 </View>

diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import colors from '@styles/colors';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
 
@@ -65,7 +66,10 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         accessibilityLabel={translate('common.close')}
                     >
-                        <Icon src={Expensicons.Close} />
+                        <Icon
+                            fill={themeColors.icon}
+                            src={Expensicons.Close}
+                        />
                     </PressableWithoutFeedback>
                 </Tooltip>
             </View>

diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
@@ -16,15 +16,13 @@ function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps)
             {hasTextContent ? (
                 <BlockingView
                     icon={Expensicons.EmptyStateRoutePending}
-                    iconColor={undefined}
                     title={title}
                     subtitle={subtitle}
                     shouldShowLink={false}
                 />
             ) : (
                 <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10]}>
                     <Icon
-                        fill={undefined}
                         src={Expensicons.EmptyStateRoutePending}
                         width={variables.iconSizeUltraLarge}
                         height={variables.iconSizeUltraLarge}

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -317,6 +317,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
                                                 <Icon
                                                     src={props.furtherDetailsIcon}
+                                                    fill={themeColors.icon}
                                                     height={variables.iconSizeNormal}
                                                     width={variables.iconSizeNormal}
                                                     inline

diff --git a/src/components/MessagesRow.js b/src/components/MessagesRow.js
@@ -6,6 +6,7 @@ import useLocalize from '@hooks/useLocalize';
 import stylePropTypes from '@styles/stylePropTypes';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import Icon from './Icon';
@@ -58,7 +59,10 @@ function MessagesRow({messages, type, onClose, containerStyles, canDismiss}) {
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         accessibilityLabel={translate('common.close')}
                     >
-                        <Icon src={Expensicons.Close} />
+                        <Icon
+                            fill={themeColors.icon}
+                            src={Expensicons.Close}
+                        />
                     </PressableWithoutFeedback>
                 </Tooltip>
             )}

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
@@ -5,6 +5,7 @@ import compose from '@libs/compose';
 import stylePropTypes from '@styles/stylePropTypes';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -52,6 +53,7 @@ function OfflineIndicator(props) {
         <View style={[setStyles(props.containerStyles, props.isSmallScreenWidth), styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
             <Icon
                 src={Expensicons.OfflineCloud}
+                fill={themeColors.icon}
                 width={variables.iconSizeSmall}
                 height={variables.iconSizeSmall}
             />

diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
@@ -7,6 +7,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 
 const propTypes = {
@@ -20,6 +21,7 @@ function PDFInfoMessage(props) {
     return (
         <View style={styles.alignItemsCenter}>
             <Icon
+                fill={themeColors.icon}
                 src={Expensicons.EyeDisabled}
                 width={variables.iconSizeSuperLarge}
                 height={variables.iconSizeSuperLarge}

diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js
@@ -99,6 +99,7 @@ const defaultProps = {
     size: 'normal',
     icon: (size) => (
         <Icon
+            fill={themeColors.icon}
             src={Expensicons.DownArrow}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...(size === 'small' ? {width: styles.pickerSmall().icon.width, height: styles.pickerSmall().icon.height} : {})}

diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
@@ -35,7 +35,10 @@ function ReportHeaderSkeletonView(props) {
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         accessibilityLabel={props.translate('common.back')}
                     >
-                        <Icon src={Expensicons.BackArrow} />
+                        <Icon
+                            fill={themeColors.icon}
+                            src={Expensicons.BackArrow}
+                        />
                     </PressableWithFeedback>
                 )}
                 <SkeletonViewContentLoader

diff --git a/src/components/SignInButtons/IconButton.js b/src/components/SignInButtons/IconButton.js
@@ -5,6 +5,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 
 const propTypes = {
@@ -41,6 +42,7 @@ function IconButton({onPress, translate, provider}) {
             accessibilityLabel={translate(providerData[provider].accessibilityLabel)}
         >
             <Icon
+                fill={themeColors.icon}
                 src={providerData[provider].icon}
                 height={40}
                 width={40}

diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js
@@ -19,7 +19,6 @@ function ExpiredValidateCodeModal(props) {
             <View style={styles.deeplinkWrapperMessage}>
                 <View style={styles.mb2}>
                     <Icon
-                        fill={undefined}
                         width={variables.modalTopIconWidth}
                         height={variables.modalTopIconHeight}
                         src={Illustrations.ToddBehindCloud}

diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
@@ -23,7 +23,6 @@ function JustSignedInModal(props) {
             <View style={styles.deeplinkWrapperMessage}>
                 <View style={styles.mb2}>
                     <Icon
-                        fill={undefined}
                         width={variables.modalTopIconWidth}
                         height={props.is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight}
                         src={props.is2FARequired ? Illustrations.SafeBlue : Illustrations.Abracadabra}

diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js
@@ -48,6 +48,7 @@ function ValidateCodeModal(props) {
                     <Icon
                         width={variables.modalTopIconWidth}
                         height={variables.modalTopIconHeight}
+                        fill={themeColors.icon}
                         src={Illustrations.MagicCode}
                     />
                 </View>