[MMI] The add custody token view needs a styles tweak (#19779)

* fixing styles

* Fixing styles and snapshots

* fixed eslint rule

* Removed unnecessary test

ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap

@@ -3,7 +3,7 @@
 exports[`JwtDropdown should render the Jwt dropdown component 1`] = `
 <div>
   <div
-    class="box box--flex-direction-row"
+    class="mm-box"
   >
     <p
       class="box mm-text custody-search-jwt__select-title mm-text--body-md box--padding-1 box--flex-direction-row box--color-text-default"

ui/components/institutional/jwt-dropdown/jwt-dropdown.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Dropdown from '../../ui/dropdown';
-import Box from '../../ui/box';
 import { Color } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library';
+import { Box, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
 const JwtDropdown = (props) => {

ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap

@@ -3,16 +3,16 @@
 exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
 <div>
   <div
-    class="box jwt-url-form box--margin-bottom-8 box--display-flex box--flex-direction-column box--align-items-flex-start"
+    class="mm-box jwt-url-form mm-box--margin-bottom-8 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-start"
   >
     <div
-      class="box jwt-url-form__jwt-container box--margin-top-4 box--margin-bottom-6 box--display-flex box--flex-direction-column box--align-items-center box--width-full"
+      class="mm-box jwt-url-form__jwt-container mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
     >
       <div
-        class="box box--flex-direction-row"
+        class="mm-box mm-box--width-full"
       >
         <p
-          class="box mm-text jwt-url-form__instruction mm-text--body-md box--display-block box--flex-direction-row box--color-text-default"
+          class="box mm-text jwt-url-form__instruction mm-text--body-md box--margin-bottom-4 box--display-block box--flex-direction-row box--color-text-default"
         >
           input text
         </p>
@@ -24,13 +24,13 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
       </div>
     </div>
     <div
-      class="box box--flex-direction-row box--width-full"
+      class="mm-box mm-box--width-full"
     >
       <p
         class="box mm-text jwt-url-form__instruction mm-text--body-md box--display-block box--flex-direction-row box--color-text-default"
       />
       <div
-        class="box box--flex-direction-row"
+        class="mm-box mm-box--margin-top-4"
       >
         <input
           class="jwt-url-form__input"

ui/components/institutional/jwt-url-form/jwt-url-form.js

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   AlignItems,
-  DISPLAY,
-  BLOCK_SIZES,
-  FLEX_DIRECTION,
+  Display,
+  BlockSize,
+  FlexDirection,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library';
+import { Box, Button, Text } from '../../component-library';
 import JwtDropdown from '../jwt-dropdown';
-import Button from '../../ui/button';
-import Box from '../../ui/box';
 
 const JwtUrlForm = (props) => {
   const t = useI18nContext();
@@ -24,13 +23,13 @@ const JwtUrlForm = (props) => {
 
     return (
       <Box
-        width={BLOCK_SIZES.FULL}
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        width={BlockSize.Full}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         marginTop={4}
         alignItems={AlignItems.center}
         className="jwt-url-form__jwt-container"
-        marginBottom={6}
+        marginBottom={4}
       >
         {showJwtDropdown && (
           <JwtDropdown
@@ -45,9 +44,9 @@ const JwtUrlForm = (props) => {
         )}
         {showJwtDropdown && !showAddNewToken && (
           <Box
-            width={BLOCK_SIZES.FULL}
-            display={DISPLAY.FLEX}
-            flexDirection={FLEX_DIRECTION.COLUMN}
+            width={BlockSize.Full}
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
             alignItems={AlignItems.center}
             marginTop={2}
           >
@@ -66,8 +65,13 @@ const JwtUrlForm = (props) => {
           </Box>
         )}
         {(!showJwtDropdown || showAddNewToken) && (
-          <Box>
-            <Text className="jwt-url-form__instruction" display={DISPLAY.BLOCK}>
+          <Box width={BlockSize.Full}>
+            <Text
+              className="jwt-url-form__instruction"
+              display={Display.Block}
+              variant={TextVariant.bodyMd}
+              marginBottom={4}
+            >
               {props.jwtInputText}
             </Text>
             {fileTooBigError && (
@@ -95,11 +99,15 @@ const JwtUrlForm = (props) => {
 
   const renderAPIURLInput = () => {
     return (
-      <Box width={BLOCK_SIZES.FULL}>
-        <Text className="jwt-url-form__instruction" display={DISPLAY.BLOCK}>
+      <Box width={BlockSize.Full}>
+        <Text
+          className="jwt-url-form__instruction"
+          display={Display.Block}
+          variant={TextVariant.bodyMd}
+        >
           {props.urlInputText}
         </Text>
-        <Box>
+        <Box marginTop={4}>
           <input
             className="jwt-url-form__input"
             id="api-url-box"
@@ -117,8 +125,8 @@ const JwtUrlForm = (props) => {
   return (
     <Box
       className="jwt-url-form"
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
       alignItems={AlignItems.flexStart}
       marginBottom={8}
     >

ui/components/institutional/jwt-url-form/jwt-url-form.scss

@@ -1,19 +1,12 @@
 .jwt-url-form {
-  &__instruction {
-    @include Paragraph;
-
-    align-self: flex-start;
-    font-size: 14px;
-  }
-
   &__input {
     @include Paragraph;
 
     height: 54px;
     width: 100%;
     border-radius: 4px;
+    border: 1px solid;
     background-color: var(--color-background-default);
-    margin-top: 16px;
     padding: 0 10px;
   }
 

ui/components/institutional/jwt-url-form/jwt-url-form.test.js

@@ -27,15 +27,8 @@ describe('JwtUrlForm', function () {
   };
 
   it('opens JWT Url Form without input for new JWT', () => {
-    const { getAllByTestId, getByText } = renderWithProvider(
-      <JwtUrlForm {...props} />,
-      store,
-    );
+    const { getByText } = renderWithProvider(<JwtUrlForm {...props} />, store);
 
-    expect(getAllByTestId('addNewToken-btn')[0]).toHaveAttribute(
-      'role',
-      'button',
-    );
     expect(getByText('Add new token')).toBeInTheDocument();
   });
 

ui/pages/institutional/custody/__snapshots__/custody.test.js.snap

@@ -3,12 +3,12 @@
 exports[`CustodyPage renders CustodyPage 1`] = `
 <div>
   <div
-    class="box box--flex-direction-row"
+    class="mm-box"
   >
     
     
     <div
-      class="box box--sm:padding-7 box--md:padding-2 box--display-flex box--flex-direction-column"
+      class="mm-box mm-box--padding-0 mm-box--sm:padding-7 mm-box--md:padding-2 mm-box--display-flex mm-box--flex-direction-column"
     >
       <button
         aria-label="Back"
@@ -20,7 +20,7 @@ exports[`CustodyPage renders CustodyPage 1`] = `
         />
       </button>
       <h4
-        class="box mm-text mm-text--body-lg-medium box--margin-top-4 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
+        class="box mm-text mm-text--body-lg-medium box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Custodial Accounts
       </h4>
@@ -30,16 +30,16 @@ exports[`CustodyPage renders CustodyPage 1`] = `
         Please choose the custodian you want to connect in order to add or refresh a token.
       </h6>
       <div
-        class="box box--flex-direction-row"
+        class="mm-box"
       >
         <ul
           width="full"
         >
           <div
-            class="box box--margin-bottom-4 box--padding-3 box--sm:padding-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center box--rounded-sm box--border-color-border-default box--border-style-solid box--border-width-1"
+            class="mm-box mm-box--padding-3 mm-box--sm:padding-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-sm mm-box--border-color-border-default box--border-style-solid box--border-width-1"
           >
             <div
-              class="box box--display-flex box--flex-direction-row box--align-items-center"
+              class="mm-box mm-box--align-items-center"
             >
               <img
                 alt="Saturn Custody"
@@ -71,27 +71,36 @@ exports[`CustodyPage renders CustodyPage 1`] = `
 exports[`CustodyPage renders CustodyPage 2`] = `
 <div>
   <div
-    class="box box--flex-direction-row"
+    class="mm-box"
   >
     
     
     <div
-      class="box box--sm:padding-7 box--md:padding-2 box--display-flex box--flex-direction-column"
+      class="mm-box mm-box--padding-0 mm-box--display-flex mm-box--flex-direction-column"
     >
-      <button
-        aria-label="Back"
-        class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-alternative box--background-color-transparent box--rounded-lg"
+      <div
+        class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center"
       >
-        <span
-          class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
-          style="mask-image: url('./images/icons/arrow-left.svg');"
-        />
-      </button>
+        <button
+          aria-label="Back"
+          class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-alternative box--background-color-transparent box--rounded-lg"
+        >
+          <span
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+            style="mask-image: url('./images/icons/arrow-left.svg');"
+          />
+        </button>
+        <p
+          class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+        >
+          Back
+        </p>
+      </div>
       <h4
         class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
         <div
-          class="box box--display-flex box--flex-direction-row box--align-items-center"
+          class="mm-box mm-box--display-flex mm-box--align-items-center"
         >
           <p
             class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
@@ -99,25 +108,25 @@ exports[`CustodyPage renders CustodyPage 2`] = `
         </div>
       </h4>
       <p
-        class="box mm-text mm-text--body-md box--margin-top-4 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
+        class="box mm-text mm-text--body-md box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Enter your  token or add a new token
       </p>
     </div>
     <div
-      class="box box--padding-top-7 box--padding-bottom-7 box--flex-direction-row"
+      class="mm-box mm-box--padding-bottom-7"
     >
       <div
-        class="box jwt-url-form box--margin-bottom-8 box--display-flex box--flex-direction-column box--align-items-flex-start"
+        class="mm-box jwt-url-form mm-box--margin-bottom-8 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-start"
       >
         <div
-          class="box jwt-url-form__jwt-container box--margin-top-4 box--margin-bottom-6 box--display-flex box--flex-direction-column box--align-items-center box--width-full"
+          class="mm-box jwt-url-form__jwt-container mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
         >
           <div
-            class="box box--flex-direction-row"
+            class="mm-box mm-box--width-full"
           >
             <p
-              class="box mm-text jwt-url-form__instruction mm-text--body-md box--display-block box--flex-direction-row box--color-text-default"
+              class="box mm-text jwt-url-form__instruction mm-text--body-md box--margin-bottom-4 box--display-block box--flex-direction-row box--color-text-default"
             >
               Paste or drop your token here:
             </p>
@@ -131,7 +140,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
           </div>
         </div>
         <div
-          class="box box--flex-direction-row box--width-full"
+          class="mm-box mm-box--width-full"
         >
           <p
             class="box mm-text jwt-url-form__instruction mm-text--body-md box--display-block box--flex-direction-row box--color-text-default"
@@ -139,7 +148,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
              API URL
           </p>
           <div
-            class="box box--flex-direction-row"
+            class="mm-box mm-box--margin-top-4"
           >
             <input
               class="jwt-url-form__input"
@@ -151,16 +160,15 @@ exports[`CustodyPage renders CustodyPage 2`] = `
         </div>
       </div>
       <div
-        class="box box--padding-4 box--display-flex box--flex-direction-row box--justify-content-center"
+        class="mm-box mm-box--padding-0 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center"
       >
         <button
-          class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md box--margin-right-4 box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
-          type="secondary"
+          class="box mm-text mm-button-base mm-button-base--size-md mm-button-base--block mm-button-secondary mm-text--body-md box--margin-right-4 box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
         >
           Cancel
         </button>
         <button
-          class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+          class="box mm-text mm-button-base mm-button-base--size-md mm-button-base--block mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
           data-testid="jwt-form-connect-button"
         >
           Connect

ui/pages/institutional/custody/custody.js

@@ -20,22 +20,22 @@ import {
   IconSize,
   BUTTON_SIZES,
   BUTTON_VARIANT,
+  Box,
 } from '../../../components/component-library';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
-  FONT_WEIGHT,
+  Display,
+  FlexDirection,
+  FontWeight,
   Color,
   JustifyContent,
   BorderRadius,
   BorderColor,
-  BLOCK_SIZES,
+  BlockSize,
   TextColor,
-  TEXT_ALIGN,
+  TextAlign,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Box from '../../../components/ui/box';
 import {
   CUSTODY_ACCOUNT_DONE_ROUTE,
   DEFAULT_ROUTE,
@@ -88,16 +88,15 @@ const CustodyPage = () => {
       custodianItems.push(
         <Box
           key={uuidv4()}
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.ROW}
+          display={Display.FLEX}
+          flexDirection={FlexDirection.ROW}
           justifyContent={JustifyContent.spaceBetween}
           alignItems={AlignItems.center}
           borderColor={BorderColor.borderDefault}
           borderRadius={BorderRadius.SM}
           padding={[3, 4]}
-          marginBottom={4}
         >
-          <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
+          <Box display={Display.FLEX} alignItems={AlignItems.center}>
             {custodian.iconUrl && (
               <img
                 width={32}
@@ -139,7 +138,15 @@ const CustodyPage = () => {
     });
 
     return custodianItems;
-  }, [connectRequest, custodians, dispatch, selectedCustodianName]);
+  }, [
+    connectRequest,
+    custodians,
+    dispatch,
+    mmiActions,
+    selectedCustodianName,
+    t,
+    trackEvent,
+  ]);
 
   const handleConnectError = useCallback(
     (e) => {
@@ -322,13 +329,13 @@ const CustodyPage = () => {
   return (
     <Box>
       {connectError && (
-        <Text textAlign={TEXT_ALIGN.CENTER} marginTop={3} padding={[2, 7, 5]}>
+        <Text textAlign={TextAlign.Center} marginTop={3} padding={[2, 7, 5]}>
           {connectError}
         </Text>
       )}
 
       {selectError && (
-        <Text textAlign={TEXT_ALIGN.CENTER} marginTop={3} padding={[2, 7, 5]}>
+        <Text textAlign={TextAlign.Center} marginTop={3} padding={[2, 7, 5]}>
           {selectError}
         </Text>
       )}
@@ -336,8 +343,8 @@ const CustodyPage = () => {
       {!accounts && !selectedCustodianType ? (
         <Box
           padding={[0, 7, 2]}
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
         >
           <ButtonIcon
             ariaLabel={t('back')}
@@ -345,14 +352,9 @@ const CustodyPage = () => {
             size={IconSize.Sm}
             color={Color.iconDefault}
             onClick={() => history.push(DEFAULT_ROUTE)}
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
           />
-          <Text
-            as="h4"
-            variant={TextVariant.bodyLgMedium}
-            marginTop={4}
-            marginBottom={4}
-          >
+          <Text as="h4" variant={TextVariant.bodyLgMedium} marginTop={4}>
             {t('connectCustodialAccountTitle')}
           </Text>
           <Text
@@ -364,7 +366,7 @@ const CustodyPage = () => {
             {t('connectCustodialAccountMsg')}
           </Text>
           <Box>
-            <ul width={BLOCK_SIZES.FULL}>{custodianButtons}</ul>
+            <ul width={BlockSize.Full}>{custodianButtons}</ul>
           </Box>
         </Box>
       ) : null}
@@ -372,20 +374,28 @@ const CustodyPage = () => {
       {!accounts && selectedCustodianType && (
         <>
           <Box
-            padding={[0, 7, 2]}
-            display={DISPLAY.FLEX}
-            flexDirection={FLEX_DIRECTION.COLUMN}
+            padding={0}
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
           >
-            <ButtonIcon
-              ariaLabel={t('back')}
-              iconName={IconName.ArrowLeft}
-              size={IconSize.Sm}
-              color={Color.iconAlternative}
-              onClick={() => cancelConnectCustodianToken()}
-              display={[DISPLAY.FLEX]}
-            />
+            <Box
+              display={Display.Flex}
+              alignItems={AlignItems.center}
+              marginBottom={4}
+              marginTop={4}
+            >
+              <ButtonIcon
+                ariaLabel={t('back')}
+                iconName={IconName.ArrowLeft}
+                size={IconSize.Sm}
+                color={Color.iconAlternative}
+                onClick={() => cancelConnectCustodianToken()}
+                display={[Display.Flex]}
+              />
+              <Text>{t('back')}</Text>
+            </Box>
             <Text as="h4">
-              <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
+              <Box display={Display.Flex} alignItems={AlignItems.center}>
                 {selectedCustodianImage && (
                   <img
                     width={32}
@@ -397,11 +407,11 @@ const CustodyPage = () => {
                 <Text marginLeft={2}>{selectedCustodianDisplayName}</Text>
               </Box>
             </Text>
-            <Text marginTop={4} marginBottom={4}>
+            <Text marginTop={4}>
               {t('enterCustodianToken', [selectedCustodianDisplayName])}
             </Text>
           </Box>
-          <Box paddingTop={7} paddingBottom={7}>
+          <Box paddingBottom={7}>
             <JwtUrlForm
               jwtList={jwtList}
               currentJwt={currentJwt}
@@ -412,17 +422,18 @@ const CustodyPage = () => {
               onUrlChange={(url) => setApiUrl(url)}
             />
             <Box
-              display={DISPLAY.FLEX}
-              flexDirection={FLEX_DIRECTION.ROW}
+              display={Display.Flex}
+              flexDirection={FlexDirection.Row}
               justifyContent={JustifyContent.center}
-              padding={[4, 0]}
+              padding={0}
             >
               <Button
-                type={BUTTON_VARIANT.SECONDARY}
+                variant={BUTTON_VARIANT.SECONDARY}
                 marginRight={4}
                 onClick={() => {
                   cancelConnectCustodianToken();
                 }}
+                block
               >
                 {t('cancel')}
               </Button>
@@ -432,6 +443,7 @@ const CustodyPage = () => {
                 disabled={
                   !selectedCustodianName || (addNewTokenClicked && !currentJwt)
                 }
+                block
               >
                 {t('connect')}
               </Button>
@@ -445,7 +457,7 @@ const CustodyPage = () => {
           <Box
             borderColor={BorderColor.borderDefault}
             padding={[5, 7, 2]}
-            width={BLOCK_SIZES.FULL}
+            width={BlockSize.Full}
           >
             <Text as="h4">{t('selectAnAccount')}</Text>
             <Text marginTop={2} marginBottom={5}>
@@ -454,8 +466,8 @@ const CustodyPage = () => {
           </Box>
           <Box
             padding={[5, 7, 0]}
-            display={DISPLAY.FLEX}
-            flexDirection={FLEX_DIRECTION.ROW}
+            display={Display.Flex}
+            flexDirection={FlexDirection.Row}
             justifyContent={JustifyContent.flexStart}
             alignItems={AlignItems.center}
           >
@@ -561,7 +573,7 @@ const CustodyPage = () => {
         >
           <Text
             marginBottom={2}
-            fontWeight={FONT_WEIGHT.BOLD}
+            fontWeight={FontWeight.Bold}
             color={TextColor.textDefault}
             variant={TextVariant.bodySm}
           >
@@ -571,7 +583,11 @@ const CustodyPage = () => {
             {t('allCustodianAccountsConnectedSubtitle')}
           </Text>
 
-          <Box padding={[5, 7]} className="custody-accounts-empty__footer">
+          <Box
+            padding={[5, 7]}
+            width={BlockSize.Full}
+            className="custody-accounts-empty__footer"
+          >
             <Button
               size={BUTTON_SIZES.LG}
               type={BUTTON_VARIANT.SECONDARY}

ui/pages/institutional/custody/index.scss

@@ -1,13 +1,9 @@
-@import '../../../components/institutional/jwt-dropdown/jwt-dropdown.scss';
-@import '../../../components/institutional/jwt-url-form/jwt-url-form.scss';
-
 .custody-accounts-empty {
   min-height: 300px;
 
   &__footer {
     border-top: 1px solid var(--color-border-muted);
     position: absolute;
-    width: 100%;
     bottom: 0;
     left: 0;
   }