From dfe6168390bdc9770dd61bd49c0fab6ce102d47c Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Tue, 28 Jul 2026 16:55:25 -0600 Subject: [PATCH 1/9] removed TooSmallDialog component --- src/ConnectWidget.tsx | 3 - src/components/LeavingNoticeFlat.js | 3 +- src/components/app/TooSmallDialog.tsx | 175 ------------------ .../app/__tests__/TooSmallDialog-test.tsx | 56 ------ 4 files changed, 2 insertions(+), 235 deletions(-) delete mode 100644 src/components/app/TooSmallDialog.tsx delete mode 100644 src/components/app/__tests__/TooSmallDialog-test.tsx diff --git a/src/ConnectWidget.tsx b/src/ConnectWidget.tsx index 13a6b193cd..b1b37dace1 100644 --- a/src/ConnectWidget.tsx +++ b/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 = ({ - {showTooSmallDialog && } diff --git a/src/components/LeavingNoticeFlat.js b/src/components/LeavingNoticeFlat.js index 409091ca20..c971e9737b 100644 --- a/src/components/LeavingNoticeFlat.js +++ b/src/components/LeavingNoticeFlat.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import { __ } from 'src/utilities/Intl' -import { Text } from '@mxenabled/mxui' +import { Text, Icon } from '@mxenabled/mxui' import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { Button } from '@mui/material' import { useTokens } from '@kyper/tokenprovider' @@ -37,6 +37,7 @@ export const LeavingNoticeFlat = ({ onContinue, onCancel, portalTo = 'connect-wr {__('You are leaving')} + void -} - -export const TooSmallDialog = (props: TooSmallDialogProps) => { - const [state, dispatch] = useReducer(reducer, { - showDialog: false, - tooSmallDialogDismissedThisSession: false, - isDismissing: false, - }) - const reduxDispatch = useDispatch() - const trueWidth = useSelector(getTrueWidth) - const userProfile = useSelector((state: any) => state.profiles.userProfile) - const widgetProfile = useSelector((state: any) => state.profiles.widgetProfile) - const [pageviewSent, setPagviewSent] = useState(false) - const tokens = useTokens() - const styles = getStyles(tokens) - const { api } = useApi() - - useEffect(() => { - const shouldShowtooSmallConsiderSnooze = shouldShowTooSmallDialogFromSnooze( - userProfile?.too_small_modal_dismissed_at || null, - widgetProfile?.too_small_modal_threshold_days, - ) - const isProdEnvironment = (getEnvironment() as unknown) === Environments.PRODUCTION - const shouldShowTooSmallDialog = - shouldShowtooSmallConsiderSnooze && trueWidth < APP_MIN_WIDTH && !isProdEnvironment - - if (shouldShowTooSmallDialog) { - // user decreased size - if (!pageviewSent) { - props.onAnalyticPageview('/connect' + PageviewInfo.CONNECT_UNSUPPORTED_RESOLUTION[1], {}) - setPagviewSent(true) - } - dispatch({ type: 'showDialog' }) - } else { - // user increased size - dispatch({ type: 'hideDialog' }) - } - }, [trueWidth]) - - // eslint-disable-next-line consistent-return - useEffect(() => { - if (state.isDismissing) { - const dismissModal$ = defer(() => - api.updateUserProfile({ - ...userProfile, - too_small_modal_dismissed_at: getUnixTime(new Date()), - }), - ).subscribe( - (data) => { - reduxDispatch(updateUserProfile(data)) - dispatch({ type: 'dismissDialogSuccess' }) - }, - () => { - // If error, we still dismiss the modal for this session. - //User will see modal next session and can try again to dismiss. - dispatch({ type: 'dismissDialogSuccess' }) - }, - ) - - return () => dismissModal$.unsubscribe() - } - }, [state.isDismissing]) - - return state.showDialog ? ( -
- - - {__('Unsupported Resolution')} - - - {__( - 'Your screen zoom setting may not be compatible with the current screen size. The minimum supported width is 320 pixels. Please reduce your screen zoom setting to view all the content.', - )} - - -
- ) : null -} - -const getStyles = (tokens: any) => { - return { - container: { - background: tokens.BackgroundColor.Modal, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: `0 ${tokens.Spacing.ContainerSidePadding}px`, - position: 'fixed', - top: 0, - left: 0, - right: 0, - bottom: 0, - textAlign: 'center', - maxWidth: '352px', // Our max content width (does not include side margin) - minWidth: '270px', // Our min content width (does not include side margin) - zIndex: tokens.ZIndex.MessageBox, - } as React.CSSProperties, - title: { - marginBottom: tokens.Spacing.Tiny, - }, - dismissButton: { - marginTop: tokens.Spacing.XLarge, - marginBottom: tokens.Spacing.Medium, - }, - icon: { - marginBottom: tokens.Spacing.Large, - marginTop: tokens.Spacing.Jumbo, - paddingTop: tokens.Spacing.Tiny, - }, - } -} - -const reducer = (state: any, action: Action) => { - switch (action.type) { - case 'showDialog': - return { - ...state, - showDialog: true, - } - - case 'hideDialog': - return { - ...state, - showDialog: false, - } - - case 'dismissDialog': - return { - ...state, - isDismissing: true, - } - - case 'dismissDialogSuccess': - return { - ...state, - isDismissing: false, - showDialog: false, - tooSmallModalDismissedThisSession: true, - } - - default: - return state - } -} diff --git a/src/components/app/__tests__/TooSmallDialog-test.tsx b/src/components/app/__tests__/TooSmallDialog-test.tsx deleted file mode 100644 index 471550f694..0000000000 --- a/src/components/app/__tests__/TooSmallDialog-test.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import React from 'react' - -import { render, screen } from 'src/utilities/testingLibrary' -import { waitFor } from '@testing-library/react' - -import * as globalUtilities from 'src/utilities/global' -import * as browserUtils from 'src/utilities/Browser' -import { TooSmallDialog } from 'src/components/app/TooSmallDialog' - -describe('TooSmallDialog', () => { - it('should not show the dialog if trueWidth is greater than 320px', async () => { - vi.spyOn(browserUtils, 'getTrueWindowWidth').mockReturnValueOnce(322) - const onAnalyticPageview = vi.fn() - render() - expect(screen.queryByText('Unsupported Resolution')).not.toBeInTheDocument() - expect(onAnalyticPageview).not.toHaveBeenCalled() - }) - describe('Less than 320px trueWidth', () => { - beforeEach(() => { - vi.spyOn(browserUtils, 'getTrueWindowWidth').mockReturnValueOnce(300) - }) - it('should show the dialog if the environemt is other than production', async () => { - vi.spyOn(globalUtilities, 'getEnvironment').mockReturnValueOnce( - globalUtilities.Environments.INTEGRATION, - ) - render( {}} />) - expect(screen.queryByText('Unsupported Resolution')).toBeInTheDocument() - }) - it('should not show the dialog if the environemt is production', async () => { - vi.spyOn(globalUtilities, 'getEnvironment').mockReturnValue( - globalUtilities.Environments.PRODUCTION, - ) - render( {}} />) - expect(screen.queryByText('Unsupported Resolution')).not.toBeInTheDocument() - }) - it('should dismiss the dialog if the dismiss button is clicked', async () => { - vi.spyOn(globalUtilities, 'getEnvironment').mockReturnValue( - globalUtilities.Environments.INTEGRATION, - ) - const { user } = render( {}} />) - await user.click(screen.getByText('Dismiss')) - await waitFor(() => { - expect(screen.queryByText('Unsupported Resolution')).not.toBeInTheDocument() - }) - }) - it('should call onAnalyticPageview if the environemt is other than production', async () => { - vi.spyOn(globalUtilities, 'getEnvironment').mockReturnValueOnce( - globalUtilities.Environments.INTEGRATION, - ) - const onAnalyticPageview = vi.fn() - render() - await waitFor(() => expect(onAnalyticPageview).toHaveBeenCalled()) - }) - }) -}) From c01512a1f4a803127b72343863df39d210a8508b Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Tue, 28 Jul 2026 23:06:39 -0600 Subject: [PATCH 2/9] updated AttentionFilled to Icon --- src/components/ConfigError.tsx | 13 +++++++------ src/components/ConnectSuccessSurvey.tsx | 13 +++++++------ src/components/DeleteMemberSurvey.js | 5 ++--- src/components/GenericError.js | 16 ++++++---------- src/components/LeavingNoticeFlat.js | 2 -- src/components/ViewTitle.js | 10 +++++++--- src/views/mfa/MFAImages.js | 5 ++--- src/views/mfa/MFAOptions.js | 5 ++--- src/views/search/views/SearchFailed.js | 4 ++-- 9 files changed, 35 insertions(+), 38 deletions(-) diff --git a/src/components/ConfigError.tsx b/src/components/ConfigError.tsx index ad1b52c958..5b4d4cbbb7 100644 --- a/src/components/ConfigError.tsx +++ b/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 = ({ error }) => { return (
- + {error.title} @@ -45,7 +49,4 @@ const getStyles = (tokens: any) => ({ errorTitle: { marginBottom: tokens.Spacing.Tiny, }, - errorIcon: { - marginBottom: tokens.Spacing.Large, - }, }) diff --git a/src/components/ConnectSuccessSurvey.tsx b/src/components/ConnectSuccessSurvey.tsx index 54e1b92b2f..d780d9b597 100644 --- a/src/components/ConnectSuccessSurvey.tsx +++ b/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 && (
- + {__('Please select an option before continuing.')} @@ -255,9 +259,6 @@ const getStyles = (tokens: any) => ({ alignItems: 'center', width: '100%', }, - errorIcon: { - marginRight: tokens.Spacing.Tiny, - }, textQuestion: { display: 'flex', flexDirection: 'column', diff --git a/src/components/DeleteMemberSurvey.js b/src/components/DeleteMemberSurvey.js index 6b76b5587f..3229202e11 100644 --- a/src/components/DeleteMemberSurvey.js +++ b/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 && (
- +

{__('Choose a reason for deleting')}

)} diff --git a/src/components/GenericError.js b/src/components/GenericError.js index 8be005b22a..a25044e3c3 100644 --- a/src/components/GenericError.js +++ b/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 (
- {title} @@ -57,9 +56,6 @@ function getStyles(tokens) { padding: tokens.Spacing.XSMALL, textAlign: 'center', }, - icon: { - marginBottom: tokens.Spacing.XLarge, - }, } } diff --git a/src/components/LeavingNoticeFlat.js b/src/components/LeavingNoticeFlat.js index c971e9737b..1489a21a7d 100644 --- a/src/components/LeavingNoticeFlat.js +++ b/src/components/LeavingNoticeFlat.js @@ -5,7 +5,6 @@ import PropTypes from 'prop-types' import { __ } from 'src/utilities/Intl' import { Text, Icon } from '@mxenabled/mxui' -import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { Button } from '@mui/material' import { useTokens } from '@kyper/tokenprovider' @@ -36,7 +35,6 @@ export const LeavingNoticeFlat = ({ onContinue, onCancel, portalTo = 'connect-wr > {__('You are leaving')} -
{ )} {connectionStatus === ReadableStatuses.REJECTED && ( - + )}
) diff --git a/src/views/mfa/MFAImages.js b/src/views/mfa/MFAImages.js index 64534aab3d..ca586eb44a 100644 --- a/src/views/mfa/MFAImages.js +++ b/src/views/mfa/MFAImages.js @@ -12,9 +12,8 @@ import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent' import { PageviewInfo, AnalyticEvents } from 'src/const/Analytics' import { CheckmarkFilled } from '@kyper/icon/CheckmarkFilled' -import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@mxenabled/mxui' +import { Icon, Text } from '@mxenabled/mxui' import { Button } from '@mui/material' export const MFAImages = (props) => { @@ -106,7 +105,7 @@ export const MFAImages = (props) => {
{isSubmitted && _isEmpty(selectedOption) && (
- +

{__('Choose an image')}

)} diff --git a/src/views/mfa/MFAOptions.js b/src/views/mfa/MFAOptions.js index 8594d36e5a..3b3d24378b 100644 --- a/src/views/mfa/MFAOptions.js +++ b/src/views/mfa/MFAOptions.js @@ -4,8 +4,7 @@ import PropTypes from 'prop-types' import { sha256 } from 'js-sha256' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@mxenabled/mxui' -import { AttentionFilled } from '@kyper/icon/AttentionFilled' +import { Icon, Text } from '@mxenabled/mxui' import { SelectionBox } from 'src/privacy/input' import { Button, FormLabel } from '@mui/material' @@ -120,7 +119,7 @@ export const MFAOptions = (props) => { {isSubmitted && _isEmpty(selectedOption) && (
- +

{isSAS ? __('Account selection is required.') : __('Choose an option')}

diff --git a/src/views/search/views/SearchFailed.js b/src/views/search/views/SearchFailed.js index a161fc25a5..3faf7c0aae 100644 --- a/src/views/search/views/SearchFailed.js +++ b/src/views/search/views/SearchFailed.js @@ -1,7 +1,7 @@ import React from 'react' +import { Icon } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' -import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { __ } from 'src/utilities/Intl' import useAnalyticsPath from 'src/hooks/useAnalyticsPath' @@ -15,7 +15,7 @@ export const SearchFailed = () => { return (
- +
{__('Search isn’t working')}
From 7aacc87af2fc1fd7e24d214df5e3e9102329ecaa Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Tue, 28 Jul 2026 23:08:59 -0600 Subject: [PATCH 3/9] removed the typing --- typings/kyper.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/typings/kyper.d.ts b/typings/kyper.d.ts index 7c42923d70..e9b6e8122a 100644 --- a/typings/kyper.d.ts +++ b/typings/kyper.d.ts @@ -16,7 +16,6 @@ declare module '@kyper/icon/Notarized' declare module '@kyper/icon/Image' declare module '@kyper/icon/Health' declare module '@kyper/icon/Grid' -declare module '@kyper/icon/AttentionFilled' declare module '@kyper/progressindicators' declare module '@kyper/icon/ChevronLeft' declare module '@kyper/icon/Lock' From 5ecbd0fa809fa875c3fe34c83eeffb8389ad15b6 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 29 Jul 2026 13:00:50 -0600 Subject: [PATCH 4/9] feat: migrate kyper AttentionFilled Icon to MXUI --- README.md | 5 ++-- src/utilities/Browser.js | 17 -------------- src/utilities/__tests__/Browser-test.js | 23 +------------------ .../credentials/CreateMemberForm-test.tsx | 1 - .../credentials/UpdateMemberForm-test.tsx | 1 - typings/connectProps.d.ts | 1 - 6 files changed, 3 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index a9303824d5..b84a7fca63 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ const App = () => { ## Props | **Prop** | **Type** | **Description** | **Default** | -| :----------------------------- | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | +| :----------------------------- | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | --- | ------ | | `clientConfig` | [`ClientConfigType`](./typings/connectProps.d.ts) | The connect widget uses the config to set the initial state and behavior of the widget. [More details](./docs/CLIENT_CONFIG.md) | See more details | | `language` | [`LanguageType`](./typings/connectProps.d.ts) | The connect widget supports multiple languages and custom copy. Supported locale options: `en`, `es`, and `fr-ca`. | `{ locale: 'en', custom_copy_namespace: '' }` | | `onAnalyticEvent` | [`AnalyticContextType`](./typings/connectProps.d.ts) | The connect widget provides a way to track events and pageviews using your own analytics provider. [More details](./docs/ANALYTICS.md#onanalyticevent) | `null` | @@ -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 | | `true` | | `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` | diff --git a/src/utilities/Browser.js b/src/utilities/Browser.js index 71b0324a85..181be36455 100644 --- a/src/utilities/Browser.js +++ b/src/utilities/Browser.js @@ -1,8 +1,5 @@ import Bowser from 'bowser' import { light as tokens } from '@mxenabled/design-tokens' -import differenceInDays from 'date-fns/differenceInDays' -import fromUnixTime from 'date-fns/fromUnixTime' -import startOfDay from 'date-fns/startOfDay' import { Style } from 'src/const/Style' @@ -119,17 +116,3 @@ const getScrollBarWidth = () => { // Removes the px from the breakpoint (Ex. 576px -> 576) export const breakpointNumberOnly = (breakpoint) => breakpoint.split('').splice(0, 3).join('') - -export const shouldShowTooSmallDialogFromSnooze = (dismissedAt, thresholdDays, now = null) => { - if (!dismissedAt || !thresholdDays) { - return true - } - - const currentDate = now || new Date(Date.now()) - const dismissalDate = - typeof dismissedAt === 'string' ? new Date(dismissedAt) : fromUnixTime(dismissedAt) - - const daysSinceDismissal = differenceInDays(currentDate, startOfDay(dismissalDate)) - - return daysSinceDismissal > thresholdDays -} diff --git a/src/utilities/__tests__/Browser-test.js b/src/utilities/__tests__/Browser-test.js index 765a66ce7a..cff27b30c1 100644 --- a/src/utilities/__tests__/Browser-test.js +++ b/src/utilities/__tests__/Browser-test.js @@ -1,5 +1,5 @@ import { light as tokens } from '@mxenabled/design-tokens' -import { getWindowSize, shouldShowTooSmallDialogFromSnooze } from 'src/utilities/Browser' +import { getWindowSize } from 'src/utilities/Browser' describe('Browser', () => { it('returns "small" when window width is less than Med breakpoint', () => { @@ -25,25 +25,4 @@ describe('Browser', () => { expect(windowSize).toEqual('large') }) - - describe('shouldShowTooSmallModalFromSnooze', () => { - const nowDate = new Date(1680195964443) - const yesterdayDate = new Date(1680109564000) - const thirtyDaysAgoDate = new Date(1677607564000) - const threeDaysAgo = new Date(1679936764000) - - it('defaults true when no "dismissed at" or "threshold days" given', () => { - expect(shouldShowTooSmallDialogFromSnooze(null, 10)).toBe(true) - expect(shouldShowTooSmallDialogFromSnooze(threeDaysAgo, null)).toBe(true) - expect(shouldShowTooSmallDialogFromSnooze(threeDaysAgo, 0)).toBe(true) - }) - - it('should show modal if days since dismissal exceeds client set threshold', () => { - expect(shouldShowTooSmallDialogFromSnooze(thirtyDaysAgoDate, 15, nowDate)).toBe(false) - }) - - it('should not show modal if days since dismissal is below client set threshold', () => { - expect(shouldShowTooSmallDialogFromSnooze(yesterdayDate, 15, nowDate)).toBe(false) - }) - }) }) diff --git a/src/views/credentials/CreateMemberForm-test.tsx b/src/views/credentials/CreateMemberForm-test.tsx index c3cb85247a..074980464b 100644 --- a/src/views/credentials/CreateMemberForm-test.tsx +++ b/src/views/credentials/CreateMemberForm-test.tsx @@ -159,7 +159,6 @@ describe('', () => { ...masterData, clientProfile: { ...masterData.clientProfile, uses_oauth: false }, }} - showTooSmallDialog={false} userFeatures={{}} />, { apiValue: baseApiValue, store: createTestReduxStore() }, diff --git a/src/views/credentials/UpdateMemberForm-test.tsx b/src/views/credentials/UpdateMemberForm-test.tsx index 959e63bd79..fd399e328a 100644 --- a/src/views/credentials/UpdateMemberForm-test.tsx +++ b/src/views/credentials/UpdateMemberForm-test.tsx @@ -157,7 +157,6 @@ describe('', () => { ...masterData, clientProfile: { ...masterData.clientProfile, uses_oauth: false }, }} - showTooSmallDialog={false} userFeatures={{}} />, { apiValue: baseApiValue, store: createTestReduxStore() }, diff --git a/typings/connectProps.d.ts b/typings/connectProps.d.ts index 7d1f1f7387..b90a5ff70c 100644 --- a/typings/connectProps.d.ts +++ b/typings/connectProps.d.ts @@ -3,7 +3,6 @@ interface ConnectWidgetPropTypes extends ConnectProps { language?: LanguageType onPostMessage: (event: string, data?: object) => void - showTooSmallDialog: boolean webSocketConnection?: any } From db6f4d419b7f827d318a9a1724cd28a316bb83c7 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 29 Jul 2026 13:14:46 -0600 Subject: [PATCH 5/9] Fix formatting issues in README props table --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b84a7fca63..5fc3e16ed4 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ const App = () => { ## Props | **Prop** | **Type** | **Description** | **Default** | -| :----------------------------- | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | --- | ------ | +| :----------------------------- | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | | `clientConfig` | [`ClientConfigType`](./typings/connectProps.d.ts) | The connect widget uses the config to set the initial state and behavior of the widget. [More details](./docs/CLIENT_CONFIG.md) | See more details | | `language` | [`LanguageType`](./typings/connectProps.d.ts) | The connect widget supports multiple languages and custom copy. Supported locale options: `en`, `es`, and `fr-ca`. | `{ locale: 'en', custom_copy_namespace: '' }` | | `onAnalyticEvent` | [`AnalyticContextType`](./typings/connectProps.d.ts) | The connect widget provides a way to track events and pageviews using your own analytics provider. [More details](./docs/ANALYTICS.md#onanalyticevent) | `null` | @@ -46,7 +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 | | `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` | From 47458e5883157fd6f818d1e11ce9a363a1e2423c Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 29 Jul 2026 13:16:22 -0600 Subject: [PATCH 6/9] Fix markdown formatting in Props table --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5fc3e16ed4..132aa1ff78 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ const App = () => { ## Props | **Prop** | **Type** | **Description** | **Default** | -| :----------------------------- | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | +| :----------------------------- | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | | `clientConfig` | [`ClientConfigType`](./typings/connectProps.d.ts) | The connect widget uses the config to set the initial state and behavior of the widget. [More details](./docs/CLIENT_CONFIG.md) | See more details | | `language` | [`LanguageType`](./typings/connectProps.d.ts) | The connect widget supports multiple languages and custom copy. Supported locale options: `en`, `es`, and `fr-ca`. | `{ locale: 'en', custom_copy_namespace: '' }` | | `onAnalyticEvent` | [`AnalyticContextType`](./typings/connectProps.d.ts) | The connect widget provides a way to track events and pageviews using your own analytics provider. [More details](./docs/ANALYTICS.md#onanalyticevent) | `null` | From 9c878d3f187fc7d0dee3c15e6cec973666f9502d Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Mon, 3 Aug 2026 00:13:35 -0600 Subject: [PATCH 7/9] addressed comments --- src/ConnectWidget.tsx | 1 + src/ConnectedTokenProvider.tsx | 4 + src/components/ConfigError.module.css | 11 ++ src/components/ConfigError.tsx | 30 +---- src/components/ConnectSuccessSurvey.tsx | 127 ++++-------------- .../ConnectedSuccessSurvey.module.css | 53 ++++++++ src/components/DeleteMemberSurvey.js | 4 +- src/components/GenericError.js | 39 ++---- src/components/InstructionalText.js | 2 +- src/components/ViewTitle.js | 7 +- src/styles/spacing.css | 10 ++ src/views/credentials/Credentials.js | 2 +- src/views/mfa/MFAImages.js | 2 +- src/views/mfa/MFAOptions.js | 2 +- src/views/microdeposits/AccountInfo.js | 2 +- .../experiments/PredirectInstructions.tsx | 2 +- src/views/search/views/SearchFailed.js | 2 +- .../verification/VerifyExistingMember.tsx | 6 +- 18 files changed, 131 insertions(+), 175 deletions(-) create mode 100644 src/components/ConfigError.module.css create mode 100644 src/components/ConnectedSuccessSurvey.module.css create mode 100644 src/styles/spacing.css diff --git a/src/ConnectWidget.tsx b/src/ConnectWidget.tsx index b1b37dace1..c8149b3b5e 100644 --- a/src/ConnectWidget.tsx +++ b/src/ConnectWidget.tsx @@ -10,6 +10,7 @@ import { ConnectedTokenProvider } from 'src/ConnectedTokenProvider' import { setLocalizedContent } from 'src/redux/reducers/localizedContentSlice' import { WebSocketProvider } from 'src/context/WebSocketContext' import './sharedVariables.css' +import 'src/styles/spacing.css' interface PostMessageContextType { postMessageEventOverrides?: PostMessageEventOverrides diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 2edc9a9fea..10a4d13da2 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -99,6 +99,8 @@ 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, }, @@ -127,6 +129,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 { diff --git a/src/components/ConfigError.module.css b/src/components/ConfigError.module.css new file mode 100644 index 0000000000..9b8cb61a45 --- /dev/null +++ b/src/components/ConfigError.module.css @@ -0,0 +1,11 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 36px; + text-align: center; +} + +.errorTitle { + margin-bottom: var(--spacing-tiny); +} diff --git a/src/components/ConfigError.tsx b/src/components/ConfigError.tsx index 5b4d4cbbb7..9b77063a87 100644 --- a/src/components/ConfigError.tsx +++ b/src/components/ConfigError.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Icon, Text } from '@mxenabled/mxui' -import { useTokens } from '@kyper/tokenprovider' import { Container } from 'src/components/Container' +import styles from 'src/components/ConfigError.module.css' interface ConfigError { title: string @@ -14,18 +14,11 @@ interface ConfigErrorProps { } export const ConfigError: React.FC = ({ error }) => { - const tokens = useTokens() - const styles = getStyles(tokens) return ( -
- - +
+ + {error.title} @@ -35,18 +28,3 @@ export const ConfigError: React.FC = ({ error }) => { ) } - -// 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, - }, -}) diff --git a/src/components/ConnectSuccessSurvey.tsx b/src/components/ConnectSuccessSurvey.tsx index d780d9b597..2b1d2a994d 100644 --- a/src/components/ConnectSuccessSurvey.tsx +++ b/src/components/ConnectSuccessSurvey.tsx @@ -3,11 +3,11 @@ 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 { useTokens } from '@kyper/tokenprovider' import { __ } from 'src/utilities/Intl' import { ThankYouMessage } from 'src/components/ThankYouMessage' import { AnalyticContext } from 'src/Connect' +import styles from 'src/components/ConnectedSuccessSurvey.module.css' interface ConnectSuccessSurveyProps { handleBack: () => void @@ -60,9 +60,6 @@ export const ConnectSuccessSurvey = React.forwardRef< const [showErrorMessage, setShowErrorMessage] = useState(false) const { onSubmitConnectSuccessSurvey } = useContext(AnalyticContext) - const tokens = useTokens() - const styles = getStyles(tokens) - useImperativeHandle(connectSuccessSurveyRef, () => { return { handleConnectSuccessSurveyBackButton() { @@ -101,6 +98,7 @@ export const ConnectSuccessSurvey = React.forwardRef< } const currentQuestion = SURVEY_QUESTIONS[currentQuestionIndex] + const isLastQuestion = currentQuestionIndex === SURVEY_QUESTIONS.length - 1 return (
@@ -108,7 +106,7 @@ export const ConnectSuccessSurvey = React.forwardRef< ) : ( -
+
{currentQuestion.question()} @@ -116,24 +114,24 @@ export const ConnectSuccessSurvey = React.forwardRef< handleToggleButtonChange(currentQuestionIndex, newSelected) } - style={styles.toggleButtonGroup} value={answers[currentQuestionIndex]} > {Object.keys(SURVEY_RATING).map((key) => { return ( -
+
{__('Strongly disagree')} @@ -154,8 +152,8 @@ export const ConnectSuccessSurvey = React.forwardRef<
) : ( -
- +
+ {__('Please let us know how we can improve.')} )} {showErrorMessage && ( -
- - +
+ + {__('Please select an option before continuing.')}
)} - {currentQuestionIndex === SURVEY_QUESTIONS.length - 1 ? ( - - ) : ( - - )} + +
)} @@ -206,68 +189,4 @@ export const ConnectSuccessSurvey = React.forwardRef< ) }) -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const getStyles = (tokens: any) => ({ - checkMarkIcon: { - display: 'flex', - justifyContent: 'center', - marginBottom: tokens.Spacing.XLarge, - }, - toggleButtonGroup: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - borderRadius: '4px', - marginTop: tokens.Spacing.XLarge, - marginBottom: '10px', - }, - toggleButton: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - flex: '1 0 0', - height: '48px', - padding: '12px', - border: '1px solid #8994A2', - fontWeight: tokens.FontWeight.Semibold, - }, - surveyQuestion: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - } as React.CSSProperties, - thankYouContainer: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - }, - boundLabels: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - width: '100%', - marginBottom: '10px', - }, - button: { - marginTop: tokens.Spacing.XLarge, - }, - errorMessage: { - display: 'flex', - alignItems: 'center', - width: '100%', - }, - textQuestion: { - display: 'flex', - flexDirection: 'column', - width: '100%', - marginTop: tokens.Spacing.Large, - } as React.CSSProperties, - textQuestionTitle: { - marginBottom: tokens.Spacing.Medium, - }, -}) - ConnectSuccessSurvey.displayName = 'ConnectSuccessSurvey' diff --git a/src/components/ConnectedSuccessSurvey.module.css b/src/components/ConnectedSuccessSurvey.module.css new file mode 100644 index 0000000000..aad7476490 --- /dev/null +++ b/src/components/ConnectedSuccessSurvey.module.css @@ -0,0 +1,53 @@ +.surveyQuestion { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.toggleButtonGroup { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + border-radius: 4px; + margin-top: var(--spacing-xlarge); + margin-bottom: 10px; +} + +.toggleButton { + display: flex; + justify-content: center; + align-items: center; + flex: 1 0 0; + height: 48px; + padding: var(--spacing-small); + border: 1px solid var(--mui-palette-divider); + font-weight: 600; + color: var(--mui-palette-primary-main); +} + +.boundLabels { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin-bottom: 10px; +} + +.errorMessage { + display: flex; + align-items: center; + width: 100%; +} + +.textQuestion { + display: flex; + flex-direction: column; + width: 100%; + margin-top: var(--spacing-large); +} + +.textQuestionTitle { + margin-bottom: var(--spacing-medium); +} diff --git a/src/components/DeleteMemberSurvey.js b/src/components/DeleteMemberSurvey.js index 3229202e11..9bd3856b70 100644 --- a/src/components/DeleteMemberSurvey.js +++ b/src/components/DeleteMemberSurvey.js @@ -123,7 +123,7 @@ export const DeleteMemberSurvey = (props) => { ) : ( - + {__('Disconnect institution')} @@ -170,7 +170,7 @@ export const DeleteMemberSurvey = (props) => { {isSubmitted && !selectedReason && (
- +

{__('Choose a reason for deleting')}

)} diff --git a/src/components/GenericError.js b/src/components/GenericError.js index a25044e3c3..37af297294 100644 --- a/src/components/GenericError.js +++ b/src/components/GenericError.js @@ -1,15 +1,12 @@ import React, { useEffect } from 'react' import PropTypes from 'prop-types' -import { useTokens } from '@kyper/tokenprovider' +import { Stack } from '@mui/material' import { Icon, Text } from '@mxenabled/mxui' import { isRunningE2ETests } from 'src/utilities/e2e' import { PageviewInfo } from 'src/const/Analytics' export const GenericError = ({ loadError, onAnalyticPageview, subtitle, title }) => { - const tokens = useTokens() - const styles = getStyles(tokens) - useEffect(() => { if (!isRunningE2ETests()) onAnalyticPageview( @@ -25,13 +22,16 @@ export const GenericError = ({ loadError, onAnalyticPageview, subtitle, title }) }, []) return ( -
- + + {title} @@ -40,25 +40,10 @@ export const GenericError = ({ loadError, onAnalyticPageview, subtitle, title }) {subtitle} )} -
+ ) } -function getStyles(tokens) { - return { - container: { - backgroundColor: tokens.BackgroundColor.Container, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'column', - height: '100%', - padding: tokens.Spacing.XSMALL, - textAlign: 'center', - }, - } -} - GenericError.propTypes = { loadError: PropTypes.object, onAnalyticPageview: PropTypes.func.isRequired, diff --git a/src/components/InstructionalText.js b/src/components/InstructionalText.js index b22881af61..447430783a 100644 --- a/src/components/InstructionalText.js +++ b/src/components/InstructionalText.js @@ -53,7 +53,7 @@ export const InstructionalText = ({ component="p" dangerouslySetInnerHTML={{ __html: sanitizedInstructionalText }} data-test="instructional_text" - sx={{ marginBottom: tokens.Spacing.XSmall, ...style }} + sx={{ marginBottom: 1, ...style }} truncate={false} variant="Paragraph" /> diff --git a/src/components/ViewTitle.js b/src/components/ViewTitle.js index 62fdf76fea..00e182a6e0 100644 --- a/src/components/ViewTitle.js +++ b/src/components/ViewTitle.js @@ -20,12 +20,7 @@ export const ViewTitle = ({ connectionStatus, title }) => { )} {connectionStatus === ReadableStatuses.REJECTED && ( - + )}
) diff --git a/src/styles/spacing.css b/src/styles/spacing.css new file mode 100644 index 0000000000..d90b06543d --- /dev/null +++ b/src/styles/spacing.css @@ -0,0 +1,10 @@ +:root { + --spacing-xtiny: 2px; + --spacing-tiny: 4px; + --spacing-xsmall: 8px; + --spacing-small: 12px; + --spacing-medium: 16px; + --spacing-large: 24px; + --spacing-xlarge: 32px; + --spacing-xxlarge: 48px; +} diff --git a/src/views/credentials/Credentials.js b/src/views/credentials/Credentials.js index 9c0e665a00..014d17166f 100644 --- a/src/views/credentials/Credentials.js +++ b/src/views/credentials/Credentials.js @@ -517,7 +517,7 @@ export const Credentials = React.forwardRef( fullWidth={true} onClick={handleSubmit} sx={{ - marginBottom: tokens.Spacing.XSmall, + marginBottom: 1, }} type="submit" variant="contained" diff --git a/src/views/mfa/MFAImages.js b/src/views/mfa/MFAImages.js index ca586eb44a..7b97a027b7 100644 --- a/src/views/mfa/MFAImages.js +++ b/src/views/mfa/MFAImages.js @@ -105,7 +105,7 @@ export const MFAImages = (props) => {
{isSubmitted && _isEmpty(selectedOption) && (
- +

{__('Choose an image')}

)} diff --git a/src/views/mfa/MFAOptions.js b/src/views/mfa/MFAOptions.js index 3b3d24378b..52c20783d4 100644 --- a/src/views/mfa/MFAOptions.js +++ b/src/views/mfa/MFAOptions.js @@ -119,7 +119,7 @@ export const MFAOptions = (props) => { {isSubmitted && _isEmpty(selectedOption) && (
- +

{isSAS ? __('Account selection is required.') : __('Choose an option')}

diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js index cd6899376c..9ea601a1a8 100644 --- a/src/views/microdeposits/AccountInfo.js +++ b/src/views/microdeposits/AccountInfo.js @@ -102,7 +102,7 @@ export const AccountInfo = (props) => { sx={{ justifyContent: 'space-between', padding: '0 0 16px 0', - marginTop: tokens.Spacing.XSmall, + marginTop: 1, '& > .ph-no-capture': { width: '48%', }, diff --git a/src/views/oauth/experiments/PredirectInstructions.tsx b/src/views/oauth/experiments/PredirectInstructions.tsx index 2af88d7f85..9cc2ab4fdc 100644 --- a/src/views/oauth/experiments/PredirectInstructions.tsx +++ b/src/views/oauth/experiments/PredirectInstructions.tsx @@ -63,7 +63,7 @@ function PredirectInstructions( return ( <> - + {__('Log in at %1', props.institution.name)}
diff --git a/src/views/search/views/SearchFailed.js b/src/views/search/views/SearchFailed.js index 3faf7c0aae..b83acb3aea 100644 --- a/src/views/search/views/SearchFailed.js +++ b/src/views/search/views/SearchFailed.js @@ -15,7 +15,7 @@ export const SearchFailed = () => { return (
- +
{__('Search isn’t working')}
diff --git a/src/views/verification/VerifyExistingMember.tsx b/src/views/verification/VerifyExistingMember.tsx index dda45dddc3..8236659f48 100644 --- a/src/views/verification/VerifyExistingMember.tsx +++ b/src/views/verification/VerifyExistingMember.tsx @@ -125,7 +125,7 @@ const VerifyExistingMember: React.FC = (props) => { component="h2" data-test="verify-existing-member-header" id="connect-select-institution" - sx={{ marginBottom: tokens.Spacing.Small }} + sx={{ marginBottom: 1.5 }} tabIndex={-1} truncate={false} variant="H2" @@ -135,7 +135,7 @@ const VerifyExistingMember: React.FC = (props) => { @@ -147,7 +147,7 @@ const VerifyExistingMember: React.FC = (props) => { From e76757af2e1475d972f0000cd674f89595a17755 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Tue, 4 Aug 2026 16:32:14 -0600 Subject: [PATCH 8/9] fix more styles --- src/components/DeleteMemberSurvey.js | 7 +-- src/components/GenericError.js | 2 +- src/components/RequiredFieldNote.tsx | 4 +- .../ActionableError.module.css | 32 +++++++++++ src/views/actionableError/ActionableError.tsx | 53 +++++-------------- src/views/microdeposits/AccountInfo.js | 2 +- 6 files changed, 51 insertions(+), 49 deletions(-) create mode 100644 src/views/actionableError/ActionableError.module.css diff --git a/src/components/DeleteMemberSurvey.js b/src/components/DeleteMemberSurvey.js index 9bd3856b70..5fbdfc806b 100644 --- a/src/components/DeleteMemberSurvey.js +++ b/src/components/DeleteMemberSurvey.js @@ -178,7 +178,7 @@ export const DeleteMemberSurvey = (props) => { color="error" data-test="disconnect-button" onClick={handleOnDisconnect} - sx={styles.button} + sx={{ mt: 2.5, mb: 1 }} variant="contained" > {__('Disconnect')} @@ -226,11 +226,6 @@ const getStyles = (tokens) => ({ reasons: { marginTop: tokens.Spacing.Medium, }, - button: { - width: '100%', - marginBottom: tokens.Spacing.XSmall, - marginTop: '20px', - }, cancelButton: { width: '100%', }, diff --git a/src/components/GenericError.js b/src/components/GenericError.js index 37af297294..2f900c10d0 100644 --- a/src/components/GenericError.js +++ b/src/components/GenericError.js @@ -31,7 +31,7 @@ export const GenericError = ({ loadError, onAnalyticPageview, subtitle, title }) textAlign: 'center', }} > - + {title} diff --git a/src/components/RequiredFieldNote.tsx b/src/components/RequiredFieldNote.tsx index 7267f9a65a..5477b724c5 100644 --- a/src/components/RequiredFieldNote.tsx +++ b/src/components/RequiredFieldNote.tsx @@ -14,8 +14,8 @@ const RequiredFieldNote: React.FC = ({ styles }) => { return ( diff --git a/src/views/actionableError/ActionableError.module.css b/src/views/actionableError/ActionableError.module.css new file mode 100644 index 0000000000..bd4ecf978b --- /dev/null +++ b/src/views/actionableError/ActionableError.module.css @@ -0,0 +1,32 @@ +.logoWrapper { + display: flex; + justify-content: center; + margin-top: 20px; + margin-bottom: var(--spacing-xlarge); + width: 100%; +} + +.badge :global(.MuiBadge-badge) { + border-style: solid; + border-width: 2px; + border-radius: 100%; + font-size: 18px; + font-weight: bold; + height: 28px; + width: 28px; + margin: var(--spacing-tiny); +} + +.title:global(.MuiTypography-root) { + margin-bottom: var(--spacing-tiny); + text-align: center; +} + +.paragraph:global(.MuiTypography-root) { + margin-bottom: var(--spacing-xlarge); + text-align: center; +} + +.button { + margin-bottom: var(--spacing-xsmall); +} diff --git a/src/views/actionableError/ActionableError.tsx b/src/views/actionableError/ActionableError.tsx index 349286154b..229faebaf3 100644 --- a/src/views/actionableError/ActionableError.tsx +++ b/src/views/actionableError/ActionableError.tsx @@ -1,12 +1,12 @@ import React, { useContext, useEffect } from 'react' import { useSelector } from 'react-redux' import { InstitutionLogo, Text } from '@mxenabled/mxui' -import { useTokens } from '@kyper/tokenprovider' import { Button, Badge } from '@mui/material' import { SlideDown } from 'src/components/SlideDown' import { PostMessageContext } from 'src/ConnectWidget' import { useActionableErrorMap } from 'src/views/actionableError/useActionableErrorMap' +import styles from 'src/views/actionableError/ActionableError.module.css' import { ACTIONABLE_ERROR_CODES_READABLE } from 'src/views/actionableError/consts' import { PageviewInfo } from 'src/const/Analytics' @@ -26,8 +26,6 @@ export const ActionableError = () => { error_code: jobDetailCode, readable_error: ACTIONABLE_ERROR_CODES_READABLE[jobDetailCode], }) - const tokens = useTokens() - const styles = getStyles(tokens) const getNextDelay = getDelay() const errorDetails = useActionableErrorMap(jobDetailCode) @@ -44,8 +42,15 @@ export const ActionableError = () => { return ( <> -
- +
+ ({ + '& .MuiBadge-badge': { borderColor: theme.palette.common.white }, + })} + > { {errorDetails?.title} @@ -78,20 +83,20 @@ export const ActionableError = () => { {errorDetails?.secondaryActions && (