From 8eca39c40b975af5bcab9ef545cd81a536c470c0 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Mon, 17 Aug 2026 19:13:37 -0600
Subject: [PATCH 1/2] feat: migrate @kyper/icon/Accounts to MXUI

---
 src/components/StyledAccountTypeIcon.tsx       |  7 ++++---
 src/views/microdeposits/SharedRoutingNumber.js | 12 ++----------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/StyledAccountTypeIcon.tsx b/src/components/StyledAccountTypeIcon.tsx
index d4d1191d08..b0b07b4672 100644
--- a/src/components/StyledAccountTypeIcon.tsx
+++ b/src/components/StyledAccountTypeIcon.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 
+import { Icon } from '@mxenabled/mxui'
+
 import { useTokens } from '@kyper/tokenprovider'
-import { Accounts } from '@kyper/icon/Accounts'
 import { Check } from '@kyper/icon/Check'
 import { PiggyBankOutline } from '@kyper/icon/PiggyBankOutline'
 import { Document } from '@kyper/icon/Document'
@@ -58,9 +59,9 @@ export const StyledAccountTypeIcon: React.FC<StyledAccountTypeIconProps> = ({
       case AccountTypes.UNKNOWN:
         return <Grid color={tokens.TextColor.Default} size={iconSize} />
       case 'accounts':
-        return <Accounts color={tokens.TextColor.Default} size={iconSize} />
+        return <Icon color="action" name="account_balance" size={iconSize} />
       default:
-        return <Accounts color={tokens.TextColor.Default} size={iconSize} />
+        return <Icon color="action" name="account_balance" size={iconSize} />
     }
   }
   return <div style={styles.wrapper}>{getIcon()}</div>
diff --git a/src/views/microdeposits/SharedRoutingNumber.js b/src/views/microdeposits/SharedRoutingNumber.js
index a5efb3b592..d80c5590d4 100644
--- a/src/views/microdeposits/SharedRoutingNumber.js
+++ b/src/views/microdeposits/SharedRoutingNumber.js
@@ -2,8 +2,7 @@ import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { Accounts } from '@kyper/icon/Accounts'
+import { Text, Icon } from '@mxenabled/mxui'
 import { Tag } from '@kyper/tag'
 
 import { __ } from 'src/utilities/Intl'
@@ -78,14 +77,7 @@ export const SharedRoutingNumber = (props) => {
         </div>
         <div style={styles.actionTile}>
           <ActionTile
-            icon={
-              <Accounts
-                aria-hidden={true}
-                color={tokens.Color.NeutralWhite}
-                height={20}
-                width={20}
-              />
-            }
+            icon={<Icon aria-hidden={true} color="action" name="account_balance" size="20" />}
             onSelectAction={(e) =>
               fadeOut(containerRef.current, 'up', 300).then(() => continueMicrodeposits(e))
             }

From 1f1fd0245c02a9b7911b20a2d0e45147536affa9 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Mon, 17 Aug 2026 20:18:53 -0600
Subject: [PATCH 2/2] use css module

---
 src/components/StyledAccountTypeIcon.tsx      |  4 +-
 .../microdeposits/SharedRoutingNumber.js      | 62 ++++---------------
 .../SharedRoutingNumber.module.css            | 44 +++++++++++++
 3 files changed, 58 insertions(+), 52 deletions(-)
 create mode 100644 src/views/microdeposits/SharedRoutingNumber.module.css

diff --git a/src/components/StyledAccountTypeIcon.tsx b/src/components/StyledAccountTypeIcon.tsx
index b0b07b4672..ccb8ef6b90 100644
--- a/src/components/StyledAccountTypeIcon.tsx
+++ b/src/components/StyledAccountTypeIcon.tsx
@@ -59,9 +59,9 @@ export const StyledAccountTypeIcon: React.FC<StyledAccountTypeIconProps> = ({
       case AccountTypes.UNKNOWN:
         return <Grid color={tokens.TextColor.Default} size={iconSize} />
       case 'accounts':
-        return <Icon color="action" name="account_balance" size={iconSize} />
+        return <Icon color="inherit" name="account_balance" size={iconSize} />
       default:
-        return <Icon color="action" name="account_balance" size={iconSize} />
+        return <Icon color="inherit" name="account_balance" size={iconSize} />
     }
   }
   return <div style={styles.wrapper}>{getIcon()}</div>
diff --git a/src/views/microdeposits/SharedRoutingNumber.js b/src/views/microdeposits/SharedRoutingNumber.js
index d80c5590d4..26dcd4612c 100644
--- a/src/views/microdeposits/SharedRoutingNumber.js
+++ b/src/views/microdeposits/SharedRoutingNumber.js
@@ -1,7 +1,6 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 
-import { useTokens } from '@kyper/tokenprovider'
 import { Text, Icon } from '@mxenabled/mxui'
 import { Tag } from '@kyper/tag'
 
@@ -17,27 +16,27 @@ import { GoBackButton } from 'src/components/GoBackButton'
 import { ActionTile } from 'src/components/ActionTile'
 import { fadeOut } from 'src/utilities/Animation'
 
+import styles from 'src/views/microdeposits/SharedRoutingNumber.module.css'
+
 export const SharedRoutingNumber = (props) => {
   const { continueMicrodeposits, institutions, onGoBack, routingNumber, selectInstitution } = props
   useAnalyticsPath(...PageviewInfo.CONNECT_SHARED_ROUTING_NUMBER)
   const containerRef = useRef(null)
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
   const getNextDelay = getDelay()
 
   return (
-    <div ref={containerRef} style={styles.container}>
+    <div className={styles.container} ref={containerRef}>
       <SlideDown delay={getNextDelay()}>
         <GoBackButton handleGoBack={onGoBack} />
 
-        <Text component="h2" style={styles.title} truncate={false} variant="H2">
+        <Text className={styles.title} component="h2" truncate={false} variant="H2">
           {__('Select how to connect your account')}
         </Text>
       </SlideDown>
 
       <SlideDown delay={getNextDelay()}>
-        <div style={styles.instantBlock}>
-          <Text component="h3" style={styles.subTitle} truncate={false} variant="H3">
+        <div className={styles.instantBlock}>
+          <Text className={styles.subTitle} component="h3" truncate={false} variant="H3">
             {__('Instant')}
           </Text>
           <Tag size={'small'} title={__('Recommended')} variant={'success'} />
@@ -56,7 +55,7 @@ export const SharedRoutingNumber = (props) => {
 
       {institutions.map((institution) => (
         <SlideDown delay={getNextDelay()} key={institution.guid}>
-          <div style={styles.institutions}>
+          <div className={styles.institutions}>
             <InstitutionTile
               institution={institution}
               key={institution.guid}
@@ -68,16 +67,16 @@ export const SharedRoutingNumber = (props) => {
       ))}
 
       <SlideDown delay={getNextDelay()}>
-        <hr aria-hidden={true} style={styles.hr} />
-        <div style={styles.twoToThreeBlock}>
-          <Text component="h3" style={styles.subTitle} truncate={false} variant="H3">
+        <hr aria-hidden={true} className={styles.hr} />
+        <div className={styles.twoToThreeBlock}>
+          <Text className={styles.subTitle} component="h3" truncate={false} variant="H3">
             {__('2-3 days')}
           </Text>
           <Tag size={'small'} title={__('Manual')} variant={'warning'} />
         </div>
-        <div style={styles.actionTile}>
+        <div className={styles.actionTile}>
           <ActionTile
-            icon={<Icon aria-hidden={true} color="action" name="account_balance" size="20" />}
+            icon={<Icon aria-hidden={true} name="account_balance" size="20" />}
             onSelectAction={(e) =>
               fadeOut(containerRef.current, 'up', 300).then(() => continueMicrodeposits(e))
             }
@@ -90,43 +89,6 @@ export const SharedRoutingNumber = (props) => {
   )
 }
 
-const getStyles = (tokens) => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  title: {
-    display: 'block',
-    marginTop: tokens.XSmall,
-    marginBottom: tokens.Spacing.Large,
-  },
-  institutions: {
-    marginLeft: '-15px',
-    marginRight: '-15px',
-  },
-  actionTile: {
-    marginLeft: `-${tokens.Spacing.Small}px`,
-    marginRight: `-${tokens.Spacing.Small}px`,
-    marginTop: tokens.Spacing.Tiny,
-  },
-  subTitle: {
-    display: 'block',
-    marginBottom: tokens.Spacing.Tiny,
-    marginRight: tokens.Spacing.Small,
-  },
-  hr: {
-    marginTop: tokens.Spacing.Small,
-  },
-  twoToThreeBlock: {
-    display: 'flex',
-    marginTop: '26px',
-  },
-  instantBlock: {
-    display: 'flex',
-    marginBottom: tokens.Spacing.XTiny,
-  },
-})
-
 SharedRoutingNumber.propTypes = {
   continueMicrodeposits: PropTypes.func.isRequired,
   institutions: PropTypes.array.isRequired,
diff --git a/src/views/microdeposits/SharedRoutingNumber.module.css b/src/views/microdeposits/SharedRoutingNumber.module.css
new file mode 100644
index 0000000000..b4ebb833e3
--- /dev/null
+++ b/src/views/microdeposits/SharedRoutingNumber.module.css
@@ -0,0 +1,44 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.title:global(.MuiTypography-root) {
+  display: block;
+  margin-bottom: var(--spacing-3);
+}
+
+.subTitle:global(.MuiTypography-root) {
+  display: block;
+  margin-bottom: var(--spacing-point-5);
+  margin-right: var(--spacing-1-point-5);
+}
+
+.instantBlock {
+  display: flex;
+  margin-bottom: var(--spacing-point-25);
+}
+
+.institutions {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
+.hr {
+  margin-top: var(--spacing-1-point-5);
+}
+
+.twoToThreeBlock {
+  display: flex;
+  margin-top: 26px;
+}
+
+.actionTile {
+  margin-left: calc(-1 * var(--spacing-1-point-5));
+  margin-right: calc(-1 * var(--spacing-1-point-5));
+  margin-top: var(--spacing-point-5);
+}
+
+:global(.MuiSvgIcon-root) {
+  color: var(--mui-palette-common-white);
+}