From afc03018f259964f69c4f4184a479ea732452ff9 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Tue, 8 Sep 2026 07:22:00 -0600 Subject: [PATCH 1/2] removing CheckMarkFilled --- src/views/mfa/MFAImages.js | 20 +++++++------------- src/views/mfa/MFAImages.module.css | 8 ++++++++ typings/kyper.d.ts | 1 - 3 files changed, 15 insertions(+), 14 deletions(-) create mode 100644 src/views/mfa/MFAImages.module.css diff --git a/src/views/mfa/MFAImages.js b/src/views/mfa/MFAImages.js index d892c2f411..1c77ac4f96 100644 --- a/src/views/mfa/MFAImages.js +++ b/src/views/mfa/MFAImages.js @@ -10,12 +10,12 @@ import { focusElement } from 'src/utilities/Accessibility' import useAnalyticsPath from 'src/hooks/useAnalyticsPath' import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent' import { PageviewInfo, AnalyticEvents } from 'src/const/Analytics' - -import { CheckmarkFilled } from '@kyper/icon/CheckmarkFilled' import { useTokens } from '@kyper/tokenprovider' import { Icon, Text } from '@mxenabled/mxui' import { Button } from '@mui/material' +import moduleStyles from 'src/views/mfa/MFAImages.module.css' + export const MFAImages = (props) => { const { institution, isSubmitting, mfaCredentials, onSubmit } = props useAnalyticsPath(...PageviewInfo.CONNECT_MFA_IMAGE_OPTIONS) @@ -90,12 +90,14 @@ export const MFAImages = (props) => { src={option.data_uri} /> {isSelected ? ( - ) : null} @@ -160,14 +162,6 @@ const getStyles = (tokens) => { opacity: '70%', }, }, - checkMark: { - backgroundColor: tokens.Color.NeutralWhite, - borderRadius: '50%', - border: `2px solid ${tokens.Color.NeutralWhite}`, - position: 'absolute', - top: tokens.Spacing.XSmall, - right: tokens.Spacing.XSmall, - }, errorContent: { marginTop: tokens.Spacing.XSmall, color: tokens.TextColor.Error, diff --git a/src/views/mfa/MFAImages.module.css b/src/views/mfa/MFAImages.module.css new file mode 100644 index 0000000000..32a3a51dd1 --- /dev/null +++ b/src/views/mfa/MFAImages.module.css @@ -0,0 +1,8 @@ +.checkMark { + background-color: var(--mui-palette-common-white); + border-radius: '50%'; + border: 2px solid var(--mui-palette-common-white); + position: 'absolute'; + top: var(--mui-spacing-1); + right: var(--mui-spacing-1); +} diff --git a/typings/kyper.d.ts b/typings/kyper.d.ts index 33b0ab2500..919d4c09db 100644 --- a/typings/kyper.d.ts +++ b/typings/kyper.d.ts @@ -10,4 +10,3 @@ declare module '@kyper/icon/Growth' declare module '@kyper/icon/Image' declare module '@kyper/icon/Health' declare module '@kyper/hooks' -declare module '@kyper/icon/CheckmarkFilled' From 8950c7bd70114e42fb9f417c88dbaf6e582e051f Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Wed, 23 Sep 2026 09:41:18 -0600 Subject: [PATCH 2/2] fix: removing CheckmarkFilled in favor of MXUI icon --- package-lock.json | 8 ++++---- package.json | 2 +- src/views/mfa/MFAImages.module.css | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index fc0d4ccf5f..64e836b722 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@kyper/tokenprovider": "^4.4.0", "@mui/icons-material": "^7.3.9", "@mui/material": "^7.3.9", - "@mxenabled/mxui": "^2.9.1", + "@mxenabled/mxui": "^2.10.0", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "bowser": "^2.11.0", @@ -2611,9 +2611,9 @@ } }, "node_modules/@mxenabled/mxui": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-2.9.1.tgz", - "integrity": "sha512-RzuVFnYFndw4JWN0wkBaAyCItWTonxJHScHWXCe9oYtce0aJAl7ypm7ngcZTO2Ds3VMWfvDtIBu3molNRTERHA==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-2.10.0.tgz", + "integrity": "sha512-1LbDaMx5hEVbMsFwwRC30G9vvsIlDhr+XZ8DVpFYaH8qZSPfhlY/LTi4KioqjIwgvdvI0ZLDVwzWikXG94XjWQ==", "license": "MIT", "dependencies": { "@emotion/react": "^11.14.0", diff --git a/package.json b/package.json index c22156af4c..8dc967ef43 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@kyper/tokenprovider": "^4.4.0", "@mui/icons-material": "^7.3.9", "@mui/material": "^7.3.9", - "@mxenabled/mxui": "^2.9.1", + "@mxenabled/mxui": "^2.10.0", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "bowser": "^2.11.0", diff --git a/src/views/mfa/MFAImages.module.css b/src/views/mfa/MFAImages.module.css index 32a3a51dd1..2fe9bcd9ef 100644 --- a/src/views/mfa/MFAImages.module.css +++ b/src/views/mfa/MFAImages.module.css @@ -1,8 +1,8 @@ .checkMark { background-color: var(--mui-palette-common-white); - border-radius: '50%'; - border: 2px solid var(--mui-palette-common-white); - position: 'absolute'; - top: var(--mui-spacing-1); - right: var(--mui-spacing-1); + border-radius: 50%; + border: 1px solid var(--mui-palette-common-white); + position: absolute; + top: var(--spacing-1); + right: var(--spacing-1); }