Migrate Kyper ChevronRight Icon to MXUI

src/ConnectWidget.tsx

@@ -7,7 +7,6 @@ import Connect from 'src/Connect'
 import { WidgetDimensionObserver } from 'src/components/app/WidgetDimensionObserver'
 import { initGettextLocaleData } from 'src/utilities/Personalization'
 import { ConnectedTokenProvider } from 'src/ConnectedTokenProvider'
-import { TooSmallDialog } from 'src/components/app/TooSmallDialog'
 import { setLocalizedContent } from 'src/redux/reducers/localizedContentSlice'
 import { WebSocketProvider } from 'src/context/WebSocketContext'
 import './sharedVariables.css'
@@ -23,7 +22,6 @@ export const ConnectWidgetWithoutReduxProvider = ({
   onPostMessage = () => {},
   onAnalyticPageview = () => {},
   postMessageEventOverrides,
-  showTooSmallDialog = true,
   webSocketConnection,
   ...props
 }: any) => {
@@ -40,7 +38,6 @@ export const ConnectWidgetWithoutReduxProvider = ({
       <WebSocketProvider value={webSocketConnection}>
         <PostMessageContext.Provider value={{ onPostMessage, postMessageEventOverrides }}>
           <WidgetDimensionObserver heightOffset={0}>
-            {showTooSmallDialog && <TooSmallDialog onAnalyticPageview={onAnalyticPageview} />}
             <Connect onAnalyticPageview={onAnalyticPageview} {...props} />
           </WidgetDimensionObserver>
         </PostMessageContext.Provider>

src/components/ConfigError.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { useTokens } from '@kyper/tokenprovider'
 import { Container } from 'src/components/Container'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
 
 interface ConfigError {
   title: string
@@ -20,7 +19,12 @@ export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
   return (
     <Container>
       <div style={styles.container}>
-        <AttentionFilled color="#4D4D4D" size={32} style={styles.errorIcon} />
+        <Icon
+          fill={true}
+          name="error"
+          size={32}
+          sx={{ color: '#4D4D4D', marginBottom: tokens.Spacing.Large }}
+        />
         <Text component={'h2'} style={styles.errorTitle} truncate={false} variant="H2">
           {error.title}
         </Text>
@@ -45,7 +49,4 @@ const getStyles = (tokens: any) => ({
   errorTitle: {
     marginBottom: tokens.Spacing.Tiny,
   },
-  errorIcon: {
-    marginBottom: tokens.Spacing.Large,
-  },
 })

src/components/ConnectSuccessSurvey.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useImperativeHandle, useContext } from 'react'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Button, TextField } from '@mui/material'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
 import { useTokens } from '@kyper/tokenprovider'
 
 import { __ } from 'src/utilities/Intl'
@@ -170,7 +169,12 @@ export const ConnectSuccessSurvey = React.forwardRef<
             )}
             {showErrorMessage && (
               <div style={styles.errorMessage}>
-                <AttentionFilled color="#E32727" size={16} style={styles.errorIcon} />
+                <Icon
+                  fill={true}
+                  name="error"
+                  size={16}
+                  sx={{ color: '#E32727', marginRight: tokens.Spacing.Tiny }}
+                />
                 <Text color="#E32727" sx={{ fontSize: '12px' }} variant="XSmall">
                   {__('Please select an option before continuing.')}
                 </Text>
@@ -255,9 +259,6 @@ const getStyles = (tokens: any) => ({
     alignItems: 'center',
     width: '100%',
   },
-  errorIcon: {
-    marginRight: tokens.Spacing.Tiny,
-  },
   textQuestion: {
     display: 'flex',
     flexDirection: 'column',

src/components/DeleteMemberSurvey.js

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { useTokens } from '@kyper/tokenprovider'
 import { MessageBox } from '@kyper/messagebox'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
 import { defer } from 'rxjs'
 import FocusTrap from 'focus-trap-react'
 import { Button, FormLabel, FormControl } from '@mui/material'
@@ -171,7 +170,7 @@ export const DeleteMemberSurvey = (props) => {
 
               {isSubmitted && !selectedReason && (
                 <section role="alert" style={styles.errorContent}>
-                  <AttentionFilled color={tokens.Color.Error300} />
+                  <Icon fill={true} name="error" size={16} sx={{ color: tokens.Color.Error300 }} />
                   <p style={styles.errorMessage}>{__('Choose a reason for deleting')}</p>
                 </section>
               )}

src/components/GenericError.js

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 
 import { isRunningE2ETests } from 'src/utilities/e2e'
 import { PageviewInfo } from 'src/const/Analytics'
@@ -27,11 +26,11 @@ export const GenericError = ({ loadError, onAnalyticPageview, subtitle, title })
 
   return (
     <div style={styles.container}>
-      <AttentionFilled
-        color={tokens.TextColor.Default}
-        height={48}
-        styles={styles.icon}
-        width={48}
+      <Icon
+        fill={true}
+        name="error"
+        size={48}
+        sx={{ color: tokens.TextColor.Default, marginBottom: tokens.Spacing.XLarge }}
       />
       <Text component="h1" truncate={false} variant="H2">
         {title}
@@ -57,9 +56,6 @@ function getStyles(tokens) {
       padding: tokens.Spacing.XSMALL,
       textAlign: 'center',
     },
-    icon: {
-      marginBottom: tokens.Spacing.XLarge,
-    },
   }
 }
 

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 {
@@ -36,7 +35,7 @@ export const InstitutionTile = (props) => {
       data-test={`${institution.name.replace(/\s+/g, '-')}-row`}
       endIcon={
         !institution.is_disabled_by_client && (
-          <ChevronRight color={tokens.TextColor.Default} height={16} width={16} />
+          <Icon name="chevron_right" size={16} sx={{ color: tokens.TextColor.Default }} />
         )
       }
       fullWidth={true}

src/components/LeavingNoticeFlat.js

@@ -4,8 +4,7 @@ import PropTypes from 'prop-types'
 
 import { __ } from 'src/utilities/Intl'
 
-import { Text } from '@mxenabled/mxui'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
+import { Text, Icon } from '@mxenabled/mxui'
 import { Button } from '@mui/material'
 import { useTokens } from '@kyper/tokenprovider'
 
@@ -36,7 +35,7 @@ export const LeavingNoticeFlat = ({ onContinue, onCancel, portalTo = 'connect-wr
             >
               {__('You are leaving')}
             </Text>
-            <AttentionFilled color={tokens.BackgroundColor.MessageBoxError} size={24} />
+            <Icon color="error" fill={true} name="error" size={24} />
           </div>
           <Text
             component="p"

src/components/ViewTitle.js

@@ -1,10 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { useTokens } from '@kyper/tokenprovider'
 import { InfoFilled } from '@kyper/icon/InfoFilled'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
 
 import { ReadableStatuses } from 'src/const/Statuses'
 
@@ -21,7 +20,12 @@ export const ViewTitle = ({ connectionStatus, title }) => {
         <InfoFilled color={tokens.BackgroundColor.MessageBoxHelp} size={24} />
       )}
       {connectionStatus === ReadableStatuses.REJECTED && (
-        <AttentionFilled color={tokens.BackgroundColor.MessageBoxError} size={24} />
+        <Icon
+          fill={true}
+          name="error"
+          size={24}
+          sx={{ color: tokens.BackgroundColor.MessageBoxError }}
+        />
       )}
     </div>
   )