Fix: integration icons next to export buttons

src/components/ButtonWithDropdownMenu/types.ts

@@ -25,6 +25,7 @@ type DropdownOption<TValueType> = {
     iconWidth?: number;
     iconHeight?: number;
     iconDescription?: string;
+    additionalIconStyles?: StyleProp<ViewStyle>;
     onSelected?: () => void;
     disabled?: boolean;
     iconFill?: string;

src/components/MenuItem.tsx

@@ -114,6 +114,9 @@ type MenuItemBaseProps = {
     /** Any additional styles to pass to the icon container. */
     iconStyles?: StyleProp<ViewStyle>;
 
+    /** Additional styles to pass to the icon itself */
+    additionalIconStyles?: StyleProp<ViewStyle>;
+
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon?: IconAsset;
 
@@ -430,6 +433,7 @@ function MenuItem(
         tooltipShiftHorizontal = 0,
         tooltipShiftVertical = 0,
         renderTooltipContent,
+        additionalIconStyles,
         shouldShowSelectedItemCheck = false,
         onHideTooltip,
     }: MenuItemProps,
@@ -647,6 +651,7 @@ function MenuItem(
                                                                                       isPaneMenu,
                                                                                   )
                                                                         }
+                                                                        additionalStyles={additionalIconStyles}
                                                                     />
                                                                 ) : (
                                                                     <ActivityIndicator

src/components/PopoverMenu.tsx

@@ -279,6 +279,7 @@ function PopoverMenu({
                                 iconWidth={item.iconWidth}
                                 iconHeight={item.iconHeight}
                                 iconFill={item.iconFill}
+                                additionalIconStyles={item.additionalIconStyles}
                                 contentFit={item.contentFit}
                                 title={item.text}
                                 shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}

src/components/ReportActionItem/ExportWithDropdownMenu.tsx

@@ -12,6 +12,7 @@ import * as ReportActions from '@libs/actions/Report';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import type {ExportType} from '@pages/home/report/ReportDetailsExportPage';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Policy, Report} from '@src/types/onyx';
@@ -55,6 +56,9 @@ function ExportWithDropdownMenu({
             icon: iconToDisplay,
             disabled: !canBeExported,
             displayInDefaultIconColor: true,
+            iconWidth: variables.iconSizeMenuItem,
+            iconHeight: variables.iconSizeMenuItem,
+            additionalIconStyles: styles.integrationIcon,
         };
         const options = [
             {

src/libs/ReportUtils.ts

@@ -13,7 +13,7 @@ import type {SvgProps} from 'react-native-svg';
 import type {OriginalMessageIOU, OriginalMessageModifiedExpense} from 'src/types/onyx/OriginalMessage';
 import type {TupleToUnion, ValueOf} from 'type-fest';
 import type {FileObject} from '@components/AttachmentModal';
-import {FallbackAvatar, QBOCircle, XeroCircle} from '@components/Icon/Expensicons';
+import {FallbackAvatar, IntacctSquare, NetSuiteSquare, QBOSquare, XeroSquare} from '@components/Icon/Expensicons';
 import * as defaultGroupAvatars from '@components/Icon/GroupDefaultAvatars';
 import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
 import type {MoneyRequestAmountInputProps} from '@components/MoneyRequestAmountInput';
@@ -7967,11 +7967,18 @@ function getSourceIDFromReportAction(reportAction: OnyxEntry<ReportAction>): str
 
 function getIntegrationIcon(connectionName?: ConnectionName) {
     if (connectionName === CONST.POLICY.CONNECTIONS.NAME.XERO) {
-        return XeroCircle;
+        return XeroSquare;
     }
     if (connectionName === CONST.POLICY.CONNECTIONS.NAME.QBO) {
-        return QBOCircle;
+        return QBOSquare;
     }
+    if (connectionName === CONST.POLICY.CONNECTIONS.NAME.NETSUITE) {
+        return NetSuiteSquare;
+    }
+    if (connectionName === CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT) {
+        return IntacctSquare;
+    }
+
     return undefined;
 }
 

src/styles/index.ts

@@ -5247,6 +5247,11 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.border,
         },
 
+        integrationIcon: {
+            overflow: 'hidden',
+            borderRadius: variables.buttonBorderRadius,
+        },
+
         colorGreenSuccess: {
             color: colors.green400,
         },

src/styles/variables.ts

@@ -83,6 +83,7 @@ export default {
     iconSizeExtraLarge: 40,
     iconSizeSuperLarge: 60,
     iconSizeUltraLarge: 80,
+    iconSizeMenuItem: 32,
     iconBottomBar: 24,
     sidebarAvatarSize: 28,
     iconHeader: 48,