Merge pull request #35637 from BryceAltman/add-caret-currecy-select

Add caret icon next to currency select button

src/components/CurrencySymbolButton.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
 import Tooltip from './Tooltip';
@@ -15,15 +18,22 @@ type CurrencySymbolButtonProps = {
 };
 
 function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}: CurrencySymbolButtonProps) {
-    const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
     return (
         <Tooltip text={translate('common.selectCurrency')}>
             <PressableWithoutFeedback
                 onPress={onCurrencyButtonPress}
                 accessibilityLabel={translate('common.selectCurrency')}
                 role={CONST.ROLE.BUTTON}
+                style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}
             >
+                <Icon
+                    small
+                    src={Expensicons.DownArrow}
+                    fill={theme.icon}
+                />
                 <Text style={styles.iouAmountText}>{currencySymbol}</Text>
             </PressableWithoutFeedback>
         </Tooltip>