From fe69182056508e54a6ed7e29c6b4d4255b2f0b3b Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 29 Oct 2020 10:03:29 -0500 Subject: [PATCH] normalize app component font styles (#9695) --- .../app/account-list-item/index.scss | 3 +- ui/app/components/app/account-menu/index.scss | 31 +++++++------ .../unconnected-account-alert.scss | 6 ++- .../app/asset-list-item/asset-list-item.scss | 6 ++- .../confirm-detail-row/index.scss | 14 +++--- .../confirm-page-container-summary/index.scss | 6 ++- .../confirm-page-container-warning/index.scss | 3 +- .../confirm-page-container-content/index.scss | 12 +++-- .../confirm-page-container-header/index.scss | 7 +-- .../index.scss | 6 ++- .../app/connected-accounts-list/index.scss | 10 ++--- .../connected-accounts-permissions/index.scss | 13 +++--- .../app/connected-sites-list/index.scss | 3 +- .../app/connected-status-indicator/index.scss | 3 +- .../advanced-gas-inputs/index.scss | 19 +++++--- .../advanced-tab-content/index.scss | 25 +++++++---- .../basic-tab-content/index.scss | 9 ++-- .../gas-modal-page-container/index.scss | 26 ++++++----- .../gas-price-button-group/index.scss | 44 +++++++++++-------- .../gas-price-chart/index.scss | 11 +++-- .../gas-customization/gas-slider/index.scss | 3 +- .../app/home-notification/index.scss | 10 ++--- ui/app/components/app/info-box/index.scss | 2 +- ui/app/components/app/menu-bar/index.scss | 3 +- .../app/modal/modal-content/index.scss | 6 ++- .../modals/account-details-modal/index.scss | 6 ++- .../modals/account-modal-container/index.scss | 7 +-- .../add-to-addressbook-modal/index.scss | 3 +- .../cancel-transaction-gas-fee/index.scss | 5 ++- .../app/modals/cancel-transaction/index.scss | 3 +- .../modals/confirm-remove-account/index.scss | 9 ++-- .../app/modals/deposit-ether-modal/index.scss | 32 +++----------- .../edit-approval-permission/index.scss | 29 ++++++------ .../export-private-key-modal/index.scss | 22 +++++----- .../hide-token-confirmation-modal/index.scss | 14 +++--- .../metametrics-opt-in-modal/index.scss | 2 +- .../app/modals/new-account-modal/index.scss | 6 ++- .../app/modals/qr-scanner/index.scss | 12 +++-- .../app/modals/reject-transactions/index.scss | 3 +- .../modals/transaction-confirmed/index.scss | 6 ++- .../app/multiple-notifications/index.scss | 3 +- .../components/app/network-display/index.scss | 3 +- .../app/permission-page-container/index.scss | 5 +-- .../app/permissions-connect-footer/index.scss | 1 - .../app/permissions-connect-header/index.scss | 3 +- .../app/selected-account/index.scss | 8 ++-- .../app/sidebars/sidebar-content.scss | 2 +- .../app/signature-request-original/index.scss | 32 +++++++------- .../app/signature-request/index.scss | 15 ++++--- .../signature-request-header/index.scss | 6 ++- .../signature-request-message/index.scss | 11 ++--- ui/app/components/app/tab-bar/index.scss | 9 ++-- .../app/transaction-activity-log/index.scss | 6 ++- .../transaction-breakdown-row/index.scss | 3 +- .../transaction-list-item-details/index.scss | 2 +- .../app/transaction-list-item/index.scss | 7 +-- .../app/transaction-list/index.scss | 4 +- .../components/app/wallet-overview/index.scss | 24 +++++----- 58 files changed, 325 insertions(+), 259 deletions(-) diff --git a/ui/app/components/app/account-list-item/index.scss b/ui/app/components/app/account-list-item/index.scss index dcc08d9b5..3faebe29f 100644 --- 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; } diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss index e7763766f..ee3e82bc0 100644 --- 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; } diff --git 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 index 053bf181b..11c12f420 100644 --- 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; diff --git a/ui/app/components/app/asset-list-item/asset-list-item.scss b/ui/app/components/app/asset-list-item/asset-list-item.scss index d8d96b153..89047462b 100644 --- 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) { diff --git 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 index cfd888817..5b78bfd39 100644 --- 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; } } } diff --git 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 index 4f1e1547a..5ce8f708a 100644 --- 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; diff --git 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 index 8451165cf..f439be370 100644 --- 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; } } diff --git 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 index cb263ec9c..94ff2b711 100644 --- 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; diff --git 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 index fb24feb58..79d79e55b 100644 --- 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; } } diff --git 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 index fe3106aa8..9db235003 100755 --- 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 { diff --git a/ui/app/components/app/connected-accounts-list/index.scss b/ui/app/components/app/connected-accounts-list/index.scss index 5da7aba9a..a650e4e11 100644 --- 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; } } diff --git a/ui/app/components/app/connected-accounts-permissions/index.scss b/ui/app/components/app/connected-accounts-permissions/index.scss index 8be840f9b..4dcf430ef 100644 --- 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 { diff --git a/ui/app/components/app/connected-sites-list/index.scss b/ui/app/components/app/connected-sites-list/index.scss index 9922eec7a..7e4a665c2 100644 --- 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 { diff --git a/ui/app/components/app/connected-status-indicator/index.scss b/ui/app/components/app/connected-status-indicator/index.scss index 6d9711c0b..17b5b7d1d 100644 --- 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; diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss index 5a9dad81f..1a747dcb4 100644 --- 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; } } diff --git 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 index 039ccab2b..d6b21e04c 100644 --- 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; } diff --git 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 index 113d7f187..734d03876 100644 --- 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; } diff --git 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 index 63c2259f8..3c255dc6b 100644 --- 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; } } } diff --git 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 index fc614d011..a75ae39a5 100644 --- 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; } } } diff --git a/ui/app/components/app/gas-customization/gas-price-chart/index.scss b/ui/app/components/app/gas-customization/gas-price-chart/index.scss index 774760cff..8d204e9ec 100644 --- 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; diff --git a/ui/app/components/app/gas-customization/gas-slider/index.scss b/ui/app/components/app/gas-customization/gas-slider/index.scss index aacbea9e6..8eca6cc3b 100644 --- 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; } diff --git a/ui/app/components/app/home-notification/index.scss b/ui/app/components/app/home-notification/index.scss index 94e48ffea..dbb28f4b0 100644 --- 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; diff --git a/ui/app/components/app/info-box/index.scss b/ui/app/components/app/info-box/index.scss index bad69cd53..c7749ecbb 100644 --- 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; } } diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss index ac99b6b90..673b219c3 100644 --- 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; } } diff --git a/ui/app/components/app/modal/modal-content/index.scss b/ui/app/components/app/modal/modal-content/index.scss index 560c2cbd4..d06b2ce85 100644 --- 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; } } diff --git a/ui/app/components/app/modals/account-details-modal/index.scss b/ui/app/components/app/modals/account-details-modal/index.scss index 1f14aeaac..ecab51311 100644 --- 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 { diff --git a/ui/app/components/app/modals/account-modal-container/index.scss b/ui/app/components/app/modals/account-modal-container/index.scss index 6e553249b..ad4ca6118 100644 --- 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; diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/index.scss b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss index 96e04007f..7c153f7f8 100644 --- 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 { diff --git 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 index 5d99e66d5..d9b2d2734 100644 --- 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; } } diff --git a/ui/app/components/app/modals/cancel-transaction/index.scss b/ui/app/components/app/modals/cancel-transaction/index.scss index 93ba99ad4..00e769388 100644 --- 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 { diff --git a/ui/app/components/app/modals/confirm-remove-account/index.scss b/ui/app/components/app/modals/confirm-remove-account/index.scss index 90fa7dd53..16f0bfcf3 100644 --- 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; } diff --git a/ui/app/components/app/modals/deposit-ether-modal/index.scss b/ui/app/components/app/modals/deposit-ether-modal/index.scss index fbbbec427..7db6e0eb7 100644 --- 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; - } } diff --git a/ui/app/components/app/modals/edit-approval-permission/index.scss b/ui/app/components/app/modals/edit-approval-permission/index.scss index ecf0705cc..3b350e047 100644 --- 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; } diff --git a/ui/app/components/app/modals/export-private-key-modal/index.scss b/ui/app/components/app/modals/export-private-key-modal/index.scss index 8fd3c3133..737b94863 100644 --- 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%; diff --git a/ui/app/components/app/modals/hide-token-confirmation-modal/index.scss b/ui/app/components/app/modals/hide-token-confirmation-modal/index.scss index 9482caeba..fb82e69ee 100644 --- 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; } diff --git a/ui/app/components/app/modals/metametrics-opt-in-modal/index.scss b/ui/app/components/app/modals/metametrics-opt-in-modal/index.scss index 4c99ecc28..08dc6cc15 100644 --- 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 { diff --git a/ui/app/components/app/modals/new-account-modal/index.scss b/ui/app/components/app/modals/new-account-modal/index.scss index 3c20a34e5..cf6a42069 100644 --- 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 { diff --git a/ui/app/components/app/modals/qr-scanner/index.scss b/ui/app/components/app/modals/qr-scanner/index.scss index 6fa81d51f..a29200237 100644 --- 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; } diff --git a/ui/app/components/app/modals/reject-transactions/index.scss b/ui/app/components/app/modals/reject-transactions/index.scss index 278689246..5b601308d 100644 --- 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; } } diff --git a/ui/app/components/app/modals/transaction-confirmed/index.scss b/ui/app/components/app/modals/transaction-confirmed/index.scss index 6135f9b0c..5e432093c 100644 --- 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 { diff --git a/ui/app/components/app/multiple-notifications/index.scss b/ui/app/components/app/multiple-notifications/index.scss index c1a52cf95..ea17e9467 100644 --- 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; } } } diff --git a/ui/app/components/app/network-display/index.scss b/ui/app/components/app/network-display/index.scss index a17e47bc9..4ded13d54 100644 --- 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; } diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss index 56bc9e583..60e2e3e3b 100644 --- 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; } diff --git a/ui/app/components/app/permissions-connect-footer/index.scss b/ui/app/components/app/permissions-connect-footer/index.scss index 51ee8a09f..910f1857a 100644 --- 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; diff --git a/ui/app/components/app/permissions-connect-header/index.scss b/ui/app/components/app/permissions-connect-header/index.scss index 1ec0628e0..89297a094 100644 --- 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; diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss index c90ef7d78..3f1df50b2 100644 --- 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; } diff --git a/ui/app/components/app/sidebars/sidebar-content.scss b/ui/app/components/app/sidebars/sidebar-content.scss index e67bab43a..91222fdbc 100644 --- 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; } } } diff --git a/ui/app/components/app/signature-request-original/index.scss b/ui/app/components/app/signature-request-original/index.scss index 6af476fd6..c3b4aaf3b 100644 --- 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; diff --git a/ui/app/components/app/signature-request/index.scss b/ui/app/components/app/signature-request/index.scss index 4de4f249b..16008cbc2 100644 --- 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 {} diff --git a/ui/app/components/app/signature-request/signature-request-header/index.scss b/ui/app/components/app/signature-request/signature-request-header/index.scss index cd94a0e31..b4f3b5479 100644 --- 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; } diff --git a/ui/app/components/app/signature-request/signature-request-message/index.scss b/ui/app/components/app/signature-request/signature-request-message/index.scss index 37c0fba72..fbddf241e 100644 --- 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; diff --git a/ui/app/components/app/tab-bar/index.scss b/ui/app/components/app/tab-bar/index.scss index 0b9d0605d..f05cea784 100644 --- 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; diff --git a/ui/app/components/app/transaction-activity-log/index.scss b/ui/app/components/app/transaction-activity-log/index.scss index d5b748d17..7e08f7004 100644 --- 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; } diff --git a/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/app/transaction-breakdown/transaction-breakdown-row/index.scss index b36dc48c8..372a40e4b 100644 --- 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; diff --git a/ui/app/components/app/transaction-list-item-details/index.scss b/ui/app/components/app/transaction-list-item-details/index.scss index e6fc0b995..4ad7cd094 100644 --- 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; diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss index cfdd441f8..41e4d64a0 100644 --- 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 { diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss index 58feee644..380f91a24 100644 --- 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; diff --git a/ui/app/components/app/wallet-overview/index.scss b/ui/app/components/app/wallet-overview/index.scss index b86f12dd6..92a166607 100644 --- 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; }