Overall CSS #13441 (#13902)

* styling updates Co-authored-by: Alex Donesky <adonesky@gmail.com> Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: David Walsh <davidwalsh83@gmail.com>
2024-11-22 01:47:00 +01:00 · 2022-05-16 20:38:04 +02:00 · 2022-05-16 20:38:04 +02:00 · d01a2ad7e5
commit d01a2ad7e5
parent a0c4febfce
30 changed files with 267 additions and 134 deletions
--- a/test/e2e/tests/custom-rpc-history.spec.js
+++ b/test/e2e/tests/custom-rpc-history.spec.js
@ -1,5 +1,5 @@
 const { strict: assert } = require('assert');
-const { convertToHexValue, withFixtures } = require('../helpers');
+const { convertToHexValue, withFixtures, largeDelayMs } = require('../helpers');

 describe('Stores custom RPC history', function () {
  const ganacheOptions = {
@ -29,6 +29,8 @@ describe('Stores custom RPC history', function () {
        const rpcUrl = `http://127.0.0.1:${port}`;
        const networkName = 'Secondary Ganache Testnet';

+        await driver.delay(largeDelayMs);
+
        await driver.clickElement('.network-display');

        await driver.clickElement({ text: 'Add Network', tag: 'button' });
@ -77,6 +79,8 @@ describe('Stores custom RPC history', function () {
        // duplicate network
        const duplicateRpcUrl = 'https://mainnet.infura.io/v3/';

+        await driver.delay(largeDelayMs);
+
        await driver.clickElement('.network-display');

        await driver.clickElement({ text: 'Add Network', tag: 'button' });
@ -113,6 +117,8 @@ describe('Stores custom RPC history', function () {
        const newRpcUrl = 'http://localhost:8544';
        const duplicateChainId = '0x539';

+        await driver.delay(largeDelayMs);
+
        await driver.clickElement('.network-display');

        await driver.clickElement({ text: 'Add Network', tag: 'button' });
@ -154,6 +160,8 @@ describe('Stores custom RPC history', function () {
        await driver.fill('#password', 'correct horse battery staple');
        await driver.press('#password', driver.Key.ENTER);

+        await driver.delay(largeDelayMs);
+
        await driver.clickElement('.network-display');

        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' });
@ -173,6 +181,7 @@ describe('Stores custom RPC history', function () {
        await driver.fill('#password', 'correct horse battery staple');
        await driver.press('#password', driver.Key.ENTER);

+        await driver.delay(largeDelayMs);
        await driver.clickElement('.network-display');

        // only recent 3 are found and in correct order (most recent at the top)
@ -202,6 +211,7 @@ describe('Stores custom RPC history', function () {
        await driver.fill('#password', 'correct horse battery staple');
        await driver.press('#password', driver.Key.ENTER);

+        await driver.delay(largeDelayMs);
        await driver.clickElement('.network-display');

        await driver.clickElement({ text: 'Add Network', tag: 'button' });
--- a/test/e2e/tests/from-import-ui.spec.js
+++ b/test/e2e/tests/from-import-ui.spec.js
@ -72,7 +72,8 @@ describe('Metamask Import UI', function () {
        await driver.press('#password', driver.Key.ENTER);

        // Create a new account
-        // switches to locakhost
+        // switches to localhost
+        await driver.delay(largeDelayMs);
        await driver.clickElement('.network-display');
        await driver.clickElement({ text: 'Localhost', tag: 'span' });

--- a/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss
@ -29,7 +29,7 @@
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
-    border-top: 10px solid white;
+    border-top: 10px solid var(--color-background-default);
    position: relative;
    margin-bottom: -2px;
  }
--- a/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
+++ b/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
@ -160,7 +160,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
        </div>
      </div>
    ) : null;
-  }, [isUnlocking, hasTriggeredUnlock, t]);
+  }, [isUnlocking, hasTriggeredUnlock, triggerOnLongPressed, t]);

  return (
    <Button
--- a/ui/components/app/srp-input/srp-input.js
+++ b/ui/components/app/srp-input/srp-input.js
@ -10,6 +10,7 @@ import Typography from '../../ui/typography';
 import ShowHideToggle from '../../ui/show-hide-toggle';
 import {
  FONT_WEIGHT,
+  TEXT_ALIGN,
  TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
 import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
@ -124,7 +125,11 @@ export default function SrpInput({ onChange, srpText }) {
  return (
    <div className="import-srp__container">
      <label className="import-srp__srp-label">
-        <Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
+        <Typography
+          align={TEXT_ALIGN.LEFT}
+          variant={TYPOGRAPHY.H4}
+          fontWeight={FONT_WEIGHT.BOLD}
+        >
          {srpText}
        </Typography>
      </label>
--- a/ui/components/app/srp-input/srp-input.scss
+++ b/ui/components/app/srp-input/srp-input.scss
@ -2,27 +2,28 @@
  &__container {
    display: grid;
    grid-template-areas:
-      "title dropdown"
-      "paste-tip paste-tip"
-      "input input"
-      "error error"
-      "too-many-words-error too-many-words-error";
+      'title dropdown'
+      'paste-tip paste-tip'
+      'input input'
+      'error error'
+      'too-many-words-error too-many-words-error';
  }

  @media (max-width: 767px) {
    &__container {
      grid-template-areas:
-        "title"
-        "dropdown"
-        "paste-tip"
-        "input"
-        "error"
-        "too-many-words-error";
+        'title'
+        'dropdown'
+        'paste-tip'
+        'input'
+        'error'
+        'too-many-words-error';
    }
  }

  &__srp-label {
    grid-area: title;
+    text-align: center;
  }

  &__number-of-words-dropdown {
@ -30,7 +31,7 @@
  }

  &__paste-tip {
-    margin-bottom: 8px;
+    margin: 24px 0;
    grid-area: paste-tip;
    width: auto;
    margin-left: auto;
--- a/ui/components/app/step-progress-bar/index.scss
+++ b/ui/components/app/step-progress-bar/index.scss
@ -1,8 +1,10 @@
+$progress-bar-width: calc(100% - 34px); // 100% - (circle size + (circle border size * 2))
+$progress-bar-position-left: calc(-50% + 17px); // -50% + ((circle size / 2) + circle border size)
+
 .progressbar {
  counter-reset: step;
  display: flex;
-  justify-content: space-evenly;
-  width: 500px;
+  justify-content: space-between;
  margin: 0 auto;
 }

@ -11,14 +13,17 @@ ul.two-steps {
 }

 .progressbar li {
+  @include H7;
+
  list-style-type: none;
-  width: 25%;
-  float: left;
-  font-size: 12px;
  position: relative;
  text-align: center;
  color: var(--color-text-alternative);
  z-index: 2;
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
 }

 .progressbar li::before {
@ -28,32 +33,30 @@ ul.two-steps {
  counter-increment: step;
  line-height: 30px;
  border: 2px solid var(--color-border-muted);
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: var(--color-background-default);
-  z-index: -1;
 }

 .progressbar li::after {
-  width: 100%;
+  width: $progress-bar-width;
  height: 2px;
  content: '';
  position: absolute;
  background-color: var(--color-background-alternative);
  top: 15px;
-  right: 77px;
-  z-index: -1;
+  left: $progress-bar-position-left;

  [dir='rtl'] & {
-    width: 100%;
+    width: $progress-bar-width;
    height: 2px;
    content: '';
    position: absolute;
    background-color: var(--color-background-alternative);
-    right: 77px;
-    z-index: -1;
  }
 }

@ -104,13 +107,11 @@ ul.two-steps {
 }

 .progressbar li.two-steps::after {
-  width: 180px;
  height: 2px;
  content: '';
  position: absolute;
  background-color: var(--color-background-alternative);
  top: 15px;
-  right: 75px;
  z-index: -1;

  [dir='rtl'] & {
@ -119,7 +120,6 @@ ul.two-steps {
    content: '';
    position: absolute;
    background-color: var(--color-background-alternative);
-    right: 75px;
    z-index: -1;
  }
 }
--- a/ui/components/app/step-progress-bar/step-progress-bar.js
+++ b/ui/components/app/step-progress-bar/step-progress-bar.js
@ -19,10 +19,10 @@ export const twoStepStages = {
  PASSWORD_CREATE: 2,
 };

-export function ThreeStepProgressBar({ stage }) {
+export function ThreeStepProgressBar({ stage, ...boxProps }) {
  const t = useI18nContext();
  return (
-    <Box>
+    <Box {...boxProps}>
      <ul className="progressbar">
        <li
          className={classnames({
@ -53,10 +53,10 @@ export function ThreeStepProgressBar({ stage }) {
  );
 }

-export function TwoStepProgressBar({ stage }) {
+export function TwoStepProgressBar({ stage, ...boxProps }) {
  const t = useI18nContext();
  return (
-    <Box margin={4} width={BLOCK_SIZES.FULL}>
+    <Box width={BLOCK_SIZES.FULL} {...boxProps}>
      <ul className="progressbar two-steps">
        <li
          className={classnames({
@ -81,8 +81,10 @@ export function TwoStepProgressBar({ stage }) {

 ThreeStepProgressBar.propTypes = {
  stage: PropTypes.number,
+  ...Box.propTypes,
 };

 TwoStepProgressBar.propTypes = {
  stage: PropTypes.number,
+  ...Box.propTypes,
 };
--- a/ui/components/ui/dropdown/dropdown.scss
+++ b/ui/components/ui/dropdown/dropdown.scss
@ -1,6 +1,7 @@
 .dropdown {
  position: relative;
  display: inline-block;
+  height: 36px;

  &__select {
    appearance: none;
--- a/ui/components/ui/loading-screen/index.scss
+++ b/ui/components/ui/loading-screen/index.scss
@ -1,4 +1,5 @@
 .loading-overlay {
+  top: 0;
  left: 0;
  z-index: 51;
  position: fixed;
@ -20,11 +21,12 @@

  &__container {
    position: absolute;
-    top: 33%;
+    top: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
+    transform: translateY(-50%);
  }

  &__error-screen {
--- a/ui/pages/onboarding-flow/create-password/create-password.js
+++ b/ui/pages/onboarding-flow/create-password/create-password.js
@ -154,25 +154,23 @@ export default function CreatePassword({
    <div className="create-password__wrapper">
      {secretRecoveryPhrase &&
      firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT ? (
-        <TwoStepProgressBar stage={twoStepStages.PASSWORD_CREATE} />
+        <TwoStepProgressBar
+          stage={twoStepStages.PASSWORD_CREATE}
+          marginBottom={4}
+        />
      ) : (
-        <ThreeStepProgressBar stage={threeStepStages.PASSWORD_CREATE} />
+        <ThreeStepProgressBar
+          stage={threeStepStages.PASSWORD_CREATE}
+          marginBottom={4}
+        />
      )}
      <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
        {t('createPassword')}
      </Typography>
-      <Typography
-        variant={TYPOGRAPHY.H4}
-        align={TEXT_ALIGN.CENTER}
-        boxProps={{ margin: 5 }}
-      >
+      <Typography variant={TYPOGRAPHY.H4} align={TEXT_ALIGN.CENTER}>
        {t('passwordSetupDetails')}
      </Typography>
-      <Box
-        justifyContent={JUSTIFY_CONTENT.CENTER}
-        marginTop={3}
-        padding={[0, 12]}
-      >
+      <Box justifyContent={JUSTIFY_CONTENT.CENTER} marginTop={3}>
        <form className="create-password__form" onSubmit={handleCreate}>
          <FormField
            dataTestId="create-password-new"
@ -247,6 +245,7 @@ export default function CreatePassword({
                : 'create-password-wallet'
            }
            type="primary"
+            large
            className="create-password__form--submit-button"
            disabled={!isValid || !termsChecked}
            onClick={handleCreate}
--- a/ui/pages/onboarding-flow/create-password/index.scss
+++ b/ui/pages/onboarding-flow/create-password/index.scss
@ -16,8 +16,6 @@
    justify-content: center;
    flex-direction: column;
    align-items: center;
-    max-width: 600px;
-    max-height: 750px;
  }

  &__link-text {
@ -25,17 +23,15 @@
  }

  &__form {
-    padding: 0 24px;
+    @media screen and (min-width: $break-large) {
+      max-width: 320px;
+    }

    &--password-button {
      background-color: transparent;
      color: var(--color-text-default);
    }

-    &--submit-button {
-      padding: 20px;
-    }
-
    &--checkmark {
      i {
        color: var(--color-success-default);
@ -48,6 +44,7 @@

    .form-field__input {
      height: 50px;
+      width: 100%;
    }
  }
 }
--- a/ui/pages/onboarding-flow/creation-successful/creation-successful.js
+++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.js
@ -8,6 +8,7 @@ import {
  FONT_WEIGHT,
  TEXT_ALIGN,
  TYPOGRAPHY,
+  ALIGN_ITEMS,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
@ -45,7 +46,7 @@ export default function CreationSuccessful() {
  };
  return (
    <div className="creation-successful">
-      <Box textAlign={TEXT_ALIGN.CENTER} margin={6}>
+      <Box textAlign={TEXT_ALIGN.CENTER}>
        <img src="./images/tada.png" />
        <Typography
          variant={TYPOGRAPHY.H2}
@ -58,7 +59,13 @@ export default function CreationSuccessful() {
          {t('walletCreationSuccessDetail')}
        </Typography>
      </Box>
-      <Typography variant={TYPOGRAPHY.H4}>{t('remember')}</Typography>
+      <Typography
+        variant={TYPOGRAPHY.H4}
+        boxProps={{ align: ALIGN_ITEMS.LEFT }}
+        marginLeft={12}
+      >
+        {t('remember')}
+      </Typography>
      <ul>
        <li>
          <Typography variant={TYPOGRAPHY.H4}>
--- a/ui/pages/onboarding-flow/creation-successful/index.scss
+++ b/ui/pages/onboarding-flow/creation-successful/index.scss
@ -1,9 +1,15 @@
 .creation-successful {
+  @media screen and (min-width: $break-large) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
  img {
    align-self: center;
  }

-  max-width: 575px;
+  max-width: 600px;

  ul {
    list-style-type: disc;
--- a/ui/pages/onboarding-flow/import-srp/import-srp.js
+++ b/ui/pages/onboarding-flow/import-srp/import-srp.js
@ -25,7 +25,10 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {

  return (
    <div className="import-srp">
-      <TwoStepProgressBar stage={twoStepStages.RECOVERY_PHRASE_CONFIRM} />
+      <TwoStepProgressBar
+        stage={twoStepStages.RECOVERY_PHRASE_CONFIRM}
+        marginBottom={4}
+      />
      <div className="import-srp__header">
        <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
          {t('accessYourWalletWithSRP')}
@ -53,10 +56,10 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
            srpText={t('typeYourSRP')}
          />
          <Button
+            className="import-srp__confirm-button"
            type="primary"
            data-testid="import-srp-confirm"
            large
-            className="import-srp__confirm-button"
            onClick={() => {
              submitSecretRecoveryPhrase(secretRecoveryPhrase);
              history.replace(ONBOARDING_CREATE_PASSWORD_ROUTE);
--- a/ui/pages/onboarding-flow/import-srp/index.scss
+++ b/ui/pages/onboarding-flow/import-srp/index.scss
@ -1,29 +1,12 @@
 .import-srp {
-  width: 840px;
-
-  @media screen and (max-width: 349px) {
-    width: 300px;
-  }
-
-  @media screen and (min-width: 350px) and (max-width: 460px) {
-    width: 357px;
-  }
-
-  @media screen and (min-width: 461px) and (max-width: $break-small) {
-    width: 450px;
-  }
-
-  @media screen and (min-width: $break-small) and (max-width: 840px) {
-    width: 580px;
-  }
+  margin-bottom: 24px;

  &__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
-    margin: 20px auto;
-    max-width: 500px;
+    margin-bottom: 24px;
  }

  &__description {
@ -50,17 +33,11 @@
    align-items: center;
    text-align: left;
    margin: auto;
-
-    &--link {
-      @include H6;
-
-      margin-bottom: 12px;
-    }
  }

  &__confirm-button {
-    width: 327px;
+    max-width: 327px;
    margin: auto;
-    margin-top: 59px;
+    margin-top: 24px;
  }
 }
--- a/ui/pages/onboarding-flow/index.scss
+++ b/ui/pages/onboarding-flow/index.scss
@ -10,17 +10,21 @@
@import 'metametrics/index';

 .onboarding-flow {
-  width: 100%;
  background-color: var(--color-background-default);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  padding: 0 16px;
+  width: 100%;

  &__wrapper {
-    margin-top: 40px;
-    padding: 32px;
+    margin: 24px auto;
+    padding: 32px 16px;
+    max-width: 600px;
    border: 1px solid var(--color-border-muted);
-    border-radius: 20px;
+    border-radius: 24px;
+
+    @media screen and (min-width: $break-large) {
+      margin: 64px auto 40px;
+      padding: 32px;
+    }
  }

  &__twitter-button {
--- a/ui/pages/onboarding-flow/metametrics/index.scss
+++ b/ui/pages/onboarding-flow/metametrics/index.scss
@ -1,5 +1,10 @@
 .onboarding-metametrics {
-  width: 600px;
+  @media screen and (min-width: $break-large) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }

  ul {
    margin: 24px 0 0 0;
@ -29,13 +34,21 @@
  }

  &__buttons {
-    margin: 24px auto 0 auto;
-    justify-content: space-between;
-    display: flex;
+    margin-top: 24px;
+    width: 100%;
+
+    @media screen and (min-width: $break-large) {
+      margin-top: 40px;
+      justify-content: space-between;
+      display: flex;
+    }

    button {
      margin-bottom: 24px;
-      width: 200px;
+
+      @media screen and (min-width: $break-large) {
+        width: 200px;
+      }
    }
  }
 }
--- a/ui/pages/onboarding-flow/metametrics/metametrics.js
+++ b/ui/pages/onboarding-flow/metametrics/metametrics.js
@ -114,7 +114,10 @@ export default function OnboardingMetametrics() {
      >
        {t('metametricsTitle')}
      </Typography>
-      <Typography align={TEXT_ALIGN.CENTER}>
+      <Typography
+        className="onboarding-metametrics__desc"
+        align={TEXT_ALIGN.CENTER}
+      >
        {t('metametricsOptInDescription2')}
      </Typography>
      <ul>
--- a/ui/pages/onboarding-flow/onboarding-app-header/index.scss
+++ b/ui/pages/onboarding-flow/onboarding-app-header/index.scss
@ -9,7 +9,7 @@
  flex: 0 0 auto;

  @media screen and (max-width: $break-small) {
-    padding: 1rem;
+    padding: 16px;
    z-index: $mobile-header-z-index;
  }

--- a/ui/pages/onboarding-flow/pin-extension/index.scss
+++ b/ui/pages/onboarding-flow/pin-extension/index.scss
@ -1,6 +1,4 @@
 .onboarding-pin-extension {
-  max-width: 800px;
-
  .control-dots .dot {
    background: var(--color-icon-muted);
    box-shadow: none;
@ -12,7 +10,7 @@

  &__diagram {
    margin: 24px auto;
-    width: 799px;
+    max-width: 799px;
    height: 320px;
  }

--- a/ui/pages/onboarding-flow/privacy-settings/index.scss
+++ b/ui/pages/onboarding-flow/privacy-settings/index.scss
@ -4,6 +4,14 @@
  justify-content: center;
  align-items: center;

+  @media screen and (max-width: $break-small) {
+    margin-bottom: 24px;
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin-bottom: 40px;
+  }
+
  &__header {
    display: flex;
    justify-content: center;
@ -21,6 +29,11 @@
    max-width: 620px;
    margin-bottom: 20px;

+    @media screen and (min-width: $break-large) {
+      margin-inline-start: 48px;
+      margin-inline-end: 48px;
+    }
+
    a {
      color: var(--color-primary-default);

--- a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
@ -54,8 +54,11 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
  };

  return (
-    <div>
-      <ThreeStepProgressBar stage={threeStepStages.RECOVERY_PHRASE_CONFIRM} />
+    <div className="recovery-phrase__confirm">
+      <ThreeStepProgressBar
+        stage={threeStepStages.RECOVERY_PHRASE_CONFIRM}
+        marginBottom={4}
+      />
      <Box
        justifyContent={JUSTIFY_CONTENT.CENTER}
        textAlign={TEXT_ALIGN.CENTER}
@ -81,11 +84,12 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
        inputValue={phraseElements}
        indicesToCheck={indicesToCheck}
      />
-      <div className="recovery-phrase__footer">
+      <div className="recovery-phrase__footer__confirm">
        <Button
          data-testid="recovery-phrase-confirm"
          type="primary"
-          className="recovery-phrase__footer--button"
+          large
+          className="recovery-phrase__footer__confirm--button"
          onClick={() => {
            history.push(ONBOARDING_COMPLETION_ROUTE);
          }}
--- a/ui/pages/onboarding-flow/recovery-phrase/index.scss
+++ b/ui/pages/onboarding-flow/recovery-phrase/index.scss
@ -1,22 +1,42 @@
 .recovery-phrase {
-  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__header {
+    max-width: 420px;
+  }

  &__tips {
    flex-direction: column;
+    max-width: 420px;
+    margin: 0 auto;

    ul {
      list-style: disc;
      margin-left: 20px;
+      margin-bottom: 24px;
    }
  }

  &__chips {
    display: grid;
-    grid-template-columns: 190px 190px 190px;
    justify-items: center;
    align-items: center;
    row-gap: 16px;

+    @media screen and (max-width: 460px) {
+      grid-template-columns: 198px;
+    }
+
+    @media screen and (min-width: 460px) and (max-width: $break-small) {
+      grid-template-columns: 181px 181px;
+    }
+
+    @media screen and (min-width: $break-large) {
+      grid-template-columns: 166px 166px 166px;
+    }
+
    &--hidden {
      filter: blur(5px);
    }
@ -24,6 +44,7 @@

  &__secret {
    position: relative;
+    width: 100%;
  }

  &__secret-blocker {
@ -62,11 +83,38 @@
    flex-direction: column;
    justify-content: center;
    align-items: center;
+    width: 100%;
+
+    @media screen and (max-width: $break-small) {
+      margin-inline-start: 40px;
+      margin-inline-end: 40px;
+      margin-bottom: 40px;
+    }
+
+    &__confirm {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+
+      @media screen and (min-width: $break-small) {
+        margin-top: 20px;
+      }
+
+      &--button {
+        align-self: center;
+        width: 100%;
+        max-width: 300px;
+      }
+    }

    &--button {
-      width: 50%;
-      padding: 20px;
      align-self: center;
+
+      @media screen and (min-width: $break-large) {
+        max-width: 300px;
+      }
    }

    &__copy-and-hide {
@ -78,6 +126,10 @@
        display: flex;
        flex-direction: row;
        justify-content: space-between;
+
+        @media screen and (min-width: $break-large) {
+          justify-content: space-around;
+        }
      }

      &__button {
@ -100,6 +152,11 @@
          justify-content: flex-end;
        }

+        @media screen and (max-width: $break-small) {
+          justify-content: center;
+          width: 100%;
+        }
+
        svg {
          width: 15px;
        }
@ -128,4 +185,12 @@
      height: 32px;
    }
  }
+
+  &__confirm {
+    @media screen and (min-width: $break-large) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
 }
--- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
@ -35,7 +35,11 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
        textAlign={TEXT_ALIGN.CENTER}
        marginBottom={4}
      >
-        <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
+        <Typography
+          variant={TYPOGRAPHY.H2}
+          fontWeight={FONT_WEIGHT.BOLD}
+          className="recovery-phrase__header"
+        >
          {t('seedPhraseWriteDownHeader')}
        </Typography>
      </Box>
@ -49,7 +53,6 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
        </Typography>
      </Box>
      <Box
-        justifyContent={JUSTIFY_CONTENT.SPACE_EVENLY}
        textAlign={TEXT_ALIGN.LEFT}
        marginBottom={4}
        className="recovery-phrase__tips"
--- a/ui/pages/onboarding-flow/secure-your-wallet/index.scss
+++ b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
@ -3,17 +3,29 @@
  justify-content: center;
  align-items: center;
  flex-direction: column;
-  max-width: 1000px;
-  max-height: 1300px;

-  &__details {
-    max-width: 550px;
-    padding-inline-end: 10px;
+  &__video {
+    max-width: 100%;
+    border-radius: 8px;
  }

  &__actions {
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+
+    @media screen and (min-width: $break-large) {
+      flex-direction: row;
+    }
+
    button {
-      margin: 16px;
+      margin-bottom: 16px;
+
+      @media screen and (min-width: $break-large) {
+        + button {
+          margin-left: 16px;
+        }
+      }
    }
  }

@ -21,7 +33,7 @@
    list-style: disc inside;

    li {
-      font-size: 18px;
+      @include H4;
    }
  }

@ -29,6 +41,10 @@
    background-color: var(--color-primary-muted);
    padding: 12px;
    border-radius: 10px;
+
+    @media screen and (min-width: $break-large) {
+      margin-inline-end: 43px;
+    }
  }
 }

--- a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
+++ b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
@ -55,12 +55,14 @@ export default function SecureYourWallet() {
      {showSkipSRPBackupPopover && (
        <SkipSRPBackup handleClose={() => setShowSkipSRPBackupPopover(false)} />
      )}
-      <ThreeStepProgressBar stage={threeStepStages.RECOVERY_PHRASE_VIDEO} />
+      <ThreeStepProgressBar
+        stage={threeStepStages.RECOVERY_PHRASE_VIDEO}
+        marginBottom={4}
+      />
      <Box
        justifyContent={JUSTIFY_CONTENT.CENTER}
        textAlign={TEXT_ALIGN.CENTER}
        marginBottom={4}
-        marginTop={8}
      >
        <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
          {t('seedPhraseIntroTitle')}
@ -75,7 +77,7 @@ export default function SecureYourWallet() {
        </Typography>
      </Box>
      <Box>
-        <video controls style={{ borderRadius: '10px' }}>
+        <video className="secure-your-wallet__video" controls>
          <source
            type="video/webm"
            src="./images/videos/recovery-onboarding/video.webm"
@ -96,7 +98,6 @@ export default function SecureYourWallet() {
      </Box>
      <Box
        margin={8}
-        width="10/12"
        justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
        className="secure-your-wallet__actions"
      >
@ -119,7 +120,7 @@ export default function SecureYourWallet() {
          {t('seedPhraseIntroRecommendedButtonCopy')}
        </Button>
      </Box>
-      <Box>
+      <Box className="secure-your-wallet__desc">
        <Box marginBottom={4}>
          <Typography
            tag="p"
--- a/ui/pages/onboarding-flow/welcome/index.scss
+++ b/ui/pages/onboarding-flow/welcome/index.scss
@ -1,8 +1,6 @@
@import "./react-gallery/carousel.min.css";

 .onboarding-welcome {
-  width: 600px;
-
  .control-dots .dot {
    background: var(--color-icon-muted);
    box-shadow: none;
@ -16,6 +14,10 @@
  .carousel.carousel-slider .control-arrow {
    opacity: 1;
    color: var(--color-icon-default);
+
+    @media screen and (min-width: $break-large) {
+      padding: 40px;
+    }
  }

  .carousel .control-next.control-arrow::before {
@ -42,7 +44,7 @@
  }

  &__buttons {
-    max-width: 50%;
+    max-width: 300px;
    margin: 40px auto 0 auto;

    li {
--- a/ui/pages/onboarding-flow/welcome/welcome.js
+++ b/ui/pages/onboarding-flow/welcome/welcome.js
@ -42,7 +42,7 @@ export default function OnboardingWelcome() {
          >
            {t('welcomeToMetaMask')}
          </Typography>
-          <Typography align={TEXT_ALIGN.CENTER}>
+          <Typography align={TEXT_ALIGN.CENTER} marginLeft={6} marginRight={6}>
            {t('welcomeToMetaMaskIntro')}
          </Typography>
          <div className="onboarding-welcome__mascot">
--- a/ui/pages/unlock-page/index.scss
+++ b/ui/pages/unlock-page/index.scss
@ -1,4 +1,5 @@
 .unlock-page {
+  color: var(--color-text-default);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
@ -6,14 +7,13 @@
  width: 357px;
  padding: 30px;
  font-weight: 400;
-  color: var(--color-text-default);

  &__container {
-    background: var(--color-background-default);
    display: flex;
    align-self: stretch;
    justify-content: center;
    flex: 1 0 auto;
+    background: var(--color-background-default);
  }

  &__mascot-container {