MetaMask · brad-decker · Oct 29, 2020 · Oct 23, 2020
@@ -7,7 +7,8 @@
   }
 
   &__account-name {
-    font-size: 16px;
+    @include Paragraph;
+
     margin-left: 8px;
   }
 

@@ -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,22 +218,24 @@
   }
 
   &__name {
+    @include H4;
+
     color: $white;
-    font-size: 18px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     max-width: 200px;
   }
 
   &__balance {
+    @include H6;
+
     color: $dusty-gray;
-    font-size: 14px;
   }
 
   &__action {
-    font-size: 16px;
-    line-height: 18px;
+    @include Paragraph;
+
     cursor: pointer;
   }
 

@@ -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;

@@ -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) {

@@ -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;
     }
   }
 }
@@ -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;

@@ -12,7 +12,8 @@
   }
 
   &__warning {
-    font-size: 0.75rem;
+    @include H7;
+
     color: #5f5922;
   }
 }
@@ -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,15 +63,17 @@
   }
 
   &__function-type {
-    font-size: 0.875rem;
+    @include H6;
+
     font-weight: 500;
     text-transform: capitalize;
     color: $black;
     padding-left: 5px;
   }
 
   &__tab {
-    font-size: 0.75rem;
+    @include H7;
+
     color: #8c8e94;
     text-transform: uppercase;
     margin: 0 8px;

@@ -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;
   }
 }
@@ -36,13 +36,15 @@
   }
 
   &__navtext {
-    font-size: 9px;
+    @include H9;
+
     font-weight: bold;
   }
 
   &__longtext {
+    @include H9;
+
     color: $oslo-gray;
-    font-size: 8px;
   }
 
   &__imageflip {

@@ -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;
   }
 }
 

@@ -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 {