normalize app component font styles (#9695)

4 years ago · fe69182056
parent c130a7ae6c
commit fe69182056
58 changed files with 325 additions and 259 deletions
--- a/ui/app/components/app/account-list-item/index.scss
+++ b/ui/app/components/app/account-list-item/index.scss
@ -7,7 +7,8 @@
  }

  &__account-name {
-    font-size: 16px;
+    @include Paragraph;
+
    margin-left: 8px;
  }

--- a/ui/app/components/app/account-menu/index.scss
+++ b/ui/app/components/app/account-menu/index.scss
@ -56,12 +56,12 @@
    }

    &__text {
-      font-size: 16px;
-      line-height: 21px;
+      @include Paragraph;
    }

    &__subtext {
-      font-size: 12px;
+      @include H7;
+
      padding: 5px 0 0 30px;
    }
  }
@ -98,13 +98,13 @@
  }

  &__lock-button {
+    @include H7;
+
    border: 1px solid $dusty-gray;
    background-color: transparent;
    color: $white;
    border-radius: 4px;
-    font-size: 12px;
-    line-height: 23px;
-    padding: 0 24px;
+    padding: 3.5px 24px;
  }

  &__item-icon {
@ -138,9 +138,9 @@
    }

    .keyring-label {
+      @include H9;
+
      z-index: 1;
-      font-size: 8px;
-      line-height: 8px;
      border-radius: 10px;
      padding: 4px;
      text-align: center;
@ -151,11 +151,14 @@
      color: $black;
      font-weight: normal;
      letter-spacing: 0.5px;
+      display: flex;
+      align-items: center;
    }
  }

  &__no-accounts {
-    font-size: 0.8em;
+    @include H6;
+
    padding: 16px 14px;
  }

@ -215,8 +218,9 @@
  }

  &__name {
+    @include H4;
+
    color: $white;
-    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
@ -224,13 +228,14 @@
  }

  &__balance {
+    @include H6;
+
    color: $dusty-gray;
-    font-size: 14px;
  }

  &__action {
-    font-size: 16px;
-    line-height: 18px;
+    @include Paragraph;
+
    cursor: pointer;
  }

--- a/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
+++ b/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
@ -26,9 +26,10 @@
  }

  &__error {
+    @include H6;
+
    margin-bottom: 16px;
    padding: 16px;
-    font-size: 14px;
    border: 1px solid $accent-red;
    background: #f8eae8;
    border-radius: 3px;
@ -47,8 +48,9 @@
  }

  &__checkbox-label {
+    @include H7;
+
    display: flex;
-    font-size: 12px;
    margin-top: auto;
    margin-bottom: auto;
    color: $Grey-500;
--- a/ui/app/components/app/asset-list-item/asset-list-item.scss
+++ b/ui/app/components/app/asset-list-item/asset-list-item.scss
@ -15,8 +15,9 @@
  }

  .list-item__subheading {
+    @include H6;
+
    margin-top: 6px;
-    font-size: 14px;
  }

  &__warning {
@ -25,10 +26,11 @@
  }

  & &__send-token-button {
+    @include H6;
+
    display: none;
    text-transform: uppercase;
    width: fit-content;
-    font-size: 14px;
  }

  @media (min-width: 576px) {
--- a/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/index.scss
@ -6,7 +6,8 @@
  align-items: center;

  &__label {
-    font-size: 0.75rem;
+    @include H7;
+
    font-weight: 500;
    color: $scorpion;
    text-transform: uppercase;
@ -19,7 +20,8 @@
  }

  &__primary {
-    font-size: 1.5rem;
+    @include H3;
+
    justify-content: flex-end;
  }

@ -29,7 +31,8 @@
  }

  &__header-text {
-    font-size: 0.75rem;
+    @include H7;
+
    text-transform: uppercase;
    margin-bottom: 6px;
    color: $scorpion;
@ -40,7 +43,7 @@
    }

    &--total {
-      font-size: 0.625rem;
+      @include H8;
    }
  }

@ -50,8 +53,9 @@

  .custom-nonce-input {
    input {
+      @include Paragraph;
+
      width: 90px;
-      font-size: 1rem;
    }
  }
 }
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
@ -10,9 +10,10 @@
  }

  &__action {
+    @include H7;
+
    text-transform: uppercase;
    color: $oslo-gray;
-    font-size: 0.75rem;
    padding: 3px 8px;
    border: 1px solid $oslo-gray;
    border-radius: 4px;
@ -35,7 +36,8 @@
  }

  &__title-text {
-    font-size: 2.25rem;
+    @include H1;
+
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
@ -12,7 +12,8 @@
  }

  &__warning {
-    font-size: 0.75rem;
+    @include H7;
+
    color: #5f5922;
  }
 }
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
@ -23,18 +23,20 @@
  }

  &__data-box {
+    @include H7;
+
    background-color: #f9fafa;
    padding: 12px;
-    font-size: 0.75rem;
    margin-bottom: 16px;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;

    &-label {
+      @include H7;
+
      text-transform: uppercase;
      padding: 8px 0 12px;
-      font-size: 12px;
    }
  }

