From a6f4ca8ea141ec09fc5b558324202fd666e7218f Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Sun, 24 Jan 2021 10:13:46 -0800
Subject: [PATCH] Make more icon size variables

---
 src/components/CreateMenu.js                     | 2 +-
 src/components/PillWithCancelButton.js           | 3 ++-
 src/pages/home/sidebar/ChatLinkRow.js            | 5 ++++-
 src/pages/home/sidebar/ChatSwitcherSearchForm.js | 3 ++-
 src/styles/variables.js                          | 3 +++
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/CreateMenu.js b/src/components/CreateMenu.js
index fff1eb825333..a8532ac7aba6 100644
--- 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
index fbe1b26af4e4..38886a973617 100644
--- 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
index 2918c5900bd7..f73de46fa4ea 100644
--- 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
index 6654c39ad701..678dcad69206 100644
--- 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
index 21b605621aec..3cf47cc19803 100644
--- 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,