Migrate Kyper AttentionFilled Icon to MXUI

README.md

@@ -46,8 +46,7 @@ const App = () => {
 | `onShowConnectSuccessSurvey`   | [`AnalyticContextType`](./typings/connectProps.d.ts#L100)  | The connect widget provides a way to let your analytics provider know that the connect success survey was shown. [More details](./docs/ANALYTICS.md#onShowConnectSuccessSurvey)  |
 | `onSubmitConnectSuccessSurvey` | [`AnalyticContextType`](./typings/connectProps.d.ts#L101)  | The connect widget provides a way to submit connect success survey responses using your own analytics provider. [More details](./docs/ANALYTICS.md#onSubmitConnectSuccessSurvey) |                                               |
 | `profiles`                     | [`ProfilesTypes`](./typings/connectProps.d.ts)             | The connect widget uses the profiles to set the initial state of the widget. [More details](./docs/PROFILES.md)                                                                  | See more details                              |
-| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details                              |
-| `showTooSmallDialog`           | `boolean`                                                  | The connect widget can show a warning when the widget size is below the supported 320px.                                                                                         | `true`                                        |
+| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details 
 | `webSocketConnection`          | `object`                                                   | An object containing `isConnected()` function and `webSocketMessages$` observable for real-time updates.                                                                         | `null`                                        |
 | `experimentalFeatures`         | `object`                                                   | An object to enable or disable experimental features like `useWebSockets: true`.                                                                                                 | `null`                                        |
 

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/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>
   )