@ -61,7 +63,8 @@
  }

  &__function-type {
-    font-size: 0.875rem;
+    @include H6;
+
    font-weight: 500;
    text-transform: capitalize;
    color: $black;
@ -69,7 +72,8 @@
  }

  &__tab {
-    font-size: 0.75rem;
+    @include H7;
+
    color: #8c8e94;
    text-transform: uppercase;
    margin: 0 8px;
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss
@ -23,10 +23,10 @@
  }

  &__back-button {
+    @include Paragraph;
+
    color: #2f9ae0;
-    font-size: 1rem;
    cursor: pointer;
-    font-weight: 400;
    padding-left: 5px;
  }

@ -38,7 +38,8 @@
  }

  &__address {
+    @include H6;
+
    margin-left: 6px;
-    font-size: 14px;
  }
 }
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
@ -36,13 +36,15 @@
  }

  &__navtext {
-    font-size: 9px;
+    @include H9;
+
    font-weight: bold;
  }

  &__longtext {
+    @include H9;
+
    color: $oslo-gray;
-    font-size: 8px;
  }

  &__imageflip {
--- a/ui/app/components/app/connected-accounts-list/index.scss
+++ b/ui/app/components/app/connected-accounts-list/index.scss
@ -8,15 +8,15 @@
  }

  &__account-name {
+    @include H6;
+
    display: inline;
    font-weight: bold;
-    font-size: 14px;
-    line-height: 20px;
  }

  %account-status-typography {
-    font-size: 12px;
-    line-height: 17px;
+    @include H7;
+
    padding-top: 4px;
  }

@ -67,9 +67,9 @@

 .connected-accounts-options {
  &__button {
+    font-size: $font-size-h4;
    background: inherit;
    color: $Grey-500;
-    font-size: 22px;
  }
 }

