feat: use correct filter icon and adjust the popup position for web a…

…nd desktop
Expensify · Jul 26, 2024 · 50fb3dc · 50fb3dc
1 parent 46c3f78
commit 50fb3dc
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git a/assets/images/filter.svg b/assets/images/filter.svg
diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
@@ -53,6 +53,8 @@ function HeaderWithBackButton({
         horizontal: 0,
     },
     threeDotsMenuItems = [],
+    threeDotsMenuIcon,
+    threeDotsMenuIconFill,
     shouldEnableDetailPageNavigation = false,
     children = null,
     shouldOverlayDots = false,
@@ -234,6 +236,8 @@ function HeaderWithBackButton({
                     {shouldShowPinButton && !!report && <PinButton report={report} />}
                     {shouldShowThreeDotsButton && (
                         <ThreeDotsMenu
+                            icon={threeDotsMenuIcon}
+                            iconFill={threeDotsMenuIconFill}
                             disabled={shouldDisableThreeDotsButton}
                             menuItems={threeDotsMenuItems}
                             onIconPress={onThreeDotsButtonPress}

diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts
@@ -80,6 +80,12 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** The anchor position of the menu */
     threeDotsAnchorPosition?: AnchorPosition;
 
+    /** Icon displayed on the right of the title */
+    threeDotsMenuIcon?: IconAsset;
+
+    /** The fill color to pass into the icon. */
+    threeDotsMenuIconFill?: string;
+
     /** Whether we should show a close button */
     shouldShowCloseButton?: boolean;
 

diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -81,6 +81,7 @@ import ExpensifyLogoNew from '@assets/images/expensify-logo-new.svg';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
 import EyeDisabled from '@assets/images/eye-disabled.svg';
 import Eye from '@assets/images/eye.svg';
+import Filter from '@assets/images/filter.svg';
 import Flag from '@assets/images/flag.svg';
 import FlagLevelOne from '@assets/images/flag_level_01.svg';
 import FlagLevelTwo from '@assets/images/flag_level_02.svg';
@@ -372,4 +373,5 @@ export {
     CheckCircle,
     CheckmarkCircle,
     NetSuiteSquare,
+    Filter,
 };
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -19,6 +19,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import {addLog} from '@libs/actions/Console';
 import {createLog, parseStringifiedMessages, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
@@ -56,7 +57,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
-
+    const {windowWidth} = useWindowDimensions();
     const route = useRoute<RouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.CONSOLE>>();
 
     const menuItems: PopoverMenuItem[] = useMemo(
@@ -164,6 +165,9 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
                 onBackButtonPress={() => Navigation.goBack(route.params?.backTo)}
                 shouldShowThreeDotsButton
                 threeDotsMenuItems={menuItems}
+                threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
+                threeDotsMenuIcon={Expensicons.Filter}
+                threeDotsMenuIconFill={theme.icon}
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, styles.flex1]}>
                 <InvertedFlatList