Migrate Kyper ChevronRight Icon to MXUI

src/ConnectedTokenProvider.tsx

@@ -112,6 +112,17 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        // MUI sizes icon slot children off the button size (medium 20px, large 22px),
+        // which beats the Icon's own size prop. Our chevrons are always 24px.
+        endIcon: {
+          '& > *:nth-of-type(1)': {
+            fontSize: '24px',
+          },
+        },
+      },
+    },
     MuiChip: {
       styleOverrides: {
         label: {

src/components/InstitutionTile.js

@@ -6,8 +6,7 @@ import { __ } from 'src/utilities/Intl'
 import { useTokens } from '@kyper/tokenprovider'
 
 import { Button, Chip } from '@mui/material'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
-import { InstitutionLogo } from '@mxenabled/mxui'
+import { Icon, InstitutionLogo } from '@mxenabled/mxui'
 
 import { formatUrl } from 'src/utilities/FormatUrl'
 import {
@@ -34,11 +33,7 @@ export const InstitutionTile = (props) => {
       aria-label={__('Add account with %1', institution.name)}
       className={'institutionButton '}
       data-test={`${institution.name.replace(/\s+/g, '-')}-row`}
-      endIcon={
-        !institution.is_disabled_by_client && (
-          <ChevronRight color={tokens.TextColor.Default} height={16} width={16} />
-        )
-      }
+      endIcon={!institution.is_disabled_by_client && <Icon name="chevron_right" size={24} />}
       fullWidth={true}
       onClick={selectInstitution}
       startIcon={

src/components/support/SupportMenu.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
 import { UtilityRow } from '@kyper/utilityrow'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'
 
@@ -32,7 +31,7 @@ export const SupportMenu = React.forwardRef((props, menuRef) => {
         <UtilityRow
           borderType="inset-left"
           onClick={selectGeneralSupport}
-          rightChildren={<ChevronRight />}
+          rightChildren={<Icon name="chevron_right" size={24} />}
           subTitle={__('Get help connecting your account')}
           title={__('Request support')}
         />

src/styles/spacing.css

@@ -1,6 +1,7 @@
 :root {
   --spacing-point-25: calc(var(--mui-spacing) * 0.25);
   --spacing-point-5: calc(var(--mui-spacing) * 0.5);
+  --spacing-point-75: calc(var(--mui-spacing) * 0.75);
   --spacing-1: calc(var(--mui-spacing) * 1);
   --spacing-1-point-25: calc(var(--mui-spacing) * 1.25);
   --spacing-1-point-5: calc(var(--mui-spacing) * 1.5);

src/views/disclosure/DataRequested.js

@@ -2,10 +2,8 @@ import React, { Fragment } from 'react'
 import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
-import { Link } from '@mui/material'
+import { Icon, Text } from '@mxenabled/mxui'
+import { Link, Stack } from '@mui/material'
 
 import { selectConnectConfig } from 'src/redux/reducers/configSlice'
 
@@ -21,6 +19,7 @@ import { DataCluster } from 'src/components/DataCluster'
 import { getDelay } from 'src/utilities/getDelay'
 
 import { VIEWS } from 'src/views/disclosure/Interstitial'
+import styles from 'src/views/disclosure/DataRequested.module.css'
 
 export const DataRequested = (props) => {
   useAnalyticsPath(...PageviewInfo.CONNECT_DISCLOSURE_DATA_REQUESTED)
@@ -31,8 +30,6 @@ export const DataRequested = (props) => {
     aggIdentityDataCluster,
   } = getDataClusters()
   const connectConfig = useSelector(selectConnectConfig)
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
   const getNextDelay = getDelay()
   const appName = useSelector((state) => state.profiles.client.oauth_app_name || null)
 
@@ -64,12 +61,11 @@ export const DataRequested = (props) => {
   return (
     <Fragment>
       <SlideDown delay={getNextDelay()}>
-        <div style={styles.container}>
+        <Stack className={styles.container} spacing={0.5}>
           <Text
             bold={true}
             component="h2"
             data-test="data-requested-title"
-            style={styles.title}
             truncate={false}
             variant="H2"
           >
@@ -78,7 +74,6 @@ export const DataRequested = (props) => {
           <Text
             component="p"
             data-test="data-requested-subtitle"
-            style={styles.paragraph}
             truncate={false}
             variant="ParagraphSmall"
           >
@@ -87,41 +82,24 @@ export const DataRequested = (props) => {
               appName ? appName : __('Your app'),
             )}
           </Text>
-        </div>
+        </Stack>
         {dataClusterElement}
         <Link
+          className={styles.link}
           data-test="data-available-button"
           onClick={() => {
             props.setCurrentView(VIEWS.AVAILABLE_DATA)
           }}
-          style={styles.link}
+          variant="ParagraphSmall"
         >
           {__('Other available data')}
-          <ChevronRight style={styles.chevron} />
+          <Icon name="chevron_right" size={16} />
         </Link>
       </SlideDown>
     </Fragment>
   )
 }
 
-const getStyles = (tokens) => {
-  return {
-    title: {
-      marginBottom: tokens.Spacing.Tiny,
-    },
-    paragraph: {
-      marginBottom: tokens.Spacing.XSmall,
-    },
-    container: {
-      marginBottom: tokens.Spacing.Large,
-    },
-    link: {
-      fontWeight: tokens.FontWeight.Semibold,
-      fontSize: tokens.FontSize.Small,
-    },
-  }
-}
-
 DataRequested.propTypes = {
   setCurrentView: PropTypes.func.isRequired,
 }

src/views/disclosure/DataRequested.module.css

@@ -0,0 +1,7 @@
+.container:global(.MuiStack-root) {
+  margin-bottom: var(--spacing-4);
+}
+
+.link:global(.MuiLink-root) {
+  gap: var(--spacing-point-5);
+}