diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts index da6b3d93433d..766c0df950b4 100644 --- a/src/components/ButtonWithDropdownMenu/types.ts +++ b/src/components/ButtonWithDropdownMenu/types.ts @@ -25,6 +25,7 @@ type DropdownOption = { iconWidth?: number; iconHeight?: number; iconDescription?: string; + additionalIconStyles?: StyleProp; onSelected?: () => void; disabled?: boolean; iconFill?: string; diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 526a090afb73..a40fd925cd2e 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -114,6 +114,9 @@ type MenuItemBaseProps = { /** Any additional styles to pass to the icon container. */ iconStyles?: StyleProp; + /** Additional styles to pass to the icon itself */ + additionalIconStyles?: StyleProp; + /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon?: IconAsset; @@ -433,6 +436,7 @@ function MenuItem( tooltipShiftHorizontal = 0, tooltipShiftVertical = 0, renderTooltipContent, + additionalIconStyles, shouldShowSelectedItemCheck = false, onHideTooltip, shouldIconUseAutoWidthStyle = false, @@ -663,6 +667,7 @@ function MenuItem( isPaneMenu, ) } + additionalStyles={additionalIconStyles} /> ) : ( ): 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; } diff --git a/src/styles/index.ts b/src/styles/index.ts index 1bd77a7974e5..5b04a7a8eace 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5264,6 +5264,11 @@ const styles = (theme: ThemeColors) => backgroundColor: theme.border, }, + integrationIcon: { + overflow: 'hidden', + borderRadius: variables.buttonBorderRadius, + }, + colorGreenSuccess: { color: colors.green400, }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index dc6655791489..4e9bf50e3c8e 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -83,6 +83,7 @@ export default { iconSizeExtraLarge: 40, iconSizeSuperLarge: 60, iconSizeUltraLarge: 80, + iconSizeMenuItem: 32, iconBottomBar: 24, sidebarAvatarSize: 28, iconHeader: 48,