From 1a0dc6bc3265c1cbafff8baacde9e31f6b89202b Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Fri, 14 Aug 2026 11:14:36 -0600 Subject: [PATCH 1/3] converted lock icon --- src/components/PrivateAndSecure.module.css | 12 +++ src/components/PrivateAndSecure.tsx | 29 +----- src/views/disclosure/Disclosure.js | 104 +++++---------------- src/views/disclosure/Disclosure.module.css | 52 +++++++++++ src/views/disclosure/Interstitial.js | 5 +- typings/kyper.d.ts | 1 - 6 files changed, 92 insertions(+), 111 deletions(-) create mode 100644 src/components/PrivateAndSecure.module.css create mode 100644 src/views/disclosure/Disclosure.module.css diff --git a/src/components/PrivateAndSecure.module.css b/src/components/PrivateAndSecure.module.css new file mode 100644 index 0000000000..3b5ae3534c --- /dev/null +++ b/src/components/PrivateAndSecure.module.css @@ -0,0 +1,12 @@ +.secureSeal { + align-content: center; + color: var(--mui-palette-text-secondary); + display: flex; + font-size: 13px; + justify-content: center; + padding: var(--spacing-2) 0; +} + +.secureSeal :global(.MuiSvgIcon-root) { + margin-right: var(--spacing-point-5); +} diff --git a/src/components/PrivateAndSecure.tsx b/src/components/PrivateAndSecure.tsx index 9eb61fa536..ed86d68ac0 100644 --- a/src/components/PrivateAndSecure.tsx +++ b/src/components/PrivateAndSecure.tsx @@ -1,25 +1,18 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react' -import { useTokens } from '@kyper/tokenprovider' -import { Lock } from '@kyper/icon/Lock' +import { Icon } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' +import styles from 'src/components/PrivateAndSecure.module.css' interface PrivateAndSecureProps { style?: object } export const PrivateAndSecure: React.FC = ({ style }) => { - const tokens = useTokens() - const styles = getStyles(tokens) - return ( -
- +
+ { // --TR: This is a "MX" slogan bank level security meaning as safe as banks are able __('Private and secure') @@ -27,17 +20,3 @@ export const PrivateAndSecure: React.FC = ({ style }) =>
) } - -const getStyles = (tokens: any) => ({ - secureSeal: { - alignContent: 'center', - color: tokens.TextColor.InputLabel, - display: 'flex', - fontSize: tokens.FontSize.Small, - justifyContent: 'center', - padding: `${tokens.Spacing.Medium}px 0`, - }, - lock: { - marginRight: tokens.Spacing.Tiny, - }, -}) diff --git a/src/views/disclosure/Disclosure.js b/src/views/disclosure/Disclosure.js index ce68617efe..fc2d9dc0fb 100644 --- a/src/views/disclosure/Disclosure.js +++ b/src/views/disclosure/Disclosure.js @@ -1,16 +1,12 @@ import React, { useRef, useState, Fragment, useImperativeHandle } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { css } from '@mxenabled/cssinjs' -import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@mxenabled/mxui' -import { Lock } from '@kyper/icon/Lock' +import { Icon, Text } from '@mxenabled/mxui' import { Link } from '@mui/material' import { Button } from '@mui/material' import { ActionTypes } from 'src/redux/actions/Connect' import { selectConnectConfig, selectCurrentMode } from 'src/redux/reducers/configSlice' -import { getSize } from 'src/redux/selectors/Browser' import { PageviewInfo } from 'src/const/Analytics' import useAnalyticsPath from 'src/hooks/useAnalyticsPath' @@ -25,14 +21,11 @@ import { PrivacyPolicy } from 'src/views/disclosure/PrivacyPolicy' import PoweredByMXText from 'src/views/disclosure/PoweredByMXText' import { scrollToTop } from 'src/utilities/ScrollToTop' import { goToUrlLink } from 'src/utilities/global' +import styles from 'src/views/disclosure/Disclosure.module.css' export const Disclosure = React.forwardRef((_, disclosureRef) => { const containerRef = useRef(null) useAnalyticsPath(...PageviewInfo.CONNECT_DISCLOSURE) - const size = useSelector(getSize) - const isSmall = size === 'small' - const tokens = useTokens() - const styles = getStyles(tokens, isSmall) const getNextDelay = getDelay() const [showPrivacyPolicy, setShowPrivacyPolicy] = useState(false) // Redux @@ -74,8 +67,13 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { -
- +
+ {_p('connect/disclosure/title', 'Connect your account')} @@ -86,15 +84,15 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { )} -
    +
      {isInAggMode && ( -
    • +
    • {__('Account details')}
      • -
    • +
    • {__('Account balances and transactions')} @@ -104,12 +102,12 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { {isInTaxMode && ( -
    • +
    • {__('Basic account information')}
      • -
    • +
    • {__('Tax documents')} @@ -119,12 +117,12 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { {isInVerifyMode && ( -
    • +
    • {__('Routing and account numbers')}
      • -
    • +
    • {__('Account balances')} @@ -133,13 +131,8 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { )}
    -
    - +
    + {
    {_p('connect/disclosure/policy/text', 'By clicking Continue, you agree to the ')} { if (showExternalLinkPopup) { @@ -171,7 +165,6 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { goToUrlLink(privacyUrl, true) } }} - style={styles.link} > {_p('connect/disclosure/policy/link', 'MX Privacy Policy.')} @@ -179,7 +172,7 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => {
    -
    +
    -
    +
    @@ -205,59 +198,6 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { ) }) -const getStyles = (tokens) => { - return { - svg: { - margin: `${tokens.Spacing.Large}px auto 0`, - width: 240, - }, - flexGroup: { - display: 'flex', - flexDirection: 'column', - }, - title: { - margin: `${tokens.Spacing.XLarge}px auto ${tokens.Spacing.Medium}px auto`, - textAlign: 'center', - }, - dataList: { - listStylePosition: 'outside', - marginTop: tokens.Spacing.XSmall, - marginBottom: tokens.Spacing.Small, - marginLeft: tokens.Spacing.XSmall, - }, - listItem: { - color: tokens.TextColor.Default, - marginLeft: tokens.Spacing.Medium, - '& span': { - marginLeft: tokens.Spacing.XTiny, - }, - }, - lockGroup: { - display: 'flex', - }, - lockIcon: { - display: 'block', - marginRight: tokens.Spacing.XSmall, - marginTop: tokens.Spacing.Tiny, - marginLeft: tokens.Spacing.Tiny, - }, - disclaimer: { - textAlign: 'center', - marginTop: tokens.Spacing.XLarge, - marginBottom: tokens.Spacing.Medium, - lineHeight: tokens.LineHeight.Small, - color: tokens.TextColor.Secondary, - }, - link: { - fontSize: tokens.FontSize.XSmall, - display: 'inline', - }, - poweredBy: { - marginTop: tokens.Spacing.Medium, - }, - } -} - Disclosure.displayName = 'Disclosure' export default Disclosure diff --git a/src/views/disclosure/Disclosure.module.css b/src/views/disclosure/Disclosure.module.css new file mode 100644 index 0000000000..ee12b3f593 --- /dev/null +++ b/src/views/disclosure/Disclosure.module.css @@ -0,0 +1,52 @@ +.flexGroup { + display: flex; + flex-direction: column; +} + +.title:global(.MuiTypography-root) { + margin: var(--spacing-4) auto var(--spacing-2); + text-align: center; +} + +.dataList { + list-style-position: outside; + margin-bottom: var(--spacing-1-point-5); + margin-left: var(--spacing-1); + margin-top: var(--spacing-1); +} + +.listItem { + color: var(--mui-palette-text-primary); + margin-left: var(--spacing-2); +} + +.listItem span { + margin-left: var(--spacing-point-25); +} + +.lockGroup { + display: flex; +} + +.lockGroup :global(.MuiSvgIcon-root) { + margin-left: var(--spacing-point-5); + margin-right: var(--spacing-1); + margin-top: var(--spacing-point-5); +} + +.disclaimer:global(.MuiTypography-root) { + color: var(--mui-palette-text-secondary); + line-height: 16px; + margin-bottom: var(--spacing-2); + margin-top: var(--spacing-4); + text-align: center; +} + +.link:global(.MuiLink-root) { + display: inline; + font-size: 11px; +} + +.poweredBy { + margin-top: var(--spacing-2); +} diff --git a/src/views/disclosure/Interstitial.js b/src/views/disclosure/Interstitial.js index 10b16f2770..9aecab6947 100644 --- a/src/views/disclosure/Interstitial.js +++ b/src/views/disclosure/Interstitial.js @@ -3,9 +3,8 @@ import { useSelector } from 'react-redux' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@mxenabled/mxui' +import { Icon, Text } from '@mxenabled/mxui' import { Link as LinkIcon } from '@kyper/icon/Link' -import { Lock } from '@kyper/icon/Lock' import { InfoOutline } from '@kyper/icon/InfoOutline' import { ChevronRight } from '@kyper/icon/ChevronRight' import { Link, Stack } from '@mui/material' @@ -130,7 +129,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
    - + Date: Mon, 17 Aug 2026 18:09:57 -0600 Subject: [PATCH 2/3] add LinkIcon back --- README.md | 2 +- src/views/disclosure/Interstitial.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 132aa1ff78..4d1fe2a525 100644 --- a/README.md +++ b/README.md @@ -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 +| `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` | diff --git a/src/views/disclosure/Interstitial.js b/src/views/disclosure/Interstitial.js index 5aadb83e98..45d56d539d 100644 --- a/src/views/disclosure/Interstitial.js +++ b/src/views/disclosure/Interstitial.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' import { Icon, Text } from '@mxenabled/mxui' +import { Link as LinkIcon } from '@kyper/icon/Link' import { InfoOutline } from '@kyper/icon/InfoOutline' import { Link, Stack } from '@mui/material' @@ -100,7 +101,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe - + Date: Wed, 19 Aug 2026 14:22:57 -0600 Subject: [PATCH 3/3] using the right variant and Stack --- src/views/disclosure/Disclosure.js | 11 ++++++----- src/views/disclosure/Disclosure.module.css | 6 ------ 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/views/disclosure/Disclosure.js b/src/views/disclosure/Disclosure.js index fc2d9dc0fb..88d5c78a16 100644 --- a/src/views/disclosure/Disclosure.js +++ b/src/views/disclosure/Disclosure.js @@ -2,7 +2,7 @@ import React, { useRef, useState, Fragment, useImperativeHandle } from 'react' import { useDispatch, useSelector } from 'react-redux' import { Icon, Text } from '@mxenabled/mxui' -import { Link } from '@mui/material' +import { Link, Stack } from '@mui/material' import { Button } from '@mui/material' import { ActionTypes } from 'src/redux/actions/Connect' @@ -67,7 +67,7 @@ export const Disclosure = React.forwardRef((_, disclosureRef) => { -
    + { goToUrlLink(privacyUrl, true) } }} + variant="caption" > {_p('connect/disclosure/policy/link', 'MX Privacy Policy.')} -
    +     -
    +
    +     )} diff --git a/src/views/disclosure/Disclosure.module.css b/src/views/disclosure/Disclosure.module.css index ee12b3f593..55a735676a 100644 --- a/src/views/disclosure/Disclosure.module.css +++ b/src/views/disclosure/Disclosure.module.css @@ -1,8 +1,3 @@ -.flexGroup { - display: flex; - flex-direction: column; -} - .title:global(.MuiTypography-root) { margin: var(--spacing-4) auto var(--spacing-2); text-align: center; @@ -44,7 +39,6 @@ .link:global(.MuiLink-root) { display: inline; - font-size: 11px; } .poweredBy {