From 05f8b0507022cebd21d0727e220e4f2b0819a40b Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Mon, 24 Aug 2026 10:14:05 -0600 Subject: [PATCH 1/6] refactor(manualaccountmenu): changing manual account menu to use MUI list instead of kyper --- package-lock.json | 55 +------------------ src/views/manualAccount/ManualAccountMenu.js | 44 +++++++++------ .../ManualAccountMenu.module.css | 3 + ...nu-test.tsx => ManualAccountMenu.test.tsx} | 0 4 files changed, 30 insertions(+), 72 deletions(-) create mode 100644 src/views/manualAccount/ManualAccountMenu.module.css rename src/views/manualAccount/{__tests__/manualAccountMenu-test.tsx => ManualAccountMenu.test.tsx} (100%) diff --git a/package-lock.json b/package-lock.json index 23aa82ad55..9983e6587b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -865,7 +865,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -882,7 +881,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -899,7 +897,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -916,7 +913,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -933,7 +929,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -949,7 +944,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -966,7 +960,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -983,7 +976,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1000,7 +992,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1017,7 +1008,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1034,7 +1024,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1051,7 +1040,6 @@ "cpu": [ "loong64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1068,7 +1056,6 @@ "cpu": [ "mips64el" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1085,7 +1072,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1102,7 +1088,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1119,7 +1104,6 @@ "cpu": [ "s390x" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1136,7 +1120,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1153,7 +1136,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1170,7 +1152,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1187,7 +1168,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1204,7 +1184,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1221,7 +1200,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1238,7 +1216,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1255,7 +1232,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1272,7 +1248,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1289,7 +1264,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3349,7 +3323,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3363,7 +3336,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3377,7 +3349,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3391,7 +3362,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3405,7 +3375,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3419,7 +3388,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3433,7 +3401,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3447,7 +3414,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3461,7 +3427,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3475,7 +3440,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3489,7 +3453,6 @@ "cpu": [ "loong64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3503,7 +3466,6 @@ "cpu": [ "loong64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3517,7 +3479,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3531,7 +3492,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3545,7 +3505,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3559,7 +3518,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3573,7 +3531,6 @@ "cpu": [ "s390x" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3587,7 +3544,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3601,7 +3557,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3615,7 +3570,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3629,7 +3583,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3643,7 +3596,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3657,7 +3609,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3671,7 +3622,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3685,7 +3635,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8391,7 +8340,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -9965,7 +9913,6 @@ "version": "2.6.1", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", - "dev": true, "optional": true, "bin": { "jiti": "lib/jiti-cli.mjs" @@ -17829,7 +17776,7 @@ "version": "2.8.3", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz", "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==", - "dev": true, + "devOptional": true, "license": "ISC", "bin": { "yaml": "bin.mjs" diff --git a/src/views/manualAccount/ManualAccountMenu.js b/src/views/manualAccount/ManualAccountMenu.js index 7849c7ba6c..2f9b8238a7 100644 --- a/src/views/manualAccount/ManualAccountMenu.js +++ b/src/views/manualAccount/ManualAccountMenu.js @@ -1,11 +1,15 @@ import React, { useEffect } from 'react' import PropTypes from 'prop-types' import { __ } from 'src/utilities/Intl' - import { Icon, Text } from '@mxenabled/mxui' -import { UtilityRow } from '@kyper/utilityrow' - -import { fadeOut } from 'src/utilities/Animation' +import { + List, + ListItem, + ListItemAvatar, + ListItemButton, + ListItemIcon, + ListItemText, +} from '@mui/material' import { SlideDown } from 'src/components/SlideDown' @@ -14,6 +18,7 @@ import { focusElement } from 'src/utilities/Accessibility' import { AccountTypeNames, AccountTypes } from 'src/views/manualAccount/constants' import { StyledAccountTypeIcon } from 'src/components/StyledAccountTypeIcon' import { Stack } from '@mui/material' +import styles from 'src/views/manualAccount/ManualAccountMenu.module.css' export const ManualAccountMenu = React.forwardRef((props, ref) => { const getNextDelay = getDelay() @@ -85,22 +90,25 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => { - + {typeList.map((account_type, i) => ( - - fadeOut(ref.current, 'up', 300).then(props.handleAccountTypeSelect(account_type)) - } - rightChildren={} - title={AccountTypeNames[account_type]()} - /> + + props.handleAccountTypeSelect(account_type)} + > + + {getIcon[account_type]} + + + + + + + ))} - + ) diff --git a/src/views/manualAccount/ManualAccountMenu.module.css b/src/views/manualAccount/ManualAccountMenu.module.css new file mode 100644 index 0000000000..8d77932f76 --- /dev/null +++ b/src/views/manualAccount/ManualAccountMenu.module.css @@ -0,0 +1,3 @@ +.listItemAvatar:global(.MuiListItemAvatar-root) { + height: unset; +} diff --git a/src/views/manualAccount/__tests__/manualAccountMenu-test.tsx b/src/views/manualAccount/ManualAccountMenu.test.tsx similarity index 100% rename from src/views/manualAccount/__tests__/manualAccountMenu-test.tsx rename to src/views/manualAccount/ManualAccountMenu.test.tsx From a2da76d99601532f17b5c97bf4b3a986f8883d10 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Tue, 25 Aug 2026 10:05:14 -0600 Subject: [PATCH 2/6] fix styling of the manual account menu and add tests --- src/ConnectedTokenProvider.tsx | 41 +++++++++++ src/views/manualAccount/ManualAccountMenu.js | 73 ++++++++++--------- .../ManualAccountMenu.module.css | 3 - .../manualAccount/ManualAccountMenu.test.tsx | 31 ++++---- 4 files changed, 96 insertions(+), 52 deletions(-) delete mode 100644 src/views/manualAccount/ManualAccountMenu.module.css diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index ee8bfc8404..fa0fca15c5 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -21,6 +21,8 @@ declare module '@mui/material/styles' { } } +const listItemButtonPadding = 12 + const connectThemeOverrides = (palette: Theme['palette']) => ({ components: { MuiTypography: { @@ -78,6 +80,13 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({ }, }, }, + MuiDivider: { + styleOverrides: { + root: { + height: 'unset', + }, + }, + }, MuiFormLabel: { styleOverrides: { asterisk: { @@ -144,6 +153,38 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({ }, }, }, + MuiList: { + styleOverrides: { + root: { + marginLeft: -1 * listItemButtonPadding, + marginRight: -1 * listItemButtonPadding, + }, + }, + }, + MuiListItemAvatar: { + styleOverrides: { + root: { + height: undefined, + marginRight: 12, + minWidth: 'unset', + width: undefined, + '& .MuiAvatar-root': { + height: undefined, + width: undefined, + }, + }, + }, + }, + + MuiListItemButton: { + styleOverrides: { + root: { + borderRadius: 8, + paddingLeft: listItemButtonPadding, + paddingRight: listItemButtonPadding, + }, + }, + }, }, // TODO: Remove this custom spacing scale once we are on MXUI v2. spacing: (factor: number) => `${factor * 8}px`, diff --git a/src/views/manualAccount/ManualAccountMenu.js b/src/views/manualAccount/ManualAccountMenu.js index 2f9b8238a7..c81eae9a50 100644 --- a/src/views/manualAccount/ManualAccountMenu.js +++ b/src/views/manualAccount/ManualAccountMenu.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import React, { Fragment, useEffect } from 'react' import PropTypes from 'prop-types' import { __ } from 'src/utilities/Intl' import { Icon, Text } from '@mxenabled/mxui' @@ -18,7 +18,6 @@ import { focusElement } from 'src/utilities/Accessibility' import { AccountTypeNames, AccountTypes } from 'src/views/manualAccount/constants' import { StyledAccountTypeIcon } from 'src/components/StyledAccountTypeIcon' import { Stack } from '@mui/material' -import styles from 'src/views/manualAccount/ManualAccountMenu.module.css' export const ManualAccountMenu = React.forwardRef((props, ref) => { const getNextDelay = getDelay() @@ -41,19 +40,21 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => { AccountTypes.UNKNOWN, ] + const iconSize = 24 + const getIcon = { - [AccountTypes.CHECKING]: , - [AccountTypes.SAVINGS]: , - [AccountTypes.LOAN]: , - [AccountTypes.CREDIT_CARD]: , - [AccountTypes.INVESTMENT]: , - [AccountTypes.LINE_OF_CREDIT]: , - [AccountTypes.MORTGAGE]: , - [AccountTypes.PROPERTY]: , - [AccountTypes.CASH]: , - [AccountTypes.INSURANCE]: , - [AccountTypes.PREPAID]: , - [AccountTypes.UNKNOWN]: , + [AccountTypes.CHECKING]: , + [AccountTypes.SAVINGS]: , + [AccountTypes.LOAN]: , + [AccountTypes.CREDIT_CARD]: , + [AccountTypes.INVESTMENT]: , + [AccountTypes.LINE_OF_CREDIT]: , + [AccountTypes.MORTGAGE]: , + [AccountTypes.PROPERTY]: , + [AccountTypes.CASH]: , + [AccountTypes.INSURANCE]: , + [AccountTypes.PREPAID]: , + [AccountTypes.UNKNOWN]: , } useEffect(() => { @@ -69,7 +70,7 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => { - + { > {__("Track accounts, assets, and other things that don't have a live connection.")} + + {typeList.map((account_type) => ( + + + props.handleAccountTypeSelect(account_type)} + > + {getIcon[account_type]} + + {AccountTypeNames[account_type]()} + + + + + + + + ))} + - - - {typeList.map((account_type, i) => ( - - props.handleAccountTypeSelect(account_type)} - > - - {getIcon[account_type]} - - - - - - - - ))} - - ) }) diff --git a/src/views/manualAccount/ManualAccountMenu.module.css b/src/views/manualAccount/ManualAccountMenu.module.css deleted file mode 100644 index 8d77932f76..0000000000 --- a/src/views/manualAccount/ManualAccountMenu.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.listItemAvatar:global(.MuiListItemAvatar-root) { - height: unset; -} diff --git a/src/views/manualAccount/ManualAccountMenu.test.tsx b/src/views/manualAccount/ManualAccountMenu.test.tsx index f7e1ce38fb..a999e8e436 100644 --- a/src/views/manualAccount/ManualAccountMenu.test.tsx +++ b/src/views/manualAccount/ManualAccountMenu.test.tsx @@ -2,22 +2,27 @@ import React from 'react' import { screen, render } from 'src/utilities/testingLibrary' -import { ManualAccountMenu } from 'src/views/manualAccount/ManualAccountMenu' - -const handleAccountTypeSelect = vi.fn() - -const accountMenuProps = { - handleAccountTypeSelect, - availableAccountTypes: [], -} +import { ManualAccountConnect } from 'src/views/manualAccount/ManualAccountConnect' describe('manualAccountMenu', () => { - it('renders manual account menu and clicks on a checking account', async () => { - const ref = React.createRef() + it.each([ + 'Checking', + 'Savings', + 'Loan', + 'Credit Card', + 'Investment', + 'Line of Credit', + 'Mortgage', + 'Property', + 'Cash', + 'Insurance', + 'Prepaid', + 'Other', + ])('shows the %s form when the %s menu button is clicked', async (formType) => { + const { user } = render() - const { user } = render() + await user.click(await screen.findByRole('button', { name: formType })) - await user.click(await screen.findByRole('button', { name: 'Checking' })) - expect(handleAccountTypeSelect).toHaveBeenCalled() + expect(await screen.findByTestId('manual-account-form-header')).toHaveTextContent(formType) }) }) From 4af778861553567478b18ea4c3eba93f5b241a5d Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Tue, 25 Aug 2026 13:15:45 -0600 Subject: [PATCH 3/6] convert to typescript --- src/views/manualAccount/ManualAccountMenu.js | 123 ----------------- src/views/manualAccount/ManualAccountMenu.tsx | 124 ++++++++++++++++++ 2 files changed, 124 insertions(+), 123 deletions(-) delete mode 100644 src/views/manualAccount/ManualAccountMenu.js create mode 100644 src/views/manualAccount/ManualAccountMenu.tsx diff --git a/src/views/manualAccount/ManualAccountMenu.js b/src/views/manualAccount/ManualAccountMenu.js deleted file mode 100644 index c81eae9a50..0000000000 --- a/src/views/manualAccount/ManualAccountMenu.js +++ /dev/null @@ -1,123 +0,0 @@ -import React, { Fragment, useEffect } from 'react' -import PropTypes from 'prop-types' -import { __ } from 'src/utilities/Intl' -import { Icon, Text } from '@mxenabled/mxui' -import { - List, - ListItem, - ListItemAvatar, - ListItemButton, - ListItemIcon, - ListItemText, -} from '@mui/material' - -import { SlideDown } from 'src/components/SlideDown' - -import { getDelay } from 'src/utilities/getDelay' -import { focusElement } from 'src/utilities/Accessibility' -import { AccountTypeNames, AccountTypes } from 'src/views/manualAccount/constants' -import { StyledAccountTypeIcon } from 'src/components/StyledAccountTypeIcon' -import { Stack } from '@mui/material' - -export const ManualAccountMenu = React.forwardRef((props, ref) => { - const getNextDelay = getDelay() - - const typeList = - props.availableAccountTypes?.length !== 0 - ? props.availableAccountTypes - : [ - AccountTypes.CHECKING, - AccountTypes.SAVINGS, - AccountTypes.LOAN, - AccountTypes.CREDIT_CARD, - AccountTypes.INVESTMENT, - AccountTypes.LINE_OF_CREDIT, - AccountTypes.MORTGAGE, - AccountTypes.PROPERTY, - AccountTypes.CASH, - AccountTypes.INSURANCE, - AccountTypes.PREPAID, - AccountTypes.UNKNOWN, - ] - - const iconSize = 24 - - const getIcon = { - [AccountTypes.CHECKING]: , - [AccountTypes.SAVINGS]: , - [AccountTypes.LOAN]: , - [AccountTypes.CREDIT_CARD]: , - [AccountTypes.INVESTMENT]: , - [AccountTypes.LINE_OF_CREDIT]: , - [AccountTypes.MORTGAGE]: , - [AccountTypes.PROPERTY]: , - [AccountTypes.CASH]: , - [AccountTypes.INSURANCE]: , - [AccountTypes.PREPAID]: , - [AccountTypes.UNKNOWN]: , - } - - useEffect(() => { - const timer = setTimeout(() => { - focusElement(document.querySelector('[data-test="back-button"]:first-of-type')) - }, 300) - - return () => clearTimeout(timer) - }, []) - - return ( -
- - - - - - {__('Add account manually')} - - - {__("Track accounts, assets, and other things that don't have a live connection.")} - - - {typeList.map((account_type) => ( - - - props.handleAccountTypeSelect(account_type)} - > - {getIcon[account_type]} - - {AccountTypeNames[account_type]()} - - - - - - - - ))} - - - - -
- ) -}) - -ManualAccountMenu.propTypes = { - availableAccountTypes: PropTypes.array, - handleAccountTypeSelect: PropTypes.func.isRequired, -} - -ManualAccountMenu.displayName = 'ManualAccountMenu' diff --git a/src/views/manualAccount/ManualAccountMenu.tsx b/src/views/manualAccount/ManualAccountMenu.tsx new file mode 100644 index 0000000000..098b54a972 --- /dev/null +++ b/src/views/manualAccount/ManualAccountMenu.tsx @@ -0,0 +1,124 @@ +import React, { Fragment, useEffect } from 'react' +import { __ } from 'src/utilities/Intl' +import { Icon, Text } from '@mxenabled/mxui' +import { + List, + ListItem, + ListItemAvatar, + ListItemButton, + ListItemIcon, + ListItemText, +} from '@mui/material' + +import { SlideDown } from 'src/components/SlideDown' + +import { getDelay } from 'src/utilities/getDelay' +import { focusElement } from 'src/utilities/Accessibility' +import { AccountTypeNames, AccountTypes } from 'src/views/manualAccount/constants' +import { StyledAccountTypeIcon } from 'src/components/StyledAccountTypeIcon' +import { Stack } from '@mui/material' + +interface ManualAccountMenuProps { + availableAccountTypes?: number[] + handleAccountTypeSelect: (accountType: number) => void +} + +export const ManualAccountMenu = React.forwardRef( + (props, ref) => { + const getNextDelay = getDelay() + + const typeList = + props.availableAccountTypes?.length !== 0 + ? props.availableAccountTypes + : [ + AccountTypes.CHECKING, + AccountTypes.SAVINGS, + AccountTypes.LOAN, + AccountTypes.CREDIT_CARD, + AccountTypes.INVESTMENT, + AccountTypes.LINE_OF_CREDIT, + AccountTypes.MORTGAGE, + AccountTypes.PROPERTY, + AccountTypes.CASH, + AccountTypes.INSURANCE, + AccountTypes.PREPAID, + AccountTypes.UNKNOWN, + ] + + const iconSize = 24 + + const getIcon: { [key: number]: React.ReactElement } = { + [AccountTypes.CHECKING]: , + [AccountTypes.SAVINGS]: , + [AccountTypes.LOAN]: , + [AccountTypes.CREDIT_CARD]: , + [AccountTypes.INVESTMENT]: , + [AccountTypes.LINE_OF_CREDIT]: , + [AccountTypes.MORTGAGE]: , + [AccountTypes.PROPERTY]: , + [AccountTypes.CASH]: , + [AccountTypes.INSURANCE]: , + [AccountTypes.PREPAID]: , + [AccountTypes.UNKNOWN]: , + } + + useEffect(() => { + const timer = setTimeout(() => { + focusElement(document.querySelector('[data-test="back-button"]:first-of-type')) + }, 300) + + return () => clearTimeout(timer) + }, []) + + return ( +
+ + + + + + {__('Add account manually')} + + + {__("Track accounts, assets, and other things that don't have a live connection.")} + + + {typeList?.map((account_type) => ( + + + props.handleAccountTypeSelect(account_type)} + > + {getIcon[account_type]} + + {AccountTypeNames[account_type]()} + + + + + + + + ))} + + + + +
+ ) + }, +) + +ManualAccountMenu.displayName = 'ManualAccountMenu' From 8eb06cd2401726934db6160ebac0c2c85b15e4fa Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Fri, 28 Aug 2026 11:31:22 -0600 Subject: [PATCH 4/6] improving implementation of styling --- package-lock.json | 8 ++-- package.json | 2 +- src/ConnectedTokenProvider.tsx | 30 ++----------- .../MuiList/FlushListContainer.test.tsx | 18 ++++++++ src/shared/MuiList/FlushListContainer.tsx | 9 ++++ src/shared/theme/theme.ts | 1 + src/views/manualAccount/ManualAccountMenu.tsx | 45 ++++++++++--------- 7 files changed, 60 insertions(+), 53 deletions(-) create mode 100644 src/shared/MuiList/FlushListContainer.test.tsx create mode 100644 src/shared/MuiList/FlushListContainer.tsx create mode 100644 src/shared/theme/theme.ts diff --git a/package-lock.json b/package-lock.json index 9983e6587b..6bfd592629 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", "@mui/material": "^6.1.5", - "@mxenabled/mxui": "^1.6.0", + "@mxenabled/mxui": "^1.7.0", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "bowser": "^2.11.0", @@ -2774,9 +2774,9 @@ } }, "node_modules/@mxenabled/mxui": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.6.0.tgz", - "integrity": "sha512-y5BD01eRwjBXrUJzBh516KC5dF/wfFOMtLBSio5udxW+Xf97h0VSVu1eCNb5Z1jq43WDdHvQltCpEj3siQt2cw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.7.0.tgz", + "integrity": "sha512-qpy9BduXIBvlhr5OPWG6aWs3IjOfyaYQzAn1/TgHR7vcyA5v/YBMrt0vs3u4XSETTB3bGRWfHOvmKU+raLhpMw==", "license": "MIT", "dependencies": { "@emotion/react": "^11.14.0", diff --git a/package.json b/package.json index 8ec254fe72..5694a6b849 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", "@mui/material": "^6.1.5", - "@mxenabled/mxui": "^1.6.0", + "@mxenabled/mxui": "^1.7.0", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "bowser": "^2.11.0", diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index fa0fca15c5..f0c938b243 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -8,6 +8,7 @@ import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui' import { TokenProvider, THEMES } from '@kyper/tokenprovider' import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme' +import { muiListItemButtonPadding } from './shared/theme/theme' declare module '@mui/material/styles' { interface PaletteColor { @@ -21,8 +22,6 @@ declare module '@mui/material/styles' { } } -const listItemButtonPadding = 12 - const connectThemeOverrides = (palette: Theme['palette']) => ({ components: { MuiTypography: { @@ -153,35 +152,12 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({ }, }, }, - MuiList: { - styleOverrides: { - root: { - marginLeft: -1 * listItemButtonPadding, - marginRight: -1 * listItemButtonPadding, - }, - }, - }, - MuiListItemAvatar: { - styleOverrides: { - root: { - height: undefined, - marginRight: 12, - minWidth: 'unset', - width: undefined, - '& .MuiAvatar-root': { - height: undefined, - width: undefined, - }, - }, - }, - }, - MuiListItemButton: { styleOverrides: { root: { borderRadius: 8, - paddingLeft: listItemButtonPadding, - paddingRight: listItemButtonPadding, + paddingLeft: muiListItemButtonPadding, + paddingRight: muiListItemButtonPadding, }, }, }, diff --git a/src/shared/MuiList/FlushListContainer.test.tsx b/src/shared/MuiList/FlushListContainer.test.tsx new file mode 100644 index 0000000000..6472c83849 --- /dev/null +++ b/src/shared/MuiList/FlushListContainer.test.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { describe, expect, it } from 'vitest' +import { render, screen } from 'src/utilities/testingLibrary' +import { FlushListContainer } from 'src/shared/MuiList/FlushListContainer' + +describe('', () => { + it('renders its children', () => { + const childContent = 'Child content' + + render( + +
{childContent}
+ , + ) + + expect(screen.getByText(childContent)).toBeInTheDocument() + }) +}) diff --git a/src/shared/MuiList/FlushListContainer.tsx b/src/shared/MuiList/FlushListContainer.tsx new file mode 100644 index 0000000000..620ddf2e63 --- /dev/null +++ b/src/shared/MuiList/FlushListContainer.tsx @@ -0,0 +1,9 @@ +import React, { ReactNode } from 'react' +import { Box } from '@mui/material' +import { muiListItemButtonPadding } from '../theme/theme' + +const negativeMargin = `${-1 * muiListItemButtonPadding}px` + +export const FlushListContainer = ({ children }: { children: ReactNode }) => ( + {children} +) diff --git a/src/shared/theme/theme.ts b/src/shared/theme/theme.ts new file mode 100644 index 0000000000..2a0e8ac7f5 --- /dev/null +++ b/src/shared/theme/theme.ts @@ -0,0 +1 @@ +export const muiListItemButtonPadding = 12 diff --git a/src/views/manualAccount/ManualAccountMenu.tsx b/src/views/manualAccount/ManualAccountMenu.tsx index 098b54a972..c7e6149d25 100644 --- a/src/views/manualAccount/ManualAccountMenu.tsx +++ b/src/views/manualAccount/ManualAccountMenu.tsx @@ -17,6 +17,7 @@ import { focusElement } from 'src/utilities/Accessibility' import { AccountTypeNames, AccountTypes } from 'src/views/manualAccount/constants' import { StyledAccountTypeIcon } from 'src/components/StyledAccountTypeIcon' import { Stack } from '@mui/material' +import { FlushListContainer } from 'src/shared/MuiList/FlushListContainer' interface ManualAccountMenuProps { availableAccountTypes?: number[] @@ -92,27 +93,29 @@ export const ManualAccountMenu = React.forwardRef {__("Track accounts, assets, and other things that don't have a live connection.")} - - {typeList?.map((account_type) => ( - - - props.handleAccountTypeSelect(account_type)} - > - {getIcon[account_type]} - - {AccountTypeNames[account_type]()} - - - - - - - - ))} - + + + {typeList?.map((account_type) => ( + + + props.handleAccountTypeSelect(account_type)} + > + {getIcon[account_type]} + + {AccountTypeNames[account_type]()} + + + + + + + + ))} + + From 23ee2ea11c5ed89d1ca8b45fe55d6ca2e9082a30 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Fri, 28 Aug 2026 12:55:16 -0600 Subject: [PATCH 5/6] use css modules instead --- src/ConnectedTokenProvider.tsx | 6 ++++-- src/shared/MuiList/FlushListContainer.module.css | 4 ++++ src/shared/MuiList/FlushListContainer.tsx | 6 ++---- src/shared/theme/theme.ts | 1 - 4 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 src/shared/MuiList/FlushListContainer.module.css delete mode 100644 src/shared/theme/theme.ts diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index f0c938b243..bdc87d7a16 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -8,7 +8,6 @@ import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui' import { TokenProvider, THEMES } from '@kyper/tokenprovider' import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme' -import { muiListItemButtonPadding } from './shared/theme/theme' declare module '@mui/material/styles' { interface PaletteColor { @@ -22,6 +21,8 @@ declare module '@mui/material/styles' { } } +export const muiListItemButtonPadding = 12 + const connectThemeOverrides = (palette: Theme['palette']) => ({ components: { MuiTypography: { @@ -212,10 +213,11 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode => tokenOverrides={kyperTokenOverrides} > - {/* This block can be deleted once we are on MXUI v2. */} ( - {children} +
{children}
) diff --git a/src/shared/theme/theme.ts b/src/shared/theme/theme.ts deleted file mode 100644 index 2a0e8ac7f5..0000000000 --- a/src/shared/theme/theme.ts +++ /dev/null @@ -1 +0,0 @@ -export const muiListItemButtonPadding = 12 From 31ce9a344b2ea128e836b1e186ba3cdf5ff0707d Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Fri, 28 Aug 2026 13:33:32 -0600 Subject: [PATCH 6/6] remove divider fix in favor of fixing it when we remove reset.css --- src/ConnectedTokenProvider.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index bdc87d7a16..81b4c1515f 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -80,13 +80,6 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({ }, }, }, - MuiDivider: { - styleOverrides: { - root: { - height: 'unset', - }, - }, - }, MuiFormLabel: { styleOverrides: { asterisk: {