Make more icon size variables

Expensify · Jan 24, 2021 · a6f4ca8 · a6f4ca8
1 parent 6ee53f0
commit a6f4ca8
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/src/components/CreateMenu.js b/src/components/CreateMenu.js
@@ -59,7 +59,7 @@ const CreateMenu = (props) => {
                     ])}
                 >
                     <View style={styles.createMenuIcon}>
-                        <Icon src={icon} width={24} height={24} />
+                        <Icon src={icon} width={variables.iconSizeLarge} height={variables.iconSizeLarge} />
                     </View>
                     <View style={styles.justifyContentCenter}>
                         <Text style={[styles.createMenuText, styles.ml3]}>

diff --git a/src/components/PillWithCancelButton.js b/src/components/PillWithCancelButton.js
@@ -4,6 +4,7 @@ import {Text, TouchableOpacity} from 'react-native';
 import styles from '../styles/styles';
 import Icon from './Icon';
 import {Close} from './Icon/Expensicons';
+import variables from '../styles/variables';
 
 const propTypes = {
     text: PropTypes.string.isRequired,
@@ -21,7 +22,7 @@ const PillWithCancelButton = props => (
         >
             {props.text}
         </Text>
-        <Icon src={Close} width={12} height={12} />
+        <Icon src={Close} width={variables.iconSizeExtraSmall} height={variables.iconSizeExtraSmall} />
     </TouchableOpacity>
 );
 

diff --git a/src/pages/home/sidebar/ChatLinkRow.js b/src/pages/home/sidebar/ChatLinkRow.js
@@ -12,6 +12,7 @@ import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
 import Icon from '../../../components/Icon';
 import {Pencil} from '../../../components/Icon/Expensicons';
 import MultipleAvatars from '../../../components/MultipleAvatars';
+import variables from '../../../styles/variables';
 
 const propTypes = {
     // Option to allow the user to choose from can be type 'report' or 'user'
@@ -118,7 +119,9 @@ const ChatLinkRow = ({
                     </TouchableOpacity>
                 </View>
             )}
-            {option.hasDraftComment && <Icon src={Pencil} width={16} height={16} />}
+            {option.hasDraftComment && (
+                <Icon src={Pencil} width={variables.fontSizeSmall} height={variables.iconSizeSmall} />
+            )}
         </View>
     );
 };

diff --git a/src/pages/home/sidebar/ChatSwitcherSearchForm.js b/src/pages/home/sidebar/ChatSwitcherSearchForm.js
@@ -14,6 +14,7 @@ import TextInputWithFocusStyles from '../../../components/TextInputWithFocusStyl
 import {getDisplayName} from '../../../libs/actions/PersonalDetails';
 import PillWithCancelButton from '../../../components/PillWithCancelButton';
 import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
+import variables from '../../../styles/variables';
 
 const propTypes = {
     // A ref to forward to the text input
@@ -135,7 +136,7 @@ const ChatSwitcherSearchForm = props => (
             onPress={props.onClearButtonClick}
             underlayColor={themeColors.componentBG}
         >
-            <Icon src={Close} width={24} height={24} />
+            <Icon src={Close} width={variables.iconSizeLarge} height={variables.iconSizeLarge} />
         </TouchableOpacity>
     </View>
 );

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -9,7 +9,10 @@ export default {
     fontSizeNormal: 15,
     fontSizeLarge: 17,
     fontSizeh1: 19,
+    iconSizeExtraSmall: 12,
+    iconSizeSmall: 16,
     iconSizeNormal: 20,
+    iconSizeLarge: 24,
     mobileResponsiveWidthBreakpoint: 800,
     safeInsertPercentage: 0.7,
     sideBarWidth: 300,