--- a/ui/app/components/app/connected-accounts-permissions/index.scss
+++ b/ui/app/components/app/connected-accounts-permissions/index.scss
@ -1,8 +1,8 @@
 .connected-accounts-permissions {
+  @include H7;
+
  display: flex;
  flex-direction: column;
-  font-size: 12px;
-  line-height: 17px;
  color: $Grey-500;

  strong {
@ -14,18 +14,17 @@
  }

  &__header {
+    @include H6;
+
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
-    font-size: 14px;
-    line-height: 20px;
    color: #24292e;

    button {
-      font-size: 16px;
-      line-height: 24px;
+      font-size: $font-size-paragraph;
      background: none;
      padding: 0;
      margin-left: 8px;
@ -41,8 +40,8 @@
  }

  & &__checkbox {
+    font-size: $font-size-h4;
    margin: 0 8px 0 0;
-    font-size: 18px;
  }

  &__list-container {
--- a/ui/app/components/app/connected-sites-list/index.scss
+++ b/ui/app/components/app/connected-sites-list/index.scss
@ -16,11 +16,12 @@
  }

  &__domain-info {
+    @include H7;
+
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
-    font-size: 12px;
  }

  &__domain-name {
--- a/ui/app/components/app/connected-status-indicator/index.scss
+++ b/ui/app/components/app/connected-status-indicator/index.scss
@ -51,7 +51,8 @@
  }

  &__text {
-    font-size: 10px;
+    @include H8;
+
    color: $Grey-500;
    margin-left: 6px;
    white-space: nowrap;
--- a/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss
+++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss
@ -11,14 +11,15 @@
    width: 47.5%;

    &__label {
+      @include H7;
+
      color: #313b5e;
-      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      @media screen and (max-width: 576px) {
-        font-size: 10px;
+        @include H8;
      }

      .fa-info-circle {
@ -32,12 +33,14 @@
    }

    &__error-text {
-      font-size: 12px;
+      @include H7;
+
      color: red;
    }

    &__warning-text {
-      font-size: 12px;
+      @include H7;
+
      color: orange;
    }

@ -47,11 +50,12 @@

    &__input {
      /*rtl:ignore*/
+      @include Paragraph;
+
      direction: ltr;
      border: 1px solid $dusty-gray;
      border-radius: 4px;
      color: $mid-gray;
-      font-size: 16px;
      height: 24px;
      width: 100%;
      padding-left: 8px;
@ -68,6 +72,8 @@
    }

    &__input-arrows {
+      @include H6;
+
      position: absolute;
      top: 7px;

@ -80,7 +86,6 @@
      display: flex;
      flex-direction: column;
      color: #9b9b9b;
-      font-size: 0.8em;
      border-bottom-right-radius: 4px;
      cursor: pointer;

@ -102,7 +107,7 @@
      }

      i {
-        font-size: 10px;
+        font-size: $font-size-h8;
      }
    }

--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@ -18,42 +18,47 @@

    &__titles,
    &__container {
+      @include H7;
+
      display: flex;
      flex-flow: row;
      justify-content: space-between;
-      font-size: 12px;
      color: #888ea3;
    }

    &__container {
-      font-size: 16px;
+      @include Paragraph;
+
      margin-top: 0;
    }

    &__fee {
-      font-size: 16px;
+      @include Paragraph;
+
      color: #313a5e;
    }

    &__time-remaining {
+      @include Paragraph;
+
      /*rtl:ignore*/
      direction: ltr;
      color: #313a5e;
-      font-size: 16px;

      .minutes-num,
      .seconds-num {
-        font-size: 16px;
+        @include Paragraph;
      }

      .seconds-num {
+        @include Paragraph;
+
        margin-left: 7px;
-        font-size: 16px;
      }

      .minutes-label,
      .seconds-label {
-        font-size: 16px;
+        @include Paragraph;
      }
    }
  }
@ -67,12 +72,15 @@
    position: relative;

    &__title {
-      font-size: 12px;
+      @include H7;
+
      color: #313a5e;
      margin-left: 22px;
    }

    &__speed-buttons {
+      @include H8;
+
      position: absolute;
      bottom: 13px;
      display: flex;
@ -80,7 +88,6 @@
      padding-left: 20px;
      padding-right: 19px;
      width: 100%;
-      font-size: 10px;
      color: #888ea3;
    }

--- a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
@ -8,22 +8,25 @@
  border-bottom: 1px solid #d2d8dd;

  &__title {
+    @include Paragraph;
+
    margin-top: 19px;
-    font-size: 16px;
    color: $black;
  }

  &__blurb {
+    @include H7;
+
    width: 95%;
-    font-size: 12px;
    color: $black;
    margin-top: 5px;
    margin-bottom: 15px;
  }

  &__footer-blurb {
+    @include H7;
+
    width: 95%;
-    font-size: 12px;
    color: #979797;
    margin-top: 15px;
  }
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
@ -31,7 +31,8 @@
    }

    &__header-close-text {
-      font-size: 14px;
+      @include H6;
+
      color: #4eade7;
      position: absolute;
      top: 4px;
@ -42,10 +43,10 @@
    }

    &__title {
+      @include H5;
+
      color: $black;
-      font-size: 16px;
      font-weight: 500;
-      line-height: 16px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
@ -61,8 +62,9 @@
    }

    &__tab {
+      @include H6;
+
      width: 100%;
-      font-size: 14px;

      &:last-of-type {
        margin-right: 0;
@ -88,13 +90,14 @@

  &__info-row,
  &__info-row--fade {
+    @include H7;
+
    width: 100%;
    background: $polar;
    padding: 15px 21px;
    display: flex;
    flex-flow: column;
    color: $scorpion;
-    font-size: 12px;

    &__send-info,
    &__transaction-info,
@ -111,19 +114,20 @@

    &__total-info {
      &__label {
-        font-size: 16px;
+        @include Paragraph;

        @media screen and (max-width: $break-small) {
-          font-size: 14px;
+          @include H6;
        }
      }

      &__value {
-        font-size: 16px;
+        @include Paragraph;
+
        font-weight: bold;

        @media screen and (max-width: $break-small) {
-          font-size: 14px;
+          @include H6;
        }
      }
    }
@ -131,11 +135,11 @@
    &__transaction-info,
    &__send-info {
      &__label {
-        font-size: 12px;
+        @include H7;
      }

      &__value {
-        font-size: 12px;
+        @include H6;
      }
    }
  }
--- a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
@ -7,7 +7,8 @@
  padding-right: 20px;

  &__primary-currency {
-    font-size: 18px;
+    @include H4;
+
    height: 20.5px;
    margin-bottom: 7.5px;
  }
@ -24,9 +25,10 @@

  .button-group__button,
  .button-group__button--active {
+    @include H7;
+
    height: 130px;
    max-width: 108px;
-    font-size: 12px;
    flex-direction: column;
    align-items: center;
    display: flex;
@ -66,18 +68,18 @@
 .gas-price-button-group--small {
  display: flex;
  justify-content: stretch;
-  height: 54px;
+  min-height: 54px;

  @media screen and (max-width: $break-small) {
    max-width: 260px;
  }

  &__button-fiat-price {
-    font-size: 13px;
+    @include H6;
  }

  &__button-label {
-    font-size: 16px;
+    @include Paragraph;
  }

  &__label {
@ -87,22 +89,22 @@
  }

  &__primary-currency {
-    font-size: 12px;
-    line-height: 12px;
+    @include H7;
+
    padding-bottom: 2px;

    @media screen and (max-width: 575px) {
-      font-size: 10px;
+      @include H8;
    }
  }

  &__secondary-currency {
-    font-size: 12px;
-    line-height: 12px;
+    @include H7;
+
    padding-bottom: 2px;

    @media screen and (max-width: 575px) {
-      font-size: 10px;
+      @include H8;
    }
  }

@ -114,7 +116,7 @@
  .button-group__button--active {
    background: white;
    color: $scorpion;
-    padding: 0 4px;
+    padding: 4px;

    div {
      display: flex;
@ -150,26 +152,28 @@
  width: 95%;

  &__button-fiat-price {
-    font-size: 13px;
+    @include H6;
  }

  &__button-label {
-    font-size: 16px;
+    @include Paragraph;
  }

  &__label {
+    @include H8;
+
    font-weight: 500;
-    font-size: 10px;
    text-transform: capitalize;
  }

  &__primary-currency {
-    font-size: 11px;
+    @include H7;
+
    margin-top: 3px;
  }

  &__secondary-currency {
-    font-size: 11px;
+    @include H7;
  }

  &__loading-container {
@ -177,7 +181,8 @@
  }

  &__time-estimate {
-    font-size: 12px;
+    @include H7;
+
    font-weight: 500;
    margin-top: 4px;
    color: $black;
@ -238,9 +243,10 @@
    }

    i {
+      @include H7;
+
      display: flex;
      color: $primary-blue;
-      font-size: 12px;
    }
  }
 }
--- a/ui/app/components/app/gas-customization/gas-price-chart/index.scss
+++ b/ui/app/components/app/gas-customization/gas-price-chart/index.scss
@ -17,10 +17,10 @@
  .tick text,
  .c3-axis-x-label,
  .c3-axis-y-label {
-    font-style: normal;
-    font-weight: bold;
+    @include H9;
+
    line-height: normal;
-    font-size: 8px;
+    font-weight: bold;
    text-align: center;
    fill: #9a9ca6 !important;
  }
@ -52,10 +52,9 @@
  }

  .custom-tooltip th {
-    font-style: normal;
+    @include H8;
+
    font-weight: 500;
-    line-height: normal;
-    font-size: 10px;
    text-align: center;
    padding: 3px;
    color: #fff;
--- a/ui/app/components/app/gas-customization/gas-slider/index.scss
+++ b/ui/app/components/app/gas-customization/gas-slider/index.scss
@ -45,9 +45,10 @@
  }

  &__labels {
+    @include H7;
+
    display: flex;
    justify-content: space-between;
-    font-size: 12px;
    margin-top: -6px;
    color: $mid-gray;
  }
--- a/ui/app/components/app/home-notification/index.scss
+++ b/ui/app/components/app/home-notification/index.scss
@ -39,9 +39,8 @@
  }

  &__text {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 12px;
+    @include H7;
+
    color: $white;
    margin-left: 10px;
    margin-right: 8px;
@ -115,9 +114,8 @@
  }

  &__content {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 12px;
+    @include H7;
+
    color: $white;
    text-align: left;
    display: inline-block;
--- a/ui/app/components/app/info-box/index.scss
+++ b/ui/app/components/app/info-box/index.scss
@ -19,6 +19,6 @@
  }

  &__description {
-    font-size: 0.75rem;
+    @include H7;
  }
 }
--- a/ui/app/components/app/menu-bar/index.scss
+++ b/ui/app/components/app/menu-bar/index.scss
@ -29,7 +29,8 @@
  }

  &__explorer-origin {
+    @include H7;
+
    color: $Grey-500;
-    font-size: 12px;
  }
 }
