From 14161e37da34f591b259f859e434a983cd0dc68d Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 29 Oct 2020 11:31:48 -0500 Subject: [PATCH] normalize page font styles (#9697) --- ui/app/pages/add-token/token-list/index.scss | 2 +- ui/app/pages/asset/asset.scss | 9 +- ui/app/pages/confirm-add-token/index.scss | 12 +-- .../confirm-approve-content/index.scss | 49 +++++------ .../confirm-decrypt-message.scss | 30 ++++--- .../confirm-encryption-public-key.scss | 20 +++-- ui/app/pages/connected-accounts/index.scss | 3 +- ui/app/pages/connected-sites/index.scss | 4 +- .../connect-hardware/index.scss | 53 ++++++----- .../create-account/import-account/index.scss | 15 ++-- ui/app/pages/create-account/index.scss | 16 ++-- ui/app/pages/error/index.scss | 9 +- .../first-time-flow/end-of-flow/index.scss | 9 +- ui/app/pages/first-time-flow/index.scss | 33 +++---- .../metametrics-opt-in/index.scss | 12 +-- .../confirm-seed-phrase/index.scss | 3 +- .../seed-phrase/reveal-seed-phrase/index.scss | 6 +- .../first-time-flow/select-action/index.scss | 18 ++-- .../pages/first-time-flow/welcome/index.scss | 5 +- ui/app/pages/home/index.scss | 7 +- ui/app/pages/keychains/index.scss | 87 +++---------------- ui/app/pages/permissions-connect/index.scss | 1 - .../permissions-connect/redirect/index.scss | 3 +- .../send-gas-row/send-gas-row.component.js | 29 ++++--- .../send-gas-row/send-gas-row.scss | 15 ++-- .../tests/send-gas-row-component.test.js | 19 ++-- ui/app/pages/send/send.scss | 29 +++---- .../pages/settings/alerts-tab/alerts-tab.scss | 3 +- .../settings/contact-list-tab/index.scss | 40 ++++----- ui/app/pages/settings/index.scss | 20 +++-- ui/app/pages/settings/info-tab/index.scss | 3 +- ui/app/pages/settings/networks-tab/index.scss | 20 ++--- ui/app/pages/unlock-page/index.scss | 3 +- 33 files changed, 268 insertions(+), 319 deletions(-) diff --git a/ui/app/pages/add-token/token-list/index.scss b/ui/app/pages/add-token/token-list/index.scss index 165b175f3..2ed5ece85 100644 --- a/ui/app/pages/add-token/token-list/index.scss +++ b/ui/app/pages/add-token/token-list/index.scss @@ -2,7 +2,7 @@ .token-list { &__title { - font-size: 0.75rem; + @include H7; } &__tokens-container { diff --git a/ui/app/pages/asset/asset.scss b/ui/app/pages/asset/asset.scss index 4445cb67e..e265e4943 100644 --- a/ui/app/pages/asset/asset.scss +++ b/ui/app/pages/asset/asset.scss @@ -17,13 +17,14 @@ } .asset-breadcrumb { - font-size: 14px; + @include H6; + color: $Black-100; background-color: inherit; &__chevron { + font-size: $font-size-paragraph; padding: 0 10px 0 2px; - font-size: 16px; } &__asset { @@ -33,13 +34,13 @@ .token-options { &__button { - font-size: 20px; + font-size: $font-size-paragraph; color: $Black-100; background-color: inherit; padding: 2px 8px; } &__icon { - font-size: 16px; + @include Paragraph; } } diff --git a/ui/app/pages/confirm-add-token/index.scss b/ui/app/pages/confirm-add-token/index.scss index f1f021ddb..a049e9b24 100644 --- a/ui/app/pages/confirm-add-token/index.scss +++ b/ui/app/pages/confirm-add-token/index.scss @@ -2,7 +2,8 @@ padding: 16px; &__header { - font-size: 0.75rem; + @include H7; + display: flex; } @@ -26,17 +27,16 @@ align-items: flex-start; &__amount { + @include H1; + color: $scorpion; - font-size: 43px; - line-height: 43px; margin-right: 8px; } &__symbol { + @include H5; + color: $scorpion; - font-size: 16px; - font-weight: 400; - line-height: 24px; } } } diff --git a/ui/app/pages/confirm-approve/confirm-approve-content/index.scss b/ui/app/pages/confirm-approve/confirm-approve-content/index.scss index 459e5b184..e912f6675 100644 --- a/ui/app/pages/confirm-approve/confirm-approve-content/index.scss +++ b/ui/app/pages/confirm-approve/confirm-approve-content/index.scss @@ -28,9 +28,8 @@ } &__title { - font-weight: normal; - font-size: 24px; - line-height: 34px; + @include H3; + width: 100%; display: flex; justify-content: center; @@ -41,9 +40,8 @@ } &__description { - font-weight: normal; - font-size: 14px; - line-height: 20px; + @include H6; + margin-top: 16px; margin-bottom: 16px; color: #6a737d; @@ -62,15 +60,14 @@ padding-right: 24px; &__bold-text { + @include H6; + font-weight: bold; - font-size: 14px; - line-height: 20px; } &__thin-text { - font-weight: normal; - font-size: 12px; - line-height: 17px; + @include H7; + color: #6a737d; } } @@ -96,9 +93,9 @@ &__title, &__title-value { + @include H6; + font-weight: bold; - font-size: 14px; - line-height: 20px; } &__title { @@ -177,16 +174,16 @@ } &__primary-fee { + @include H4; + font-weight: bold; - font-size: 18px; - line-height: 25px; color: #000; } &__secondary-fee { + @include H6; + font-weight: normal; - font-size: 14px; - line-height: 20px; color: #8c8e94; } } @@ -223,23 +220,22 @@ } &__large-text { - font-size: 18px; - line-height: 25px; + @include H4; + color: #24292e; } &__medium-link-text { - font-size: 14px; - line-height: 20px; + @include H6; + font-weight: 500; color: $primary-blue; } &__medium-text, &__label { - font-weight: normal; - font-size: 14px; - line-height: 20px; + @include H6; + color: #24292e; } @@ -251,9 +247,8 @@ &__small-text, &__small-blue-text, &__info-row { - font-weight: normal; - font-size: 12px; - line-height: 17px; + @include H7; + color: #6a737d; } diff --git a/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.scss b/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.scss index fd2ee53a8..fb7e6ebca 100644 --- a/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.scss +++ b/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.scss @@ -61,9 +61,9 @@ } &__header__text { + @include H3; + color: #5b5d67; - font-size: 22px; - line-height: 29px; z-index: 3; text-align: center; } @@ -97,14 +97,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 { @@ -130,8 +130,9 @@ } &__balance-text { + @include H6; + text-align: right; - font-size: 14px; } &__balance-value { @@ -153,8 +154,8 @@ } &__notice { - font-size: 14px; - line-height: 19px; + @include H6; + text-align: center; margin-top: 15px; margin-bottom: 11px; @@ -171,7 +172,8 @@ position: relative; &-text { - font-size: 0.7em; + @include H7; + height: 115px; } @@ -206,20 +208,21 @@ } &-lock-text { + @include H7; + width: 200px; - font-size: 0.75em; position: absolute; top: calc(50% + 5px); text-align: center; left: calc(50% - 100px); background-color: white; - line-height: 1em; border-radius: 3px; } &-copy { + @include H7; + justify-content: space-evenly; - font-size: 0.75em; margin-left: 20px; margin-right: 20px; display: flex; @@ -237,11 +240,12 @@ } &__footer { + @include H4; + 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/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss b/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss index 8860ca5d8..25c336936 100644 --- a/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss +++ b/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss @@ -61,9 +61,9 @@ } &__header__text { + @include H3; + color: #5b5d67; - font-size: 22px; - line-height: 29px; z-index: 3; text-align: center; } @@ -97,14 +97,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 { @@ -130,8 +130,9 @@ } &__balance-text { + @include H6; + text-align: right; - font-size: 14px; } &__balance-value { @@ -153,8 +154,8 @@ } &__notice { - font-size: 14px; - line-height: 19px; + @include H6; + text-align: center; margin-top: 41px; margin-bottom: 11px; @@ -165,11 +166,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/pages/connected-accounts/index.scss b/ui/app/pages/connected-accounts/index.scss index a32c405f9..72117da3b 100644 --- a/ui/app/pages/connected-accounts/index.scss +++ b/ui/app/pages/connected-accounts/index.scss @@ -2,9 +2,10 @@ &__footer { a, a:hover { + @include H6; + color: $primary-blue; cursor: pointer; - font-size: 14px; } } } diff --git a/ui/app/pages/connected-sites/index.scss b/ui/app/pages/connected-sites/index.scss index 5b963bf42..9af0eaed5 100644 --- a/ui/app/pages/connected-sites/index.scss +++ b/ui/app/pages/connected-sites/index.scss @@ -26,8 +26,8 @@ a, a:hover { - font-size: 14px; - line-height: 20px; + @include H6; + color: $primary-blue; cursor: pointer; } diff --git a/ui/app/pages/create-account/connect-hardware/index.scss b/ui/app/pages/create-account/connect-hardware/index.scss index c40e7b097..eca2068f3 100644 --- a/ui/app/pages/create-account/connect-hardware/index.scss +++ b/ui/app/pages/create-account/connect-hardware/index.scss @@ -12,13 +12,15 @@ &__header { &__title { + @include H3; + margin-top: 5px; margin-bottom: 15px; - font-size: 22px; } &__msg { - font-size: 14px; + @include H6; + color: #9b9b9b; margin-top: 10px; margin-bottom: 20px; @@ -73,11 +75,12 @@ } &__hdPath { + @include H6; + display: flex; flex-direction: row; margin-top: 15px; margin-bottom: 30px; - font-size: 14px; &__title { display: flex; @@ -92,10 +95,10 @@ } &__learn-more { + @include H6; + margin-top: 15px; - font-size: 14px; color: #5b5d67; - line-height: 19px; text-align: center; cursor: pointer; @@ -109,20 +112,23 @@ } &__title { + @include H4; + padding-top: 10px; font-weight: 400; - font-size: 18px; } &__unlock-title { + @include H3; + padding-top: 10px; font-weight: 400; - font-size: 22px; margin-bottom: 15px; } &__msg { - font-size: 14px; + @include H6; + color: #9b9b9b; margin-top: 10px; margin-bottom: 15px; @@ -141,15 +147,17 @@ &__footer { &__title { + @include H4; + padding-top: 15px; padding-bottom: 12px; font-weight: 400; - font-size: 18px; text-align: center; } &__msg { - font-size: 14px; + @include H6; + color: #9b9b9b; margin-top: 12px; margin-bottom: 27px; @@ -170,12 +178,14 @@ padding-top: 10px; &__msg { - font-size: 14px; + @include H6; + color: #9b9b9b; } &__link { - font-size: 14px; + @include H4; + text-align: center; color: #2f9ae0; cursor: pointer; @@ -201,28 +211,28 @@ } &__title { + @include H5; + margin-bottom: 23px; align-self: flex-start; color: $scorpion; - font-size: 16px; - line-height: 21px; font-weight: bold; display: flex; flex: 1; } &__device { + @include Paragraph; + margin-bottom: 23px; align-self: flex-end; color: $scorpion; - font-size: 16px; - line-height: 21px; - font-weight: normal; display: flex; } &__item { - font-size: 15px; + @include Paragraph; + flex-direction: row; display: flex; padding-left: 10px; @@ -287,12 +297,12 @@ margin-top: 10px; &__button { + @include H6; + background: #fff; height: 19px; display: flex; color: #33a4e7; - font-size: 14px; - line-height: 19px; border: none; min-width: 46px; margin-right: 0; @@ -343,8 +353,9 @@ padding: 22px; a { + @include H6; + color: #2f9ae0; - font-size: 14px; cursor: pointer; } } diff --git a/ui/app/pages/create-account/import-account/index.scss b/ui/app/pages/create-account/import-account/index.scss index 8ad30cc13..6749e0e76 100644 --- a/ui/app/pages/create-account/import-account/index.scss +++ b/ui/app/pages/create-account/import-account/index.scss @@ -1,11 +1,11 @@ .new-account-import-disclaimer { + @include H7; + width: 120%; background-color: #f4f9fc; display: inline-block; align-items: center; padding: 20px 30px 20px; - font-size: 12px; - line-height: 1.5; } .new-account-import-form { @@ -23,9 +23,9 @@ } &__select-label { + @include Paragraph; + color: $scorpion; - font-size: 16px; - line-height: 21px; } &__select { @@ -58,9 +58,9 @@ } &__instruction { + @include Paragraph; + color: $scorpion; - font-size: 16px; - line-height: 21px; align-self: flex-start; } @@ -72,6 +72,8 @@ } &__input-password { + @include Paragraph; + height: 54px; width: 315px; border: 1px solid $geyser; @@ -79,7 +81,6 @@ background-color: $white; margin-top: 16px; color: $scorpion; - font-size: 16px; padding: 0 20px; } diff --git a/ui/app/pages/create-account/index.scss b/ui/app/pages/create-account/index.scss index d6b1717e0..fa55a3efa 100644 --- a/ui/app/pages/create-account/index.scss +++ b/ui/app/pages/create-account/index.scss @@ -25,10 +25,10 @@ } &__title { + @include H2; + color: $tundora; - font-size: 32px; font-weight: 500; - line-height: 43px; margin-top: 22px; margin-left: 29px; } @@ -39,11 +39,11 @@ margin-top: 10px; &__tab { + @include H4; + height: 54px; padding: 15px 10px; color: $dusty-gray; - font-size: 18px; - line-height: 24px; text-align: center; cursor: pointer; } @@ -70,21 +70,21 @@ padding: 30px; &__input-label { + @include Paragraph; + color: $scorpion; - font-size: 16px; - line-height: 21px; align-self: flex-start; } &__input { + @include Paragraph; + height: 54px; width: 315.84px; border: 1px solid $geyser; border-radius: 4px; background-color: $white; color: $scorpion; - font-size: 16px; - line-height: 21px; margin-top: 15px; padding: 0 20px; } diff --git a/ui/app/pages/error/index.scss b/ui/app/pages/error/index.scss index 14ec9da84..0edb6a630 100644 --- a/ui/app/pages/error/index.scss +++ b/ui/app/pages/error/index.scss @@ -8,15 +8,17 @@ height: 100%; &__header { + @include H1; + display: flex; justify-content: center; - font-size: 42px; padding: 10px 0; text-align: center; } &__subheader { - font-size: 19px; + @include H4; + padding: 10px 0; width: 100%; max-width: 720px; @@ -24,7 +26,8 @@ } &__details { - font-size: 18px; + @include H4; + overflow-y: auto; width: 100%; max-width: 720px; diff --git a/ui/app/pages/first-time-flow/end-of-flow/index.scss b/ui/app/pages/first-time-flow/end-of-flow/index.scss index 34d04d1c2..d8788048b 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/index.scss +++ b/ui/app/pages/first-time-flow/end-of-flow/index.scss @@ -13,14 +13,16 @@ &__text-1, &__text-3 { + @include Paragraph; + font-weight: normal; - font-size: 16px; margin-top: 18px; } &__text-2 { + @include Paragraph; + font-weight: bold; - font-size: 16px; margin-top: 26px; } @@ -29,8 +31,9 @@ margin-bottom: 2px; @media screen and (max-width: $break-small) { + @include H6; + margin-bottom: 16px; - font-size: 0.875rem; } } diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss index 19e769e10..90861c18d 100644 --- a/ui/app/pages/first-time-flow/index.scss +++ b/ui/app/pages/first-time-flow/index.scss @@ -39,7 +39,8 @@ } &__header { - font-size: 2.5rem; + @include H1; + margin-bottom: 24px; color: black; } @@ -63,15 +64,17 @@ } &__textarea-label { + @include H4; + margin-bottom: 9px; color: #1b344d; - font-size: 18px; } &__textarea { + @include Paragraph; + /*rtl:ignore*/ direction: ltr; - font-size: 1rem; border: 1px solid #cdcdcd; border-radius: 6px; background-color: #fff; @@ -91,28 +94,14 @@ margin-bottom: 20px; } - &__markdown { - border: 1px solid #979797; - border-radius: 8px; - background-color: $white; - height: 200px; - overflow-y: auto; - color: #757575; - font-size: 0.75rem; - line-height: 15px; - text-align: justify; - margin: 0; - padding: 16px 20px; - height: 30vh; - } - &__text-block { margin-bottom: 24px; color: black; @media screen and (max-width: $break-small) { + @include H6; + margin-bottom: 16px; - font-size: 0.875rem; } } @@ -148,10 +137,8 @@ } &__checkbox-label { - font-style: normal; - font-weight: normal; - line-height: normal; - font-size: 18px; + @include H4; + color: #939090; margin-left: 18px; } diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss b/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss index 18df92891..90b437831 100644 --- a/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss +++ b/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss @@ -25,12 +25,10 @@ } &__title { + @include H1; + position: relative; margin-top: 20px; - font-style: normal; - font-weight: normal; - line-height: normal; - font-size: 42px; } &__body-graphic { @@ -42,10 +40,8 @@ } &__description { - font-style: normal; - font-weight: normal; - line-height: 21px; - font-size: 16px; + @include Paragraph; + margin-top: 12px; } diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss index eb63c5805..92c6fa9f0 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss @@ -58,7 +58,8 @@ } @media screen and (max-width: 575px) { - font-size: 0.875rem; + @include H6; + padding: 6px 18px; } } diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index 6d6c90a1e..b0f4b9c0a 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss @@ -20,8 +20,9 @@ } &__secret-words { + @include H4; + width: 310px; - font-size: 1.25rem; text-align: center; &--hidden { @@ -45,8 +46,9 @@ } &__reveal-button { + @include H7; + color: $white; - font-size: 0.75rem; font-weight: 500; text-transform: uppercase; margin-top: 8px; diff --git a/ui/app/pages/first-time-flow/select-action/index.scss b/ui/app/pages/first-time-flow/select-action/index.scss index 1b398a73e..f10e1fed2 100644 --- a/ui/app/pages/first-time-flow/select-action/index.scss +++ b/ui/app/pages/first-time-flow/select-action/index.scss @@ -11,10 +11,8 @@ } &__body-header { - font-style: normal; - font-weight: normal; - line-height: 39px; - font-size: 28px; + @include H3; + text-align: center; margin-top: 65px; color: black; @@ -58,20 +56,16 @@ } &__button-text-big { - font-style: normal; - font-weight: normal; - line-height: 28px; - font-size: 20px; + @include H4; + color: #000; margin-top: 12px; text-align: center; } &__button-text-small { - font-style: normal; - font-weight: normal; - line-height: 20px; - font-size: 14px; + @include H6; + color: #7a7a7b; margin-top: 10px; text-align: center; diff --git a/ui/app/pages/first-time-flow/welcome/index.scss b/ui/app/pages/first-time-flow/welcome/index.scss index c3e1688bb..7ccf6ad64 100644 --- a/ui/app/pages/first-time-flow/welcome/index.scss +++ b/ui/app/pages/first-time-flow/welcome/index.scss @@ -17,7 +17,8 @@ } &__header { - font-size: 28px; + @include H3; + margin-bottom: 22px; margin-top: 50px; text-align: center; @@ -27,7 +28,7 @@ text-align: center; div { - font-size: 16px; + @include Paragraph; } @media screen and (max-width: 575px) { diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss index 4d4926e86..2934c920d 100644 --- a/ui/app/pages/home/index.scss +++ b/ui/app/pages/home/index.scss @@ -27,12 +27,12 @@ } &__main-view &__tab { + @include H6; + flex-grow: 1; color: $Grey-500; padding: 16px 8px; - font-size: 14px; font-weight: 500; - line-height: 130%; } &__main-view &__tab--active { @@ -80,11 +80,12 @@ } .popover-footer { + @include H6; + border-top: 0; justify-content: space-between; align-items: center; padding-top: 20px; - font-size: 14px; & :only-child { margin: 0; diff --git a/ui/app/pages/keychains/index.scss b/ui/app/pages/keychains/index.scss index 841eb4e02..a5934bb7a 100644 --- a/ui/app/pages/keychains/index.scss +++ b/ui/app/pages/keychains/index.scss @@ -70,29 +70,30 @@ .import-account { &__title { + @include H1; + color: #1b344d; - font-size: 40px; - line-height: 51px; margin-bottom: 10px; } &__back-button { + @include Paragraph; + margin-bottom: 18px; color: #22232c; - font-size: 16px; - line-height: 21px; position: absolute; top: -25px; } &__secret-phrase { + @include Paragraph; + height: 190px; width: 495px; border: 1px solid #cdcdcd; border-radius: 6px; background-color: #fff; padding: 17px; - font-size: 16px; } &__secret-phrase::placeholder { @@ -100,37 +101,10 @@ font-weight: 200; } - &__faq-link { - font-size: 18px; - line-height: 23px; - } - &__selector-label { + @include Paragraph; + color: #1b344d; - font-size: 16px; - } - - &__dropdown { - width: 325px; - border: 1px solid #cdcdcd; - border-radius: 4px; - background-color: #fff; - margin-top: 14px; - color: #5b5d67; - font-size: 18px; - line-height: 23px; - padding: 14px 21px; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - cursor: pointer; - } - - &__description-text { - color: #757575; - font-size: 18px; - line-height: 23px; - margin-top: 21px; } &__input-wrapper { @@ -139,21 +113,6 @@ margin-top: 30px; } - &__input-error-message { - margin-top: 10px; - width: 422px; - color: #ff001f; - font-size: 16px; - line-height: 21px; - } - - &__input-label { - margin-bottom: 9px; - color: #1b344d; - font-size: 18px; - line-height: 23px; - } - &__input { width: 350px; } @@ -185,10 +144,8 @@ } &__checkbox-label { - font-style: normal; - font-weight: normal; - line-height: normal; - font-size: 18px; + @include H4; + color: #939090; margin-left: 18px; } @@ -197,32 +154,11 @@ display: none; } - &__file-input-label { - height: 53px; - width: 148px; - border: 1px solid #1b344d; - border-radius: 4px; - color: #1b344d; - font-size: 18px; - display: flex; - flex-flow: column nowrap; - align-items: center; - justify-content: center; - cursor: pointer; - } - &__file-picker-wrapper { display: flex; flex-flow: row nowrap; align-items: center; } - - &__file-name { - color: #000; - font-size: 18px; - line-height: 23px; - margin-left: 22px; - } } .reveal-seed { @@ -237,8 +173,9 @@ } &__error { + @include H6; + color: $crimson; - font-size: 14px; padding-top: 5px; } } diff --git a/ui/app/pages/permissions-connect/index.scss b/ui/app/pages/permissions-connect/index.scss index eb6b14dbf..dd0bc7548 100644 --- a/ui/app/pages/permissions-connect/index.scss +++ b/ui/app/pages/permissions-connect/index.scss @@ -41,6 +41,5 @@ grid-column: 2; justify-self: end; font-weight: bold; - line-height: 21px; } } diff --git a/ui/app/pages/permissions-connect/redirect/index.scss b/ui/app/pages/permissions-connect/redirect/index.scss index fa90ca0c1..4005019cf 100644 --- a/ui/app/pages/permissions-connect/redirect/index.scss +++ b/ui/app/pages/permissions-connect/redirect/index.scss @@ -20,11 +20,12 @@ } &__center-icon { + @include H7; + display: flex; position: relative; justify-content: center; align-items: center; - font-size: 12px; } &__check { diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js index 8df7bbbfa..3037518c9 100644 --- a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js @@ -116,7 +116,6 @@ export default class SendGasRow extends Component { } }} /> - { this.renderAdvancedOptionsButton() } ) const gasFeeDisplay = ( @@ -143,7 +142,6 @@ export default class SendGasRow extends Component { customPriceIsSafe isSpeedUp={false} /> - { this.renderAdvancedOptionsButton() } ) // Tests should behave in same way as mainnet, but are using Localhost @@ -156,16 +154,27 @@ export default class SendGasRow extends Component { } render () { - const { gasFeeError } = this.props + const { gasFeeError, gasButtonGroupShown, advancedInlineGasShown } = this.props return ( - - { this.renderContent() } - + <> + + { this.renderContent() } + + { + gasButtonGroupShown || advancedInlineGasShown + ? ( + + { this.renderAdvancedOptionsButton() } + + ) + : null + } + ) } diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss index b8a23d06b..676d40885 100644 --- a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss @@ -1,10 +1,11 @@ .currency-display { + @include Paragraph; + height: 54px; border: 1px solid $alto; border-radius: 4px; background-color: $white; color: $scorpion; - font-size: 16px; padding: 8px 10px; position: relative; @@ -13,18 +14,18 @@ } &__input { + @include Paragraph; + color: $scorpion; - font-size: 16px; - line-height: 22px; border: none; max-width: 22ch; } &__primary-currency { + @include Paragraph; + color: $scorpion; font-weight: 400; - font-size: 16px; - line-height: 22px; } &__converted-row { @@ -33,9 +34,9 @@ &__converted-value, &__converted-currency { + @include H7; + color: $dusty-gray; - font-size: 12px; - line-height: 12px; } &__input-wrapper { diff --git a/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js index e078ed25a..7e42c545f 100644 --- a/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js @@ -42,7 +42,8 @@ describe('SendGasRow Component', function () { }) it('should render a SendRowWrapper component', function () { - assert.equal(wrapper.find(SendRowWrapper).length, 1) + assert.equal(wrapper.name(), 'Fragment') + assert.equal(wrapper.at(0).find(SendRowWrapper).length, 1) }) it('should pass the correct props to SendRowWrapper', function () { @@ -50,7 +51,7 @@ describe('SendGasRow Component', function () { label, showError, errorType, - } = wrapper.find(SendRowWrapper).props() + } = wrapper.find(SendRowWrapper).first().props() assert.equal(label, 'transactionFee_t:') assert.equal(showError, true) @@ -58,7 +59,7 @@ describe('SendGasRow Component', function () { }) it('should render a GasFeeDisplay as a child of the SendRowWrapper', function () { - assert(wrapper.find(SendRowWrapper).childAt(0).is(GasFeeDisplay)) + assert(wrapper.find(SendRowWrapper).first().childAt(0).is(GasFeeDisplay)) }) it('should render the GasFeeDisplay', function () { @@ -66,7 +67,7 @@ describe('SendGasRow Component', function () { gasLoadingError, gasTotal, onReset, - } = wrapper.find(SendRowWrapper).childAt(0).props() + } = wrapper.find(SendRowWrapper).first().childAt(0).props() assert.equal(gasLoadingError, false) assert.equal(gasTotal, 'mockGasTotal') assert.equal(propsMethodSpies.resetGasButtons.callCount, 0) @@ -76,8 +77,8 @@ describe('SendGasRow Component', function () { it('should render the GasPriceButtonGroup if gasButtonGroupShown is true', function () { wrapper.setProps({ gasButtonGroupShown: true }) - const rendered = wrapper.find(SendRowWrapper).childAt(0) - assert.equal(rendered.children().length, 2) + const rendered = wrapper.find(SendRowWrapper).first().childAt(0) + assert.equal(wrapper.children().length, 2) const gasPriceButtonGroup = rendered.childAt(0) assert(gasPriceButtonGroup.is(GasPriceButtonGroup)) @@ -89,10 +90,10 @@ describe('SendGasRow Component', function () { it('should render an advanced options button if gasButtonGroupShown is true', function () { wrapper.setProps({ gasButtonGroupShown: true }) - const rendered = wrapper.find(SendRowWrapper).childAt(0) - assert.equal(rendered.children().length, 2) + const rendered = wrapper.find(SendRowWrapper).last() + assert.equal(wrapper.children().length, 2) - const advancedOptionsButton = rendered.childAt(1) + const advancedOptionsButton = rendered.childAt(0) assert.equal(advancedOptionsButton.text(), 'advancedOptions_t') assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0) diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss index 7e2459f4d..7db779e2b 100644 --- a/ui/app/pages/send/send.scss +++ b/ui/app/pages/send/send.scss @@ -14,11 +14,10 @@ } .page-container__header-close-text { - font-size: 1rem; - line-height: 1.1875rem; + @include H5; + position: absolute; right: 1rem; - top: 6px; width: min-content; } } @@ -50,10 +49,11 @@ overflow-y: auto; &__link { + @include Paragraph; + @extend %row-nowrap; padding: 1rem; - font-size: 1rem; border-bottom: 1px solid $alto; align-items: center; justify-content: flex-start; @@ -78,8 +78,8 @@ @extend %col-nowrap; &__load-more { - font-size: 0.75rem; - line-height: 1.0625rem; + @include H7; + padding: 0.5rem; text-align: center; border-bottom: 1px solid $alto; @@ -96,7 +96,6 @@ background-color: $Grey-000; color: $Grey-600; - line-height: 0.875rem; padding: 0.5rem 1rem; border-bottom: 1px solid $alto; @@ -131,8 +130,8 @@ } &__title { - font-size: 0.875rem; - line-height: 1.25rem; + @include H6; + color: $black; } @@ -230,9 +229,8 @@ &__input { @extend %col-nowrap; - font-size: 0.75rem; - line-height: 0.75rem; - font-weight: 400; + @include H7; + color: $Blue-500; } } @@ -241,13 +239,14 @@ &__selected-input { &__title { - @extend %ellipsify; + @include H6; - font-size: 0.875rem; + @extend %ellipsify; } &__subtitle { - font-size: 0.75rem; + @include H7; + color: $Grey-500; margin-top: 0.25rem; } diff --git a/ui/app/pages/settings/alerts-tab/alerts-tab.scss b/ui/app/pages/settings/alerts-tab/alerts-tab.scss index 9585085cd..5f6ef2de4 100644 --- a/ui/app/pages/settings/alerts-tab/alerts-tab.scss +++ b/ui/app/pages/settings/alerts-tab/alerts-tab.scss @@ -1,9 +1,10 @@ .alerts-tab { &__body { + @include H6; + display: grid; grid-template-columns: 8fr 30px max-content; grid-template-rows: 1fr 1fr; - font-size: 14px; align-items: center; } diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss index a6ec34d44..ef91281da 100644 --- a/ui/app/pages/settings/contact-list-tab/index.scss +++ b/ui/app/pages/settings/contact-list-tab/index.scss @@ -33,10 +33,8 @@ &__header, &__header--edit { &__name { - font-style: normal; - font-weight: normal; - font-size: 24px; - line-height: 34px; + @include H3; + margin-left: 24px; } } @@ -46,18 +44,20 @@ justify-content: space-between; .button { + @include H6; + justify-content: flex-end; color: $accent-red; - font-size: 14px; } } &__input { + @include H4; + border: 2px solid $Grey-200; border-radius: 6px; color: $Grey-800; padding: 0.875rem 1rem; - font-size: 1.125rem; &:focus-within { border-color: $Blue-500; @@ -66,7 +66,7 @@ margin-top: 0.25rem; &--address { - font-size: 0.875rem; + @include H6; } } @@ -86,7 +86,8 @@ &__label, &__label--capitalized { - font-size: 0.75rem; + @include H7; + color: $Grey-500; margin-bottom: 0.25rem; } @@ -97,14 +98,15 @@ &__value, &__static-address { + @include H4; + display: flex; flex-flow: row nowrap; - font-size: 1.125rem; color: $Grey-800; word-break: break-word; &--address { - font-size: 0.875rem; + @include H6; } &--copy-icon { @@ -119,7 +121,7 @@ } &__static-address { - font-size: 0.875rem; + @include H6; &--copy-icon { cursor: pointer; @@ -168,8 +170,8 @@ } &__error { - font-size: 12px; - line-height: 12px; + @include H7; + left: 8px; color: $red; } @@ -186,10 +188,8 @@ } &__header { - font-style: normal; - font-weight: normal; - font-size: 18px; - line-height: 25px; + @include H4; + color: #000; } @@ -199,10 +199,8 @@ } &__text { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 20px; + @include Paragraph; + color: #6a737d; } diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index b72deb39e..30976a6da 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -18,15 +18,17 @@ flex: 0 0 auto; &__title { + @include H3; + flex: 1 0 auto; - font-size: 24px; } } &__subheader, &__subheader--link { + @include H4; + padding: 16px 4px; - font-size: 20px; border-bottom: 1px solid $alto; margin-right: 24px; height: 72px; @@ -70,12 +72,11 @@ } &__sub-header-text { - font-style: normal; - font-weight: normal; - font-size: 20px; + @include H4; @media screen and (max-width: 575px) { - font-size: 16px; + @include H5; + width: 100%; } } @@ -186,7 +187,8 @@ } &__content-description { - font-size: 14px; + @include H6; + color: $dusty-gray; padding-top: 5px; } @@ -212,8 +214,8 @@ } &__address-book-button { - font-size: 1rem; - line-height: 1.1875rem; + @include H5; + padding: 0; } diff --git a/ui/app/pages/settings/info-tab/index.scss b/ui/app/pages/settings/info-tab/index.scss index 3cbe63b5c..88216c64a 100644 --- a/ui/app/pages/settings/info-tab/index.scss +++ b/ui/app/pages/settings/info-tab/index.scss @@ -35,8 +35,9 @@ } &__version-number { + @include H6; + padding-top: 5px; - font-size: 13px; color: $dusty-gray; } diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss index 455adb971..6aa275927 100644 --- a/ui/app/pages/settings/networks-tab/index.scss +++ b/ui/app/pages/settings/networks-tab/index.scss @@ -84,6 +84,8 @@ } &--warning { + @include H7; + background-color: #fefae8; border: 1px solid #ffd33d; width: 93%; @@ -91,7 +93,6 @@ box-sizing: border-box; padding: 12px; margin: 12px 0; - font-size: 12px; } } @@ -101,17 +102,15 @@ } &__network-form-label-text { - font-family: Roboto; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 20px; + @include H6; + color: #000; } &__network-form-label-tooltip { + @include H7; + margin-left: 5px; - font-size: 12px; } &__networks-list { @@ -148,7 +147,6 @@ .button { width: 138px; padding: 10px; - line-height: 20px; } @media screen and (max-width: 575px) { @@ -186,11 +184,9 @@ } &__networks-list-name { + @include Paragraph; + margin-left: 11px; - font-style: normal; - font-weight: normal; - font-size: 16px; - line-height: 23px; color: #6a737d; &:hover { diff --git a/ui/app/pages/unlock-page/index.scss b/ui/app/pages/unlock-page/index.scss index 3d44bd037..9480eaeac 100644 --- a/ui/app/pages/unlock-page/index.scss +++ b/ui/app/pages/unlock-page/index.scss @@ -21,8 +21,9 @@ } &__title { + @include H2; + margin-top: 5px; - font-size: 2rem; font-weight: 800; color: $tundora; }