From 9f89d71c6f71d93e63e4aedc7287ff73db351d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Regadas?= <apregadas@gmail.com>
Date: Thu, 30 Mar 2023 11:40:37 +0100
Subject: [PATCH] [MMI] compliance settings component (#18274)

* MMI-2657 adds the compliance settings screen

* MMI-2657 adds stories file

* review fixes

* review fixes

* lint fix

* clean up

* Update ui/components/institutional/compliance-settings/compliance-settings.stories.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* lint fix

* snaps update

* Button update

---------

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
---
 .../compliance-settings.test.js.snap          |  32 +++---
 .../compliance-settings.js                    | 102 ++++++++++--------
 .../compliance-settings.stories.js            |   7 +-
 .../compliance-settings/index.scss            |   8 --
 4 files changed, 75 insertions(+), 74 deletions(-)

diff --git a/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap b/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap
index 946a5a7f5..a8e345f24 100644
--- a/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap
+++ b/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap
@@ -5,31 +5,27 @@ exports[`Compliance Settings shows disconnect when Compliance is activated 1`] =
   <div
     class="box box--flex-direction-row"
   >
-    <div
-      class="box institutional-feature__content box--flex-direction-row"
+    <h6
+      class="box mm-text institutional-feature__content mm-text--body-sm box--flex-direction-row box--color-text-default"
     >
       Change your settings or view reports by opening up Codefi Compliance or disconnect below.
-    </div>
-    <footer
-      class="institutional-feature__footer"
+    </h6>
+    <div
+      class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
     >
       <button
-        class="button btn--rounded btn-default btn--large"
+        class="box mm-text mm-button-base mm-button-base--size-lg 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="disconnect-compliance"
-        role="button"
-        tabindex="0"
       >
         Disconnect
       </button>
       <button
-        class="button btn--rounded btn-primary"
+        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
         data-testid="start-compliance"
-        role="button"
-        tabindex="0"
       >
         Open Codefi Compliance
       </button>
-    </footer>
+    </div>
   </div>
 </div>
 `;
@@ -42,6 +38,7 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
   >
     <div
       class="box institutional-feature__content box--flex-direction-row"
+      variant="body-sm"
     >
       <p
         class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
@@ -79,19 +76,16 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
     <div
       class="box box--display-flex box--flex-direction-row box--justify-content-center"
     >
-      <footer
-        class="institutional-feature__footer"
-        padding="4,6"
+      <div
+        class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
       >
         <button
-          class="button btn--rounded btn-primary"
+          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
           data-testid="start-compliance"
-          role="button"
-          tabindex="0"
         >
           Open Codefi Compliance
         </button>
-      </footer>
+      </div>
     </div>
   </div>
 </div>
diff --git a/ui/components/institutional/compliance-settings/compliance-settings.js b/ui/components/institutional/compliance-settings/compliance-settings.js
index aca08e198..4289250c8 100644
--- a/ui/components/institutional/compliance-settings/compliance-settings.js
+++ b/ui/components/institutional/compliance-settings/compliance-settings.js
@@ -5,12 +5,19 @@ import {
   DISPLAY,
   TextColor,
   FLEX_DIRECTION,
+  TextVariant,
+  BorderStyle,
+  BorderColor,
 } from '../../../helpers/constants/design-system';
 import { I18nContext } from '../../../contexts/i18n';
 import { mmiActionsFactory } from '../../../store/institutional/institution-background';
-import { Text } from '../../component-library';
+import {
+  Text,
+  Button,
+  BUTTON_TYPES,
+  BUTTON_SIZES,
+} from '../../component-library';
 import Box from '../../ui/box';
-import Button from '../../ui/button';
 
 const ComplianceSettings = () => {
   const t = useContext(I18nContext);
@@ -21,48 +28,48 @@ const ComplianceSettings = () => {
     Boolean(state.metamask.institutionalFeatures?.complianceProjectId),
   );
 
-  const disconnectFromCompliance = async () => {
-    await dispatch(mmiActions.deleteComplianceAuthData());
-  };
-
-  const renderDisconnect = () => {
-    return (
-      <Button
-        type="default"
-        large
-        onClick={disconnectFromCompliance}
-        data-testid="disconnect-compliance"
-      >
-        {t('disconnect')}
-      </Button>
-    );
-  };
-
-  const renderLinkButton = () => {
-    return (
-      <Button
-        type="primary"
-        data-testid="start-compliance"
-        onClick={() => {
-          global.platform.openTab({
-            url: 'https://start.compliance.codefi.network/',
-          });
-        }}
-      >
-        {t('openCodefiCompliance')}
-      </Button>
-    );
-  };
+  const linkButton = (
+    <Button
+      type={BUTTON_TYPES.LINK}
+      size={BUTTON_SIZES.LG}
+      data-testid="start-compliance"
+      onClick={() => {
+        global.platform.openTab({
+          url: 'https://start.compliance.codefi.network/',
+        });
+      }}
+    >
+      {t('openCodefiCompliance')}
+    </Button>
+  );
 
   return complianceActivated ? (
     <Box>
-      <Box className="institutional-feature__content">
+      <Text
+        variant={TextVariant.bodySm}
+        as="h6"
+        className="institutional-feature__content"
+      >
         {t('complianceSettingsExplanation')}
+      </Text>
+      <Box
+        padding={[4, 6]}
+        borderWidth={1}
+        borderStyle={BorderStyle.solid}
+        borderColor={BorderColor.borderMuted}
+        className="institutional-feature__footer"
+      >
+        <Button
+          size={BUTTON_SIZES.LG}
+          onClick={() => {
+            dispatch(mmiActions.deleteComplianceAuthData());
+          }}
+          data-testid="disconnect-compliance"
+        >
+          {t('disconnect')}
+        </Button>
+        {linkButton}
       </Box>
-      <footer className="institutional-feature__footer">
-        {renderDisconnect()}
-        {renderLinkButton()}
-      </footer>
     </Box>
   ) : (
     <Box
@@ -70,7 +77,10 @@ const ComplianceSettings = () => {
       color={TextColor.textAlternative}
       data-testid="institutional-content"
     >
-      <Box className="institutional-feature__content">
+      <Box
+        variant={TextVariant.bodySm}
+        className="institutional-feature__content"
+      >
         <Text paddingBottom={3}>{t('complianceBlurb0')}</Text>
         <Text paddingBottom={3}>{t('complianceBlurb1')}</Text>
         <Text paddingBottom={3}>{t('complianceBlurpStep0')}</Text>
@@ -87,9 +97,15 @@ const ComplianceSettings = () => {
         flexDirection={FLEX_DIRECTION.ROW}
         justifyContent={JustifyContent.center}
       >
-        <footer padding={[4, 6]} className="institutional-feature__footer">
-          {renderLinkButton()}
-        </footer>
+        <Box
+          padding={[4, 6]}
+          borderWidth={1}
+          borderStyle={BorderStyle.solid}
+          borderColor={BorderColor.borderMuted}
+          className="institutional-feature__footer"
+        >
+          {linkButton}
+        </Box>
       </Box>
     </Box>
   );
diff --git a/ui/components/institutional/compliance-settings/compliance-settings.stories.js b/ui/components/institutional/compliance-settings/compliance-settings.stories.js
index c3f73a8a3..cfcef8689 100644
--- a/ui/components/institutional/compliance-settings/compliance-settings.stories.js
+++ b/ui/components/institutional/compliance-settings/compliance-settings.stories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { action } from '@storybook/addon-actions';
 import configureStore from '../../../store/store';
 import testData from '../../../../.storybook/test-data';
 import ComplianceSettings from '.';
@@ -23,9 +22,9 @@ export default {
   title: 'Components/Institutional/ComplianceSettings',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
   component: ComplianceSettings,
-  args: {
-    onClick: () => {
-      action('onClick');
+  argTypes: {
+    onClick: {
+      action: 'onClick',
     },
   },
 };
diff --git a/ui/components/institutional/compliance-settings/index.scss b/ui/components/institutional/compliance-settings/index.scss
index df59c0c06..cb9c22a12 100644
--- a/ui/components/institutional/compliance-settings/index.scss
+++ b/ui/components/institutional/compliance-settings/index.scss
@@ -1,9 +1,5 @@
 .institutional-feature {
   &__footer {
-    border-top: 1px solid var(--color-text-muted);
-    padding: 16px 30px;
-    flex: 0 0 auto;
-
     button {
       min-width: 0;
       margin-right: 16px;
@@ -15,10 +11,6 @@
   }
 
   &__content {
-    @include H6;
-
-    line-height: 22px;
-
     ol {
       list-style: decimal;
       list-style-position: inside;