--- a/ui/app/components/app/modal/modal-content/index.scss
+++ b/ui/app/components/app/modal/modal-content/index.scss
@ -6,14 +6,16 @@
  padding: 16px 0;

  &__title {
-    font-size: 1.5rem;
+    @include H3;
+
    font-weight: 500;
    padding: 16px 0;
    text-align: center;
  }

  &__description {
+    @include H6;
+
    text-align: center;
-    font-size: 0.875rem;
  }
 }
--- a/ui/app/components/app/modals/account-details-modal/index.scss
+++ b/ui/app/components/app/modals/account-details-modal/index.scss
@ -1,7 +1,8 @@
 .account-details-modal {
  &__name {
+    @include H4;
+
    margin-top: 9px;
-    font-size: 20px;
  }

  & &__button {
@ -18,8 +19,9 @@
  }

  & .qr-header {
+    @include H4;
+
    margin-top: 9px;
-    font-size: 20px;
  }

  & .qr-wrapper {
--- a/ui/app/components/app/modals/account-modal-container/index.scss
+++ b/ui/app/components/app/modals/account-modal-container/index.scss
@ -22,13 +22,14 @@
  }

  &__back-text {
-    font-size: 14px;
-    line-height: 18px;
+    @include H6;
+
    padding-left: 3px;
  }

  &__close {
-    font-size: 40px;
+    @include H1;
+
    background-color: transparent;
    color: $dusty-gray;
    position: absolute;
--- a/ui/app/components/app/modals/add-to-addressbook-modal/index.scss
+++ b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss
@ -22,12 +22,13 @@
  }

  &__input {
+    @include H4;
+
    background: $white;
    border: 1px solid $Grey-100;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
-    font-size: 1.25rem;
    margin-top: 0.75rem;

    &::placeholder {
--- a/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
+++ b/ui/app/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
@ -7,11 +7,12 @@
  padding: 12px;

  &__eth {
-    font-size: 1.5rem;
+    @include H3;
+
    font-weight: 500;
  }

  &__fiat {
-    font-size: 0.75rem;
+    @include H7;
  }
 }
--- a/ui/app/components/app/modals/cancel-transaction/index.scss
+++ b/ui/app/components/app/modals/cancel-transaction/index.scss
@ -8,8 +8,9 @@
  }

  &__description {
+    @include H6;
+
    text-align: center;
-    font-size: 0.875rem;
  }

  &__cancel-transaction-gas-fee-container {
--- a/ui/app/components/app/modals/confirm-remove-account/index.scss
+++ b/ui/app/components/app/modals/confirm-remove-account/index.scss
@ -1,7 +1,8 @@
 .confirm-remove-account {
  &__description {
+    @include H6;
+
    text-align: center;
-    font-size: 0.875rem;
  }

  &__account {
@ -19,8 +20,9 @@

    &__name,
    &__address {
+      @include H6;
+
      margin-right: 10px;
-      font-size: 14px;
    }

    &__name {
@ -31,7 +33,8 @@
    }

    &__label {
-      font-size: 11px;
+      @include H8;
+
      display: block;
      color: #9b9b9b;
    }
--- a/ui/app/components/app/modals/deposit-ether-modal/index.scss
+++ b/ui/app/components/app/modals/deposit-ether-modal/index.scss
@ -15,15 +15,15 @@
    align-items: flex-start;

    &__title {
+      @include H3;
+
      color: $white;
-      font-size: 24px;
-      line-height: 32px;
    }

    &__description {
+      @include Paragraph;
+
      color: $white;
-      font-size: 16px;
-      line-height: 22px;
      margin-top: 10px;
    }

@ -114,13 +114,12 @@
      }

      &__title {
-        font-size: 20px;
-        line-height: 30px;
+        @include H4;
      }

      &__text {
-        font-size: 14px;
-        line-height: 22px;
+        @include H6;
+
        margin-top: 7px;
      }
    }
@ -142,21 +141,4 @@
  &__deposit-button {
    width: 257px !important;
  }
-
-  .simple-dropdown {
-    color: #5b5d67;
-    font-size: 16px;
-    line-height: 21px;
-    border: 1px solid #d8d8d8;
-    background-color: #fff;
-    text-align: center;
-    width: 100%;
-    height: 45px;
-    line-height: 44px;
-    font-weight: 300;
-  }
-
-  .simple-dropdown__selected {
-    text-align: center;
-  }
 }
--- a/ui/app/components/app/modals/edit-approval-permission/index.scss
+++ b/ui/app/components/app/modals/edit-approval-permission/index.scss
@ -24,9 +24,9 @@
  }

  &__title {
+    @include H4;
+
    font-weight: bold;
-    font-size: 18px;
-    line-height: 25px;
  }

  &__account-info {
@ -35,8 +35,9 @@

    &__account,
    &__balance {
+      @include H6;
+
      font-weight: normal;
-      font-size: 14px;
      color: #24292e;
    }

@ -60,16 +61,16 @@
    padding: 24px;

    &__title {
+      @include H6;
+
      font-weight: bold;
-      font-size: 14px;
-      line-height: 20px;
      color: #24292e;
    }

    &__description {
+      @include H7;
+
      font-weight: normal;
-      font-size: 12px;
-      line-height: 17px;
      color: #6a737d;
      margin-top: 8px;
    }
@ -91,9 +92,9 @@

    &__option-label,
    &__option-label--selected {
+      @include H6;
+
      font-weight: normal;
-      font-size: 14px;
-      line-height: 20px;
      color: #474b4d;
    }

@ -102,18 +103,16 @@
    }

    &__option-description {
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 17px;
+      @include H7;
+
      color: #6a737d;
      margin-top: 8px;
      margin-bottom: 6px;
    }

    &__option-value {
-      font-weight: normal;
-      font-size: 18px;
-      line-height: 25px;
+      @include H4;
+
      color: #24292e;
    }

