fix: fix theme issues of desktop pairing page

shared/lib/error-utils.js

@@ -126,7 +126,9 @@ function disableDesktop(backgroundConnection) {
 }
 
 export function downloadDesktopApp() {
-  global.platform.openTab({ url: 'https://metamask.io/' });
+  global.platform.openTab({
+    url: 'https://github.com/MetaMask/metamask-desktop/releases',
+  });
 }
 
 export function downloadExtension() {

ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap

@@ -3,16 +3,13 @@
 exports[`Desktop Pairing page should render otp component 1`] = `
 <div>
   <div
-    class="page-container__content"
+    class="box box--margin-right-2 box--margin-left-2 box--display-flex box--flex-direction-column box--align-items-center"
   >
     <div
-      class="desktop-pairing"
+      class="box box--margin-top-8 box--margin-bottom-8 box--display-flex box--flex-direction-row box--justify-content-center"
-    >
-      <div>
-        <div
-          class="box box--margin-top-12 box--margin-right-6 box--margin-left-6 box--display-flex box--flex-direction-column box--align-items-center box--text-align-center"
     >
       <svg
+        class="desktop-pairing__icon"
         fill="currentColor"
         height="64"
         viewBox="0 0 64 39"
@@ -93,27 +90,21 @@ exports[`Desktop Pairing page should render otp component 1`] = `
         />
       </svg>
     </div>
-      </div>
+    <h3
-      <div
+      align="center"
-        class="desktop-pairing__title"
+      class="box mm-text mm-text--heading-md mm-text--color-text-default box--flex-direction-row"
     >
       Pair with Desktop
-      </div>
+    </h3>
-      <div
+    <p
-        class="desktop-pairing__subtitle"
+      align="center"
+      class="box mm-text mm-text--body-md mm-text--color-text-default box--margin-top-2 box--flex-direction-row"
     >
       Open your MetaMask Desktop and type this code
-      </div>
+    </p>
-    </div>
     <div
-      class="desktop-pairing"
+      class="box desktop-pairing__clickable box--margin-top-6 box--margin-bottom-6 box--flex-direction-row"
-    >
-      <div
-        class="desktop-pairing__clickable"
       data-testid="desktop-pairing-otp-content"
-      >
-        <div
-          class="box box--margin-right-6 box--margin-left-6 box--display-flex box--flex-direction-column box--align-items-center box--text-align-center"
     >
       <div
         class="desktop-pairing__tooltip-wrapper"
@@ -127,15 +118,19 @@ exports[`Desktop Pairing page should render otp component 1`] = `
           tabindex="0"
         >
           <p
-                class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography desktop-pairing__otp typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
+            align="center"
+            class="box mm-text desktop-pairing__otp mm-text--body-md mm-text--color-text-default box--flex-direction-row"
           >
             123456
           </p>
         </div>
       </div>
-        </div>
+      <div
+        class="box box--margin-top-4 box--margin-bottom-6 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+      >
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography desktop-pairing__countdown-timer typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
+          align="center"
+          class="box mm-text desktop-pairing__countdown-timer mm-text--body-md mm-text--color-text-default box--flex-direction-row"
         >
           <span>
              
@@ -149,15 +144,16 @@ exports[`Desktop Pairing page should render otp component 1`] = `
              
           </span>
         </p>
-        <div
+      </div>
-          class="desktop-pairing__description"
+      <p
+        align="center"
+        class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
       >
         If the pairing is successful, extension will restart and you'll have to re-enter your password.
-        </div>
+      </p>
-      </div>
     </div>
     <div
-      class="desktop-pairing__buttons"
+      class="box box--flex-direction-row box--width-1/2"
     >
       <button
         class="button btn--rounded btn-primary"

ui/pages/desktop-pairing/desktop-pairing.component.js

@@ -3,19 +3,20 @@ import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Button from '../../components/ui/button';
 import { SECOND } from '../../../shared/constants/time';
-import Typography from '../../components/ui/typography';
 import { I18nContext } from '../../contexts/i18n';
 import IconDesktopPairing from '../../components/ui/icon/icon-desktop-pairing';
 import {
   TEXT_ALIGN,
-  TypographyVariant,
+  TextVariant,
   DISPLAY,
   AlignItems,
-  FLEX_DIRECTION,
+  BLOCK_SIZES,
+  JustifyContent,
 } 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';
 
 export default function DesktopPairingPage({
   generateDesktopOtp,
@@ -75,19 +76,14 @@ export default function DesktopPairingPage({
 
   const renderIcon = () => {
     return (
-      <div>
       <Box
         display={DISPLAY.FLEX}
-          alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
-          textAlign={TEXT_ALIGN.CENTER}
+        marginTop={8}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+        marginBottom={8}
-          marginLeft={6}
-          marginRight={6}
-          marginTop={12}
       >
-          <IconDesktopPairing size={64} />
+        <IconDesktopPairing className="desktop-pairing__icon" size={64} />
       </Box>
-      </div>
     );
   };
 
@@ -104,56 +100,68 @@ export default function DesktopPairingPage({
     hideLoadingIndication();
 
     return (
-      <div
+      <>
+        <Text variant={TextVariant.headingMd} align={TEXT_ALIGN.CENTER}>
+          {t('desktopPageTitle')}
+        </Text>
+        <Text
+          marginTop={2}
+          variant={TextVariant.bodyMd}
+          align={TEXT_ALIGN.CENTER}
+        >
+          {t('desktopPageSubTitle')}
+        </Text>
+        <Box
+          marginBottom={6}
+          marginTop={6}
           className="desktop-pairing__clickable"
           onClick={() => {
             handleCopy(otp);
           }}
           data-testid="desktop-pairing-otp-content"
-      >
-        <Box
-          display={DISPLAY.FLEX}
-          alignItems={AlignItems.center}
-          textAlign={TEXT_ALIGN.CENTER}
-          flexDirection={FLEX_DIRECTION.COLUMN}
-          marginLeft={6}
-          marginRight={6}
         >
           <Tooltip
             wrapperClassName="desktop-pairing__tooltip-wrapper"
             position="top"
             title={copied ? t('copiedExclamation') : t('copyToClipboard')}
           >
-            <Typography
+            <Text align={TEXT_ALIGN.CENTER} className="desktop-pairing__otp">
-              align={TEXT_ALIGN.CENTER}
-              className="desktop-pairing__otp"
-            >
               {otp}
-            </Typography>
+            </Text>
           </Tooltip>
-        </Box>
+          <Box
-
+            display={DISPLAY.FLEX}
-        <Typography
+            alignItems={AlignItems.center}
-          variant={TypographyVariant.paragraph}
+            justifyContent={JustifyContent.center}
+            marginTop={4}
+            marginBottom={6}
+          >
+            <Text
+              variant={TextVariant.paragraph}
               align={TEXT_ALIGN.CENTER}
               className="desktop-pairing__countdown-timer"
             >
               {t('desktopPairingExpireMessage', [
-            <span className="desktop-pairing__countdown-timer-seconds" key={1}>
+                <span
+                  className="desktop-pairing__countdown-timer-seconds"
+                  key={1}
+                >
                   {getExpireDuration()}
                 </span>,
               ])}
-        </Typography>
+            </Text>
-        <div className="desktop-pairing__description">
+          </Box>
+          <Text align={TEXT_ALIGN.CENTER} variant={TextVariant.bodySm}>
             {t('desktopPageDescription')}
-        </div>
+          </Text>
-      </div>
+        </Box>
+      </>
     );
   };
 
   const renderFooter = () => {
     return (
-      <div className="desktop-pairing__buttons">
+      <Box width={BLOCK_SIZES.HALF}>
         <Button
           type="primary"
           rounded
@@ -163,22 +171,22 @@ export default function DesktopPairingPage({
         >
           {t('done')}
         </Button>
-      </div>
+      </Box>
     );
   };
 
   return (
-    <div className="page-container__content">
+    <Box
-      <div className="desktop-pairing">
+      display={DISPLAY.FLEX}
+      flexDirection="column"
+      alignItems={AlignItems.center}
+      marginLeft={2}
+      marginRight={2}
+    >
       {renderIcon()}
-        <div className="desktop-pairing__title">{t('desktopPageTitle')}</div>
+      {renderContent()}
-        <div className="desktop-pairing__subtitle">
-          {t('desktopPageSubTitle')}
-        </div>
-      </div>
-      <div className="desktop-pairing">{renderContent()}</div>
       {renderFooter()}
-    </div>
+    </Box>
   );
 }
 

ui/pages/desktop-pairing/index.scss

@@ -3,126 +3,39 @@
   flex-flow: column;
   align-items: center;
   padding: 0 30px 0;
+  max-width: 640px;
 
   &__countdown-timer {
-    background: #f2f3f4;
+    background: var(--color-background-default);
-    border-radius: 15.5px;
+    border-radius: 16px;
-    padding: 7px 0 7px 0;
+    padding: 8px 0;
-    margin: 0 32px 0 32px;
     font-size: 12px;
+    width: 240px;
   }
 
   &__countdown-timer-seconds {
     color: var(--color-primary-default);
   }
 
-  &__icon {
-    padding-top: 24px;
-  }
-
-  &__title {
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 140.62%;
-    text-align: center;
-    color: #24292e;
-    padding-top: 24px;
-  }
-
-  &__subtitle,
-  &__description {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 140.62%;
-    text-align: center;
-    color: #000;
-    padding-top: 8px;
-    margin: 0 56px;
-  }
-
-  &__description {
-    margin: 18px 0;
-  }
-
   &__otp {
     font-style: normal;
     font-weight: 500;
     font-size: 48px;
+    line-height: 48px;
     letter-spacing: 10px;
-    color: #000;
-  }
-
-  &__buttons {
-    display: flex;
-    width: 70%;
-    justify-content: space-between;
-    margin: auto;
   }
 
   &__tooltip-wrapper {
     width: 100%;
   }
 
-  &__clickable {
+  &__clickable:hover {
-    width: 100%;
-
-    &:hover {
     cursor: pointer;
-    }
+  }
-  }
+
-}
+  &__icon {
-
+    path {
-.desktop-pairing-warning {
+      fill: var(--color-text-default);
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-
-  &__close-button {
-    z-index: 1050;
-    font-size: 24px;
-    cursor: pointer;
-
-    &__close::after {
-      content: '\00D7';
-      font-size: 24px;
-      cursor: pointer;
-      position: relative;
-      float: right;
-      margin-top: -8px;
-    }
-  }
-
-  &__title {
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  &__text {
-    font-size: 0.875rem;
-  }
-
-  &__link {
-    color: var(--color-primary-default);
-    display: block;
-    cursor: pointer;
-    line-height: 100%;
-    font-size: 0.875rem;
-    padding: 0 0;
-  }
-
-  &__warning-content {
-    border-left: 5px solid var(--color-warning-default);
-    border-right: 0;
-    border-bottom: 0;
-    border-top: 0;
-    margin: 4px;
-
-    .icon {
-      position: absolute;
-      left: 5px;
-      top: 10px;
     }
   }
 }