From 3a1bcf14466b40cec1d7a2a155a0479a891880e1 Mon Sep 17 00:00:00 2001
From: Goktug Poyraz <goktug.poyraz@consensys.net>
Date: Tue, 21 Mar 2023 13:09:13 +0100
Subject: [PATCH] Adds desktop pairing page story and fix suggestions

---
 .../desktop-pairing.test.js.snap              | 14 ++++-----
 .../desktop-pairing.component.js              | 27 +++++++++--------
 .../desktop-pairing.stories.js                | 30 +++++++++++++++++++
 ui/pages/desktop-pairing/index.scss           | 17 ++---------
 4 files changed, 52 insertions(+), 36 deletions(-)
 create mode 100644 ui/pages/desktop-pairing/desktop-pairing.stories.js

diff --git a/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap b/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
index c3a42d035..586e81444 100644
--- a/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
+++ b/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
@@ -117,12 +117,12 @@ exports[`Desktop Pairing page should render otp component 1`] = `
           style="display: inline;"
           tabindex="0"
         >
-          <p
+          <h1
             align="center"
-            class="box mm-text desktop-pairing__otp mm-text--body-md mm-text--color-text-default box--flex-direction-row"
+            class="box mm-text desktop-pairing__otp mm-text--display-md mm-text--color-text-default box--flex-direction-row"
           >
             123456
-          </p>
+          </h1>
         </div>
       </div>
       <div
@@ -130,7 +130,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
       >
         <p
           align="center"
-          class="box mm-text desktop-pairing__countdown-timer mm-text--body-md mm-text--color-text-default box--flex-direction-row"
+          class="box mm-text desktop-pairing__countdown-timer mm-text--body-md mm-text--color-text-default box--padding-2 box--flex-direction-row box--background-color-background-default box--rounded-xl"
         >
           <span>
              
@@ -153,12 +153,10 @@ exports[`Desktop Pairing page should render otp component 1`] = `
       </p>
     </div>
     <div
-      class="box box--flex-direction-row box--width-1/2"
+      class="box box--flex-direction-row"
     >
       <button
-        class="button btn--rounded btn-primary"
-        role="button"
-        tabindex="0"
+        class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse 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--background-color-primary-default box--rounded-pill"
       >
         Done
       </button>
diff --git a/ui/pages/desktop-pairing/desktop-pairing.component.js b/ui/pages/desktop-pairing/desktop-pairing.component.js
index 098976b66..c529aa261 100644
--- a/ui/pages/desktop-pairing/desktop-pairing.component.js
+++ b/ui/pages/desktop-pairing/desktop-pairing.component.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import Button from '../../components/ui/button';
 import { SECOND } from '../../../shared/constants/time';
 import { I18nContext } from '../../contexts/i18n';
 import IconDesktopPairing from '../../components/ui/icon/icon-desktop-pairing';
@@ -10,13 +9,14 @@ import {
   TextVariant,
   DISPLAY,
   AlignItems,
-  BLOCK_SIZES,
   JustifyContent,
+  BackgroundColor,
+  BorderRadius,
 } from '../../helpers/constants/design-system';
 import Box from '../../components/ui/box/box';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import Tooltip from '../../components/ui/tooltip';
-import { Text } from '../../components/component-library';
+import { Text, Button } from '../../components/component-library';
 
 export default function DesktopPairingPage({
   generateDesktopOtp,
@@ -104,11 +104,7 @@ export default function DesktopPairingPage({
         <Text variant={TextVariant.headingMd} align={TEXT_ALIGN.CENTER}>
           {t('desktopPageTitle')}
         </Text>
-        <Text
-          marginTop={2}
-          variant={TextVariant.bodyMd}
-          align={TEXT_ALIGN.CENTER}
-        >
+        <Text marginTop={2} align={TEXT_ALIGN.CENTER}>
           {t('desktopPageSubTitle')}
         </Text>
         <Box
@@ -125,7 +121,11 @@ export default function DesktopPairingPage({
             position="top"
             title={copied ? t('copiedExclamation') : t('copyToClipboard')}
           >
-            <Text align={TEXT_ALIGN.CENTER} className="desktop-pairing__otp">
+            <Text
+              align={TEXT_ALIGN.CENTER}
+              variant={TextVariant.displayMd}
+              className="desktop-pairing__otp"
+            >
               {otp}
             </Text>
           </Tooltip>
@@ -137,9 +137,12 @@ export default function DesktopPairingPage({
             marginBottom={6}
           >
             <Text
+              className="desktop-pairing__countdown-timer"
               variant={TextVariant.paragraph}
               align={TEXT_ALIGN.CENTER}
-              className="desktop-pairing__countdown-timer"
+              backgroundColor={BackgroundColor.backgroundDefault}
+              borderRadius={BorderRadius.XL}
+              padding={2}
             >
               {t('desktopPairingExpireMessage', [
                 <span
@@ -161,10 +164,8 @@ export default function DesktopPairingPage({
 
   const renderFooter = () => {
     return (
-      <Box width={BLOCK_SIZES.HALF}>
+      <Box>
         <Button
-          type="primary"
-          rounded
           onClick={() => {
             goBack();
           }}
diff --git a/ui/pages/desktop-pairing/desktop-pairing.stories.js b/ui/pages/desktop-pairing/desktop-pairing.stories.js
new file mode 100644
index 000000000..0c4163125
--- /dev/null
+++ b/ui/pages/desktop-pairing/desktop-pairing.stories.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import DesktopPairingPage from './desktop-pairing.component';
+
+export default {
+  title: 'Pages/DesktopPairingPage',
+  component: DesktopPairingPage,
+  argTypes: {
+    showLoadingIndication: {
+      action: 'showLoadingIndication',
+    },
+    hideLoadingIndication: {
+      action: 'hideLoadingIndication',
+    },
+    generateDesktopOtp: {
+      action: 'generateDesktopOtp',
+    },
+  },
+  args: {
+    mostRecentOverviewPage: '/',
+  },
+};
+
+export const DefaultStory = (args) => {
+  const generateDesktopOtp = async () => Promise.resolve('123456');
+  return (
+    <DesktopPairingPage {...args} generateDesktopOtp={generateDesktopOtp} />
+  );
+};
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/pages/desktop-pairing/index.scss b/ui/pages/desktop-pairing/index.scss
index 46603a259..9ab031555 100644
--- a/ui/pages/desktop-pairing/index.scss
+++ b/ui/pages/desktop-pairing/index.scss
@@ -1,27 +1,14 @@
 .desktop-pairing {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  padding: 0 30px 0;
-  max-width: 640px;
-
   &__countdown-timer {
-    background: var(--color-background-default);
-    border-radius: 16px;
-    padding: 8px 0;
     font-size: 12px;
-    width: 240px;
   }
 
   &__countdown-timer-seconds {
     color: var(--color-primary-default);
+    min-width: 180px;
   }
 
   &__otp {
-    font-style: normal;
-    font-weight: 500;
-    font-size: 48px;
-    line-height: 48px;
     letter-spacing: 10px;
   }
 
@@ -35,7 +22,7 @@
 
   &__icon {
     path {
-      fill: var(--color-text-default);
+      fill: var(--color-icon-default);
     }
   }
 }