--- a/ui/app/components/app/modals/export-private-key-modal/index.scss
+++ b/ui/app/components/app/modals/export-private-key-modal/index.scss
@ -1,8 +1,9 @@
 .export-private-key-modal {
  &__body-title {
+    @include H4;
+
    margin-top: 16px;
    margin-bottom: 16px;
-    font-size: 18px;
  }

  &__divider {
@ -13,8 +14,9 @@
  }

  &__account-name {
+    @include H4;
+
    margin-top: 9px;
-    font-size: 20px;
  }

  &__password {
@ -24,9 +26,9 @@

  &__password-label,
  &__password--error {
+    @include H6;
+
    color: $scorpion;
-    font-size: 14px;
-    line-height: 18px;
    margin-bottom: 10px;
  }

@ -36,9 +38,9 @@
  }

  &__password-input {
+    @include Paragraph;
+
    padding: 10px 0 13px 17px;
-    font-size: 16px;
-    line-height: 21px;
    width: 291px;
    height: 44px;
  }
@ -48,11 +50,11 @@
  }

  &__password--warning {
+    @include H7;
+
    border-radius: 8px;
    background-color: #fff6f6;
-    font-size: 12px;
    font-weight: 500;
-    line-height: 15px;
    color: $crimson;
    width: 292px;
    padding: 9px 15px;
@ -67,9 +69,9 @@
  }

  &__password-display-textarea {
+    @include Paragraph;
+
    color: $crimson;
-    font-size: 16px;
-    line-height: 21px;
    border: none;
    height: 75px;
    width: 100%;
--- a/ui/app/components/app/modals/hide-token-confirmation-modal/index.scss
+++ b/ui/app/components/app/modals/hide-token-confirmation-modal/index.scss
@ -16,29 +16,29 @@
  }

  &__symbol {
+    @include Paragraph;
+
    color: $tundora;
-    font-size: 16px;
-    line-height: 24px;
    text-align: center;
    margin-bottom: 7.5px;
  }

  &__title {
+    @include H3;
+
    height: 30px;
    width: 271.28px;
    color: $tundora;
-    font-size: 22px;
-    line-height: 30px;
    text-align: center;
    margin-bottom: 10.5px;
  }

  &__copy {
-    height: 41px;
+    @include Paragraph;
+
+    min-height: 41px;
    width: 318px;
    color: $scorpion;
-    font-size: 14px;
-    line-height: 18px;
    text-align: center;
  }

