From b208fa7d40cb2e376c47120a3c7f49309b243ece Mon Sep 17 00:00:00 2001
From: JD Francis <jd@audius.co>
Date: Wed, 31 Jan 2024 18:04:08 -0800
Subject: [PATCH] Fix drawer icon sizing

---
 .../mobile/src/components/drawer/Drawer.tsx   |  4 ++--
 .../src/components/drawer/DrawerHeader.tsx    | 22 +++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/mobile/src/components/drawer/Drawer.tsx b/packages/mobile/src/components/drawer/Drawer.tsx
index d85bcbe6f62..29f865167dc 100644
--- a/packages/mobile/src/components/drawer/Drawer.tsx
+++ b/packages/mobile/src/components/drawer/Drawer.tsx
@@ -1,6 +1,7 @@
 import type { ComponentType, ReactNode } from 'react'
 import { useMemo, useCallback, useEffect, useRef, useState } from 'react'
 
+import type { IconComponent } from '@audius/harmony'
 import type {
   GestureResponderEvent,
   ImageSourcePropType,
@@ -19,7 +20,6 @@ import type { Edge } from 'react-native-safe-area-context'
 import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context'
 
 import { makeStyles } from 'app/styles'
-import type { SvgProps } from 'app/types/svg'
 import { attachToDy } from 'app/utils/animation'
 
 import { DrawerHeader } from './DrawerHeader'
@@ -120,7 +120,7 @@ export type DrawerProps = {
   /**
    * Icon to display in the header next to the title (must also include title)
    */
-  titleIcon?: ComponentType<SvgProps>
+  titleIcon?: IconComponent
   /**
    * Icon (as image source) to display in the header next to the title (must also include title)
    */
diff --git a/packages/mobile/src/components/drawer/DrawerHeader.tsx b/packages/mobile/src/components/drawer/DrawerHeader.tsx
index 8c6006a1e65..ea420498cc5 100644
--- a/packages/mobile/src/components/drawer/DrawerHeader.tsx
+++ b/packages/mobile/src/components/drawer/DrawerHeader.tsx
@@ -1,18 +1,18 @@
-import type { ComponentType, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
+import type { IconComponent } from '@audius/harmony'
 import type { ImageSourcePropType } from 'react-native'
 import { TouchableOpacity, View, Image } from 'react-native'
 
-import { IconClose } from '@audius/harmony-native'
+import { Flex, IconClose } from '@audius/harmony-native'
 import { Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
-import type { SvgProps } from 'app/types/svg'
 import { useColor } from 'app/utils/theme'
 
 type DrawerHeaderProps = {
   onClose: () => void
   title?: ReactNode
-  titleIcon?: ComponentType<SvgProps>
+  titleIcon?: IconComponent
   titleImage?: ImageSourcePropType
   isFullscreen?: boolean
 }
@@ -31,10 +31,6 @@ export const useStyles = makeStyles(({ spacing }) => ({
     left: spacing(6)
   },
 
-  titleContainer: {
-    flexDirection: 'row',
-    columnGap: spacing(2)
-  },
   titleImage: {
     height: spacing(6),
     width: spacing(6)
@@ -61,21 +57,19 @@ export const DrawerHeader = (props: DrawerHeaderProps) => {
           onPress={onClose}
           style={styles.dismissContainer}
         >
-          <IconClose width={30} height={30} fill={iconRemoveColor} />
+          <IconClose size='m' fill={iconRemoveColor} />
         </TouchableOpacity>
       ) : null}
       {title ? (
-        <View style={styles.titleContainer}>
-          {TitleIcon ? (
-            <TitleIcon height={22} width={22} fill={titleIconColor} />
-          ) : null}
+        <Flex gap='s' alignItems='center' direction='row'>
+          {TitleIcon ? <TitleIcon size='m' fill={titleIconColor} /> : null}
           {titleImage ? (
             <Image style={styles.titleImage} source={titleImage} />
           ) : null}
           <Text fontSize='xl' weight='heavy' textTransform='uppercase'>
             {title}
           </Text>
-        </View>
+        </Flex>
       ) : null}
     </View>
   ) : (