Migrate @kyper/icon/Lock to MXUI

src/components/PrivateAndSecure.module.css

@@ -0,0 +1,12 @@
+.secureSeal {
+  align-content: center;
+  color: var(--mui-palette-text-secondary);
+  display: flex;
+  font-size: 13px;
+  justify-content: center;
+  padding: var(--spacing-2) 0;
+}
+
+.secureSeal :global(.MuiSvgIcon-root) {
+  margin-right: var(--spacing-point-5);
+}

src/components/PrivateAndSecure.tsx

@@ -1,43 +1,22 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 
-import { useTokens } from '@kyper/tokenprovider'
-import { Lock } from '@kyper/icon/Lock'
+import { Icon } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'
+import styles from 'src/components/PrivateAndSecure.module.css'
 
 interface PrivateAndSecureProps {
   style?: object
 }
 
 export const PrivateAndSecure: React.FC<PrivateAndSecureProps> = ({ style }) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
-
   return (
-    <div
-      data-test="private-secure-footer"
-      style={style ? { ...styles.secureSeal, ...style } : styles.secureSeal}
-    >
-      <Lock color={tokens.TextColor.InputLabel} size={12} style={styles.lock} />
+    <div className={styles.secureSeal} data-test="private-secure-footer" style={style}>
+      <Icon name="lock" size={12} />
       {
         // --TR: This is a "MX" slogan bank level security meaning as safe as banks are able
         __('Private and secure')
       }
     </div>
   )
 }
-
-const getStyles = (tokens: any) => ({
-  secureSeal: {
-    alignContent: 'center',
-    color: tokens.TextColor.InputLabel,
-    display: 'flex',
-    fontSize: tokens.FontSize.Small,
-    justifyContent: 'center',
-    padding: `${tokens.Spacing.Medium}px 0`,
-  },
-  lock: {
-    marginRight: tokens.Spacing.Tiny,
-  },
-})

src/views/disclosure/Disclosure.js

@@ -1,16 +1,12 @@
 import React, { useRef, useState, Fragment, useImperativeHandle } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { css } from '@mxenabled/cssinjs'
 
-import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { Lock } from '@kyper/icon/Lock'
-import { Link } from '@mui/material'
+import { Icon, Text } from '@mxenabled/mxui'
+import { Link, Stack } from '@mui/material'
 import { Button } from '@mui/material'
 
 import { ActionTypes } from 'src/redux/actions/Connect'
 import { selectConnectConfig, selectCurrentMode } from 'src/redux/reducers/configSlice'
-import { getSize } from 'src/redux/selectors/Browser'
 
 import { PageviewInfo } from 'src/const/Analytics'
 import useAnalyticsPath from 'src/hooks/useAnalyticsPath'
@@ -25,14 +21,11 @@ import { PrivacyPolicy } from 'src/views/disclosure/PrivacyPolicy'
 import PoweredByMXText from 'src/views/disclosure/PoweredByMXText'
 import { scrollToTop } from 'src/utilities/ScrollToTop'
 import { goToUrlLink } from 'src/utilities/global'
+import styles from 'src/views/disclosure/Disclosure.module.css'
 
 export const Disclosure = React.forwardRef((_, disclosureRef) => {
   const containerRef = useRef(null)
   useAnalyticsPath(...PageviewInfo.CONNECT_DISCLOSURE)
-  const size = useSelector(getSize)
-  const isSmall = size === 'small'
-  const tokens = useTokens()
-  const styles = getStyles(tokens, isSmall)
   const getNextDelay = getDelay()
   const [showPrivacyPolicy, setShowPrivacyPolicy] = useState(false)
   // Redux
@@ -74,8 +67,13 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
             <ConnectInstitutionHeader />
           </SlideDown>
           <SlideDown delay={getNextDelay()}>
-            <div style={styles.flexGroup}>
-              <Text data-test="disclosure-title" style={styles.title} truncate={false} variant="H2">
+            <Stack>
+              <Text
+                className={styles.title}
+                data-test="disclosure-title"
+                truncate={false}
+                variant="H2"
+              >
                 {_p('connect/disclosure/title', 'Connect your account')}
               </Text>
 
@@ -86,15 +84,15 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
                 )}
               </Text>
 
-              <ul data-test="disclosure-list" style={styles.dataList}>
+              <ul className={styles.dataList} data-test="disclosure-list">
                 {isInAggMode && (
                   <Fragment>
-                    <li className={css(styles.listItem)} data-test="disclosure-agg-mode-list-item1">
+                    <li className={styles.listItem} data-test="disclosure-agg-mode-list-item1">
                       <Text truncate={false} variant="Paragraph">
                         {__('Account details')}
                       </Text>
                     </li>
-                    <li className={css(styles.listItem)} data-test="disclosure-agg-mode-list-item2">
+                    <li className={styles.listItem} data-test="disclosure-agg-mode-list-item2">
                       <Text truncate={false} variant="Paragraph">
                         {__('Account balances and transactions')}
                       </Text>
@@ -104,12 +102,12 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
 
                 {isInTaxMode && (
                   <Fragment>
-                    <li className={css(styles.listItem)} data-test="disclosure-tax-mode-list-item1">
+                    <li className={styles.listItem} data-test="disclosure-tax-mode-list-item1">
                       <Text truncate={false} variant="Paragraph">
                         {__('Basic account information')}
                       </Text>
                     </li>
-                    <li className={css(styles.listItem)} data-test="disclosure-tax-mode-list-item2">
+                    <li className={styles.listItem} data-test="disclosure-tax-mode-list-item2">
                       <Text truncate={false} variant="Paragraph">
                         {__('Tax documents')}
                       </Text>
@@ -119,12 +117,12 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
 
                 {isInVerifyMode && (
                   <Fragment>
-                    <li className={css(styles.listItem)} data-test="disclosure-ver-mode-list-item1">
+                    <li className={styles.listItem} data-test="disclosure-ver-mode-list-item1">
                       <Text truncate={false} variant="Paragraph">
                         {__('Routing and account numbers')}
                       </Text>
                     </li>
-                    <li className={css(styles.listItem)} data-test="disclosure-ver-mode-list-item2">
+                    <li className={styles.listItem} data-test="disclosure-ver-mode-list-item2">
                       <Text truncate={false} variant="Paragraph">
                         {__('Account balances')}
                       </Text>
@@ -133,13 +131,8 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
                 )}
               </ul>
 
-              <div style={styles.lockGroup}>
-                <Lock
-                  color={tokens.TextColor.Default}
-                  data-test="disclosure-lock-svg"
-                  size={16}
-                  style={styles.lockIcon}
-                />
+              <div className={styles.lockGroup} data-test="disclosure-lock-svg">
+                <Icon name="lock" size={16} />
                 <Text
                   component="p"
                   data-test="disclosure-paragraph-2"
@@ -150,13 +143,14 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
                 </Text>
               </div>
               <Text
+                className={styles.disclaimer}
                 data-test="disclosure-privacy-policy-text"
-                style={styles.disclaimer}
                 truncate={false}
                 variant="ParagraphSmall"
               >
                 {_p('connect/disclosure/policy/text', 'By clicking Continue, you agree to the ')}
                 <Link
+                  className={styles.link}
                   data-test="disclosure-privacy-policy-link"
                   onClick={() => {
                     if (showExternalLinkPopup) {
@@ -171,15 +165,15 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
                       goToUrlLink(privacyUrl, true)
                     }
                   }}
-                  style={styles.link}
+                  variant="caption"
                 >
                   {_p('connect/disclosure/policy/link', 'MX Privacy Policy.')}
                 </Link>
               </Text>
-            </div>
+            </Stack>
           </SlideDown>
           <SlideDown delay={getNextDelay()}>
-            <div style={styles.flexGroup}>
+            <Stack>
               <Button
                 data-test="disclosure-continue"
                 onClick={() => {
@@ -194,70 +188,17 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
               >
                 {_p('connect/disclosure/button', 'Continue')}
               </Button>
-              <div data-test="disclosure-databymx" style={styles.poweredBy}>
+              <div className={styles.poweredBy} data-test="disclosure-databymx">
                 <PoweredByMXText />
               </div>
-            </div>
+            </Stack>
           </SlideDown>
         </Fragment>
       )}
     </div>
   )
 })
 
-const getStyles = (tokens) => {
-  return {
-    svg: {
-      margin: `${tokens.Spacing.Large}px auto 0`,
-      width: 240,
-    },
-    flexGroup: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    title: {
-      margin: `${tokens.Spacing.XLarge}px auto ${tokens.Spacing.Medium}px auto`,
-      textAlign: 'center',
-    },
-    dataList: {
-      listStylePosition: 'outside',
-      marginTop: tokens.Spacing.XSmall,
-      marginBottom: tokens.Spacing.Small,
-      marginLeft: tokens.Spacing.XSmall,
-    },
-    listItem: {
-      color: tokens.TextColor.Default,
-      marginLeft: tokens.Spacing.Medium,
-      '& span': {
-        marginLeft: tokens.Spacing.XTiny,
-      },
-    },
-    lockGroup: {
-      display: 'flex',
-    },
-    lockIcon: {
-      display: 'block',
-      marginRight: tokens.Spacing.XSmall,
-      marginTop: tokens.Spacing.Tiny,
-      marginLeft: tokens.Spacing.Tiny,
-    },
-    disclaimer: {
-      textAlign: 'center',
-      marginTop: tokens.Spacing.XLarge,
-      marginBottom: tokens.Spacing.Medium,
-      lineHeight: tokens.LineHeight.Small,
-      color: tokens.TextColor.Secondary,
-    },
-    link: {
-      fontSize: tokens.FontSize.XSmall,
-      display: 'inline',
-    },
-    poweredBy: {
-      marginTop: tokens.Spacing.Medium,
-    },
-  }
-}
-
 Disclosure.displayName = 'Disclosure'
 
 export default Disclosure

src/views/disclosure/Disclosure.module.css

@@ -0,0 +1,46 @@
+.title:global(.MuiTypography-root) {
+  margin: var(--spacing-4) auto var(--spacing-2);
+  text-align: center;
+}
+
+.dataList {
+  list-style-position: outside;
+  margin-bottom: var(--spacing-1-point-5);
+  margin-left: var(--spacing-1);
+  margin-top: var(--spacing-1);
+}
+
+.listItem {
+  color: var(--mui-palette-text-primary);
+  margin-left: var(--spacing-2);
+}
+
+.listItem span {
+  margin-left: var(--spacing-point-25);
+}
+
+.lockGroup {
+  display: flex;
+}
+
+.lockGroup :global(.MuiSvgIcon-root) {
+  margin-left: var(--spacing-point-5);
+  margin-right: var(--spacing-1);
+  margin-top: var(--spacing-point-5);
+}
+
+.disclaimer:global(.MuiTypography-root) {
+  color: var(--mui-palette-text-secondary);
+  line-height: 16px;
+  margin-bottom: var(--spacing-2);
+  margin-top: var(--spacing-4);
+  text-align: center;
+}
+
+.link:global(.MuiLink-root) {
+  display: inline;
+}
+
+.poweredBy {
+  margin-top: var(--spacing-2);
+}

src/views/disclosure/Interstitial.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types'
 import { useTokens } from '@kyper/tokenprovider'
 import { Icon, Text } from '@mxenabled/mxui'
 import { Link as LinkIcon } from '@kyper/icon/Link'
-import { Lock } from '@kyper/icon/Lock'
 import { InfoOutline } from '@kyper/icon/InfoOutline'
 import { Link, Stack } from '@mui/material'
 
@@ -133,7 +132,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
 
             <Stack spacing={0.5}>
               <Stack direction="row">
-                <Lock className={styles.icon} color={tokens.TextColor.Default} size={20} />
+                <Icon className={styles.icon} name="lock" size={20} />
                 <Text
                   bold={true}
                   className={styles.subTitle}

typings/kyper.d.ts

@@ -16,7 +16,6 @@ declare module '@kyper/icon/Image'
 declare module '@kyper/icon/Health'
 declare module '@kyper/icon/Grid'
 declare module '@kyper/progressindicators'
-declare module '@kyper/icon/Lock'
 declare module '@kyper/utilityrow'
 declare module '@kyper/hooks'
 declare module '@kyper/icon/CheckmarkFilled'