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,10 +7,11 @@ 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'
+import 'src/styles/spacing.css'
+import 'src/styles/styles.css'
 
 interface PostMessageContextType {
   postMessageEventOverrides?: PostMessageEventOverrides
@@ -23,7 +24,6 @@ export const ConnectWidgetWithoutReduxProvider = ({
   onPostMessage = () => {},
   onAnalyticPageview = () => {},
   postMessageEventOverrides,
-  showTooSmallDialog = true,
   webSocketConnection,
   ...props
 }: any) => {
@@ -40,7 +40,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/ConnectedTokenProvider.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { RootState } from 'src/redux/Store'
 import { useSelector } from 'react-redux'
 
-import { Theme, ThemeProvider } from '@mui/material'
+import { GlobalStyles, Theme, ThemeProvider } from '@mui/material'
 import { deepmerge } from '@mui/utils'
 import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui'
 import { TokenProvider, THEMES } from '@kyper/tokenprovider'
@@ -99,8 +99,15 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
       styleOverrides: {
         root: {
           '&.MuiFormControlLabel-labelPlacementStart': {
+            // TODO: Remove the custom margins once we are on MXUI v2.
+            marginBottom: '16px',
             marginLeft: 0,
             marginRight: 0,
+            // mxui's theme uses `spacing: 1`, so SelectionBox's internal `ml: 16` means 16px.
+            // Our 8px scale turns it into 128px, pushing the control out of the box.
+            '& .MuiRadio-root, & .MuiCheckbox-root': {
+              marginLeft: '16px',
+            },
           },
         },
       },
@@ -127,6 +134,8 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
       },
     },
   },
+  // TODO: Remove this custom spacing scale once we are on MXUI v2.
+  spacing: (factor: number) => `${factor * 8}px`,
 })
 
 interface Props {
@@ -174,7 +183,25 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
       theme={isDarkModeEnabled ? THEMES.DARK : colorScheme}
       tokenOverrides={kyperTokenOverrides}
     >
-      <ThemeProvider theme={combinedTheme}>{children}</ThemeProvider>
+      <ThemeProvider theme={combinedTheme}>
+        {/* This block can be deleted once we are on MXUI v2. */}
+        <GlobalStyles
+          styles={{
+            ':root': {
+              '--mui-palette-primary-main': combinedTheme.palette.primary.main,
+              '--mui-palette-primary-light': combinedTheme.palette.primary.light,
+              '--mui-palette-primary-dark': combinedTheme.palette.primary.dark,
+              '--mui-palette-primary-contrastText': combinedTheme.palette.primary.contrastText,
+              '--mui-palette-error-main': combinedTheme.palette.error.main,
+              '--mui-palette-text-primary': combinedTheme.palette.text.primary,
+              '--mui-palette-text-secondary': combinedTheme.palette.text.secondary,
+              '--mui-palette-background-default': combinedTheme.palette.background.default,
+              '--mui-palette-background-paper': combinedTheme.palette.background.paper,
+            },
+          }}
+        />
+        {children}
+      </ThemeProvider>
     </TokenProvider>
   )
 }

src/components/ConfigError.module.css

@@ -0,0 +1,4 @@
+.container:global(.MuiStack-root) {
+  margin-top: var(--spacing-4-point-5);
+  text-align: center;
+}

src/components/ConfigError.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Text } from '@mxenabled/mxui'
-import { useTokens } from '@kyper/tokenprovider'
+import { Stack } from '@mui/material'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Container } from 'src/components/Container'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
+import styles from 'src/components/ConfigError.module.css'
 
 interface ConfigError {
   title: string
@@ -15,37 +15,19 @@ interface ConfigErrorProps {
 }
 
 export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
   return (
     <Container>
-      <div style={styles.container}>
-        <AttentionFilled color="#4D4D4D" size={32} style={styles.errorIcon} />
-        <Text component={'h2'} style={styles.errorTitle} truncate={false} variant="H2">
-          {error.title}
-        </Text>
-        <Text component="p" truncate={false} variant="Paragraph">
-          {error.message}
-        </Text>
-      </div>
+      <Stack alignItems="center" className={styles.container} spacing={3}>
+        <Icon fill={true} name="error" size={32} />
+        <Stack spacing={0.5}>
+          <Text component="h2" truncate={false} variant="H2">
+            {error.title}
+          </Text>
+          <Text component="p" truncate={false} variant="Paragraph">
+            {error.message}
+          </Text>
+        </Stack>
+      </Stack>
     </Container>
   )
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getStyles = (tokens: any) => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyCcontent: 'center',
-    marginTop: '36px',
-    textAlign: 'center',
-  } as React.CSSProperties,
-  errorTitle: {
-    marginBottom: tokens.Spacing.Tiny,
-  },
-  errorIcon: {
-    marginBottom: tokens.Spacing.Large,
-  },
-})

src/components/ConnectSuccessSurvey.module.css

@@ -0,0 +1,40 @@
+.toggleButtonGroup:global(.MuiToggleButtonGroup-root) {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.boundLabels:global(.MuiStack-root) {
+  width: 100%;
+}
+
+.textQuestion:global(.MuiStack-root) {
+  width: 100%;
+}
+
+.errorMessage:global(.MuiStack-root) {
+  width: 100%;
+}
+
+.errorMessageText:global(.MuiTypography-root) {
+  font-size: 12px;
+}
+
+.toggleButton:global(.MuiToggleButton-root) {
+  align-items: center;
+  color: var(--mui-palette-primary-main);
+  display: flex;
+  flex: 1 0 0;
+  font-weight: 600;
+  height: 48px;
+  justify-content: center;
+  padding: var(--spacing-1-point-5);
+}
+
+.toggleButton:global(.MuiToggleButton-root.Mui-selected) {
+  background-color: var(--mui-palette-primary-main);
+  box-shadow: none;
+  color: var(--mui-palette-primary-contrastText);
+}