--- a/ui/app/components/app/modals/metametrics-opt-in-modal/index.scss
+++ b/ui/app/components/app/modals/metametrics-opt-in-modal/index.scss
@ -12,7 +12,7 @@


  .metametrics-opt-in__title {
-    font-size: 38px;
+    @include H1;
  }

  .metametrics-opt-in__content {
--- a/ui/app/components/app/modals/new-account-modal/index.scss
+++ b/ui/app/components/app/modals/new-account-modal/index.scss
@ -21,9 +21,10 @@
    }

    &__header-close {
+      @include H4;
+
      color: #24292e;
      background: none;
-      font-size: 1.1rem;
    }
  }

@ -33,12 +34,13 @@
  }

  &__input {
+    @include H4;
+
    background: $white;
    border: 1px solid $Grey-100;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
-    font-size: 1.25rem;
    margin-top: 0.75rem;

    &::placeholder {
--- a/ui/app/components/app/modals/qr-scanner/index.scss
+++ b/ui/app/components/app/modals/qr-scanner/index.scss
@ -7,7 +7,8 @@
  border-radius: 8px;

  &__title {
-    font-size: 1.5rem;
+    @include H3;
+
    font-weight: 500;
    padding: 16px 0;
    text-align: center;
@ -34,21 +35,24 @@
  }

  &__status {
+    @include H6;
+
    text-align: center;
-    font-size: 14px;
    padding: 15px;
  }

  &__image {
-    font-size: 1.5rem;
+    @include H3;
+
    font-weight: 500;
    padding: 16px 0 0;
    text-align: center;
  }

  &__error {
+    @include Paragraph;
+
    text-align: center;
-    font-size: 16px;
    padding: 15px;
  }

--- a/ui/app/components/app/modals/reject-transactions/index.scss
+++ b/ui/app/components/app/modals/reject-transactions/index.scss
@ -1,6 +1,7 @@
 .reject-transactions {
  &__description {
+    @include Paragraph;
+
    text-align: center;
-    font-size: 0.875rem;
  }
 }
--- a/ui/app/components/app/modals/transaction-confirmed/index.scss
+++ b/ui/app/components/app/modals/transaction-confirmed/index.scss
@ -1,14 +1,16 @@
 .transaction-confirmed {
  &__title {
-    font-size: 1.5rem;
+    @include H3;
+
    font-weight: 500;
    padding: 16px 0;
    text-align: center;
  }

  &__description {
+    @include H6;
+
    text-align: center;
-    font-size: 0.875rem;
  }

  &__content {
--- a/ui/app/components/app/multiple-notifications/index.scss
+++ b/ui/app/components/app/multiple-notifications/index.scss
@ -27,8 +27,9 @@
      visibility: visible;

      &:hover {
+        @include H4;
+
        color: #b0d7f2;
-        font-size: 1.1rem;
      }
    }
  }
--- a/ui/app/components/app/network-display/index.scss
+++ b/ui/app/components/app/network-display/index.scss
@ -33,7 +33,8 @@
  }

  &__name {
-    font-size: 0.75rem;
+    @include H7;
+
    padding-left: 5px;
  }

--- a/ui/app/components/app/permission-page-container/index.scss
+++ b/ui/app/components/app/permission-page-container/index.scss
@ -35,7 +35,6 @@
  &__title {
    @include H4;

-    line-height: 25px;
    text-align: center;
    margin-top: 32px;
    width: 100%;
@ -67,7 +66,8 @@
      align-items: center;

      label {
-        font-size: 14px;
+        @include H6;
+
        margin-left: 16px;
        color: $Black-100;
      }
@ -88,7 +88,6 @@
  &__permissions-header {
    @include H6;

-    line-height: 20px;
    color: #6a737d;
  }

--- a/ui/app/components/app/permissions-connect-footer/index.scss
+++ b/ui/app/components/app/permissions-connect-footer/index.scss
@ -7,7 +7,6 @@
  &__text {
    @include H7;

-    line-height: 17px;
    color: #6a737d;
    display: flex;
    margin-top: 10px;
--- a/ui/app/components/app/permissions-connect-header/index.scss
+++ b/ui/app/components/app/permissions-connect-header/index.scss
@ -30,7 +30,7 @@

    text-align: center;
    color: $Black-100;
-    margin-top: 14px;
+    margin-top: 16px;
  }

  &__text,
@ -45,6 +45,7 @@
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
+    margin-top: 8px;

    /*rtl:ignore*/
    direction: rtl;
--- a/ui/app/components/app/selected-account/index.scss
+++ b/ui/app/components/app/selected-account/index.scss
@ -10,10 +10,10 @@
  }

  &__name {
+    @include H5;
+
    width: 100%;
-    font-size: 1rem;
    font-weight: 500;
-    line-height: 19px;
    color: $black;
    text-overflow: ellipsis;
    overflow: hidden;
@ -23,8 +23,8 @@
  }

  &__address {
-    font-size: 0.75rem;
-    line-height: 0.75rem;
+    @include H7;
+
    color: #989a9b;
  }

--- a/ui/app/components/app/sidebars/sidebar-content.scss
+++ b/ui/app/components/app/sidebars/sidebar-content.scss
@ -57,7 +57,7 @@
          max-width: 318px;

          &__time-estimate {
-            font-size: 12px;
+            @include H7;
          }
        }
      }
--- a/ui/app/components/app/signature-request-original/index.scss
+++ b/ui/app/components/app/signature-request-original/index.scss
@ -61,9 +61,9 @@
  }

  &__header__text {
+    @include H3;
+
    color: #5b5d67;
-    font-size: 22px;
-    line-height: 29px;
    z-index: 3;
  }

@ -96,14 +96,14 @@
  }

  &__account-text {
-    font-size: 14px;
+    @include H6;
  }

  &__account-item {
+    @include H7;
+
    height: 22px;
    background-color: $white;
-    line-height: 16px;
-    font-size: 12px;
    width: 124px;

    .account-list-item {
@ -129,8 +129,9 @@
  }

  &__balance-text {
+    @include H6;
+
    text-align: right;
-    font-size: 14px;
  }

  &__balance-value {
@ -157,19 +158,19 @@
  }

  &__headline {
+    @include H4;
+
    height: 48px;
    width: 240px;
    color: $tundora;
-    font-size: 18px;
-    line-height: 24px;
    text-align: center;
    margin-top: 20px;
  }

  &__notice,
  &__warning {
-    font-size: 14px;
-    line-height: 19px;
+    @include H6;
+
    text-align: center;
    margin-top: 41px;
    margin-bottom: 11px;
@ -200,19 +201,19 @@
  }

  &__row-title {
+    @include H5;
+
    width: 80px;
    color: $dusty-gray;
-    font-size: 16px;
-    line-height: 22px;
    margin-top: 12px;
    margin-left: 18px;
    width: 100%;
  }

  &__row-value {
+    @include H6;
+
    color: $scorpion;
-    font-size: 14px;
-    line-height: 19px;
    width: 100%;
    overflow-wrap: break-word;
    border-bottom: 1px solid #d2d8dd;
@ -227,11 +228,12 @@
  }

  &__footer {
+    @include H3;
+
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
-    font-size: 22px;
    position: relative;
    flex: 0 0 auto;
    border-top: 1px solid $geyser;
--- a/ui/app/components/app/signature-request/index.scss
+++ b/ui/app/components/app/signature-request/index.scss
@ -22,7 +22,8 @@
  }

  .network-display__name {
-    font-size: 12px;
+    @include H7;
+
    white-space: nowrap;
    font-weight: 500;
  }
@ -38,9 +39,9 @@
  min-height: min-content;

  &__title {
-    font-style: normal;
+    @include H5;
+
    font-weight: 500;
-    font-size: 18px;
  }

  &__identicon-container {
@ -73,17 +74,19 @@
  }

  &__info {
-    font-size: 12px;
+    @include H7;
  }

  &__info--bolded {
-    font-size: 16px;
+    @include Paragraph;
+
    font-weight: 500;
  }

  p {
+    @include H6;
+
    color: #999;
-    font-size: 0.8rem;
  }

  .identicon {}
--- a/ui/app/components/app/signature-request/signature-request-header/index.scss
+++ b/ui/app/components/app/signature-request/signature-request-header/index.scss
@ -1,9 +1,10 @@
 .signature-request-header {
+  @include H7;
+
  display: flex;
  padding: 1rem;
  border-bottom: 1px solid $geyser;
  justify-content: space-between;
-  font-size: 0.75rem;

  &--account,
  &--network {
@ -21,7 +22,8 @@
      }

      &__account-name {
-        font-size: 12px;
+        @include H7;
+
        font-weight: 500;
      }

--- a/ui/app/components/app/signature-request/signature-request-message/index.scss
+++ b/ui/app/components/app/signature-request/signature-request-message/index.scss
@ -4,16 +4,18 @@
  flex-direction: column;

  &__title {
+    @include H6;
+
    font-weight: 500;
-    font-size: 14px;
    color: #636778;
    margin-left: 12px;
  }

  h2 {
+    @include H6;
+
    flex: 1 1 0;
    text-align: left;
-    font-size: 0.8rem;
    border-bottom: 1px solid #d2d8dd;
    padding: 0.5rem;
    margin: 0;
@ -35,9 +37,8 @@
  }

  &__type-title {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
+    @include H6;
+
    margin-left: 12px;
    margin-top: 6px;
    margin-bottom: 10px;
--- a/ui/app/components/app/tab-bar/index.scss
+++ b/ui/app/components/app/tab-bar/index.scss
@ -5,13 +5,14 @@


  &__tab {
+    @include Paragraph;
+
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
-    font-size: 16px;
    padding: 16px 24px;
    opacity: 0.5;
    transition: opacity 200ms ease-in-out;
@ -27,7 +28,8 @@
    }

    @media screen and (max-width: 575px) {
-      font-size: 18px;
+      @include H4;
+
      padding: 24px;
      border-bottom: 1px solid $alto;
      opacity: 1;
@ -41,8 +43,9 @@
        display: none;

        @media screen and (max-width: 575px) {
+          @include H6;
+
          display: block;
-          font-size: 14px;
          font-weight: 300;
          margin-top: 8px;
          min-height: 14px;
--- a/ui/app/components/app/transaction-activity-log/index.scss
+++ b/ui/app/components/app/transaction-activity-log/index.scss
@ -54,8 +54,9 @@
  }

  &__activity-text {
+    @include H7;
+
    color: $dusty-gray;
-    font-size: 0.75rem;
    cursor: pointer;

    &:hover {
@ -73,7 +74,8 @@
  }

  &__action-link {
-    font-size: 0.75rem;
+    @include H7;
+
    cursor: pointer;
    color: $primary-blue;
  }
--- a/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.scss
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.scss
@ -1,5 +1,6 @@
 .transaction-breakdown-row {
-  font-size: 0.75rem;
+  @include H7;
+
  color: $scorpion;
  display: flex;
  justify-content: space-between;
--- a/ui/app/components/app/transaction-list-item-details/index.scss
+++ b/ui/app/components/app/transaction-list-item-details/index.scss
@ -17,7 +17,7 @@
  }

  & &__header-button {
-    font-size: 0.625rem;
+    @include H8;

    &-tooltip-container {
      display: flex !important;
--- a/ui/app/components/app/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
@ -6,7 +6,8 @@
  }

  &__secondary-currency {
-    font-size: 12px;
+    @include H7;
+
    margin-top: 4px;
    color: $Grey-500;
  }
@ -24,11 +25,11 @@
    display: flex;

    .button {
-      font-size: 0.625rem;
+      @include H8;
+
      padding: 8px;
      width: 75px;
      white-space: nowrap;
-      line-height: 1rem;
    }

    & > .button:first-child {
--- a/ui/app/components/app/transaction-list/index.scss
+++ b/ui/app/components/app/transaction-list/index.scss
@ -10,9 +10,9 @@
  }

  &__header {
+    @include H6;
+
    flex: 0 0 auto;
-    font-size: 14px;
-    line-height: 20px;
    color: $Grey-400;
    border-bottom: 1px solid $Grey-100;
    padding: 8px 0 8px 20px;
--- a/ui/app/components/app/wallet-overview/index.scss
+++ b/ui/app/components/app/wallet-overview/index.scss
@ -34,7 +34,7 @@
  }

  text-transform: uppercase;
-  font-weight: bold;
+  font-weight: 500;
 }

 .eth-overview {
@ -54,9 +54,9 @@
  }

  &__primary-balance {
+    @include H2;
+
    color: $black;
-    font-size: 32px;
-    line-height: 45px;
    width: 100%;
    justify-content: center;
  }
@ -71,15 +71,14 @@
  }

  &__cached-secondary-balance {
+    @include Paragraph;
+
    color: rgba(220, 153, 18, 0.6901960784313725);
-    font-size: 16px;
-    line-height: 23px;
  }

  &__secondary-balance {
-    font-size: 16px;
-    line-height: 23px;
-    font-weight: 400;
+    @include Paragraph;
+
    color: $Grey-400;
  }

@ -116,17 +115,16 @@
  }

  &__primary-balance {
+    @include H2;
+
    color: $black;
-    font-size: 32px;
-    line-height: 45px;
    width: 100%;
    justify-content: center;
  }

  &__secondary-balance {
-    font-size: 16px;
-    line-height: 23px;
-    font-weight: 400;
+    @include H5;
+
    color: $Grey-400;
  }