Migrate @kyper/icon/Accounts to MXUI

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="inherit" name="account_balance" size={iconSize} />
       default:
-        return <Accounts color={tokens.TextColor.Default} size={iconSize} />
+        return <Icon color="inherit" name="account_balance" size={iconSize} />
     }
   }
   return <div style={styles.wrapper}>{getIcon()}</div>

src/views/microdeposits/SharedRoutingNumber.js

@@ -1,9 +1,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'
@@ -18,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'} />
@@ -57,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}
@@ -69,23 +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={
-              <Accounts
-                aria-hidden={true}
-                color={tokens.Color.NeutralWhite}
-                height={20}
-                width={20}
-              />
-            }
+            icon={<Icon aria-hidden={true} name="account_balance" size="20" />}
             onSelectAction={(e) =>
               fadeOut(containerRef.current, 'up', 300).then(() => continueMicrodeposits(e))
             }
@@ -98,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,

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);
+}