From 186ee97d368792395ef03d4e900bd7e2fee1aa55 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 29 Oct 2020 09:30:38 -0500 Subject: [PATCH 1/6] normalize UI component font styles (#9694) --- ui/app/components/ui/alert/index.scss | 3 ++- ui/app/components/ui/button-group/index.scss | 2 +- ui/app/components/ui/button/buttons.scss | 14 ++------------ ui/app/components/ui/currency-input/index.scss | 4 ++-- ui/app/components/ui/dialog/dialog.scss | 4 ++-- ui/app/components/ui/dropdown/dropdown.scss | 3 ++- ui/app/components/ui/editable-label/index.scss | 3 ++- ui/app/components/ui/error-message/index.scss | 3 ++- .../ui/export-text-container/index.scss | 6 ++++-- .../components/ui/icon-with-label/index.scss | 3 ++- ui/app/components/ui/list-item/index.scss | 11 ++++++----- ui/app/components/ui/loading-screen/index.scss | 7 ------- ui/app/components/ui/menu/menu.scss | 5 ++--- ui/app/components/ui/page-container/index.scss | 18 ++++++++++-------- ui/app/components/ui/popover/index.scss | 5 +---- ui/app/components/ui/qr-code/index.scss | 6 ++++-- .../ui/sender-to-recipient/index.scss | 9 ++++++--- ui/app/components/ui/snackbar/index.scss | 3 ++- ui/app/components/ui/toggle-button/index.scss | 6 ++---- ui/app/components/ui/unit-input/index.scss | 15 ++++++++------- 20 files changed, 62 insertions(+), 68 deletions(-) diff --git a/ui/app/components/ui/alert/index.scss b/ui/app/components/ui/alert/index.scss index 0e58f2aac..737244a2c 100644 --- a/ui/app/components/ui/alert/index.scss +++ b/ui/app/components/ui/alert/index.scss @@ -4,10 +4,11 @@ background-color: #33a4e7; .msg { + @include H7; + width: 100%; display: block; color: white; - font-size: 12px; text-align: center; } } diff --git a/ui/app/components/ui/button-group/index.scss b/ui/app/components/ui/button-group/index.scss index b82ae60e0..84e652968 100644 --- a/ui/app/components/ui/button-group/index.scss +++ b/ui/app/components/ui/button-group/index.scss @@ -4,7 +4,7 @@ align-items: center; &__button { - font-size: 1rem; + font-size: $font-size-h5; color: $tundora; border-style: solid; border-color: $alto; diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss index a8364ca65..ed28645c6 100644 --- a/ui/app/components/ui/button/buttons.scss +++ b/ui/app/components/ui/button/buttons.scss @@ -14,7 +14,6 @@ $warning-light-orange: #f8b588; @include H6; font-weight: 500; - line-height: 1.25rem; padding: 0.75rem 1rem; display: flex; justify-content: center; @@ -170,7 +169,6 @@ $warning-light-orange: #f8b588; @include H4; color: $Blue-500; - line-height: 1.25rem; cursor: pointer; background-color: transparent; @@ -211,11 +209,12 @@ $warning-light-orange: #f8b588; } .btn--first-time { + @include H4; + height: 54px; width: 198px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14); color: $white; - font-size: 1.25rem; font-weight: 500; transition: 200ms ease-in-out; background-color: rgba(247, 134, 28, 0.9); @@ -228,15 +227,6 @@ input[type="submit"][disabled] { opacity: 0.5; } -button.primary { - padding: 8px 12px; - background: #f7861c; - box-shadow: 0 3px 6px rgba(247, 134, 28, 0.36); - color: $white; - font-size: 1.1em; - text-transform: uppercase; -} - .btn--rounded { border-radius: 100px; will-change: box-shadow; diff --git a/ui/app/components/ui/currency-input/index.scss b/ui/app/components/ui/currency-input/index.scss index b240ed097..c374e06ae 100644 --- a/ui/app/components/ui/currency-input/index.scss +++ b/ui/app/components/ui/currency-input/index.scss @@ -1,7 +1,7 @@ .currency-input { &__conversion-component { - font-size: 12px; - line-height: 12px; + @include H7; + padding-left: 1px; } diff --git a/ui/app/components/ui/dialog/dialog.scss b/ui/app/components/ui/dialog/dialog.scss index d113947ad..72d3b8655 100644 --- a/ui/app/components/ui/dialog/dialog.scss +++ b/ui/app/components/ui/dialog/dialog.scss @@ -1,6 +1,6 @@ .dialog { - font-size: 0.75rem; - line-height: 1rem; + @include H7; + padding: 1rem; border: 1px solid $black; box-sizing: border-box; diff --git a/ui/app/components/ui/dropdown/dropdown.scss b/ui/app/components/ui/dropdown/dropdown.scss index 49a684bb7..e5d555ef9 100644 --- a/ui/app/components/ui/dropdown/dropdown.scss +++ b/ui/app/components/ui/dropdown/dropdown.scss @@ -1,4 +1,6 @@ .dropdown { + @include H6; + appearance: none; // TODO: remove these after getting autoprefixer working in Storybook @@ -11,7 +13,6 @@ background-position: right 18px top 50%; background-color: white; padding: 8px 32px 8px 16px; - font-size: 14px; [dir='rtl'] & { background-position: left 18px top 50%; diff --git a/ui/app/components/ui/editable-label/index.scss b/ui/app/components/ui/editable-label/index.scss index c69ea1428..fdb430c7d 100644 --- a/ui/app/components/ui/editable-label/index.scss +++ b/ui/app/components/ui/editable-label/index.scss @@ -12,8 +12,9 @@ } &__input { + @include H6; + width: 250px; - font-size: 14px; text-align: center; border: 1px solid $alto; diff --git a/ui/app/components/ui/error-message/index.scss b/ui/app/components/ui/error-message/index.scss index 8b3860c37..eba500931 100644 --- a/ui/app/components/ui/error-message/index.scss +++ b/ui/app/components/ui/error-message/index.scss @@ -1,10 +1,11 @@ .error-message { + @include H7; + min-height: 32px; border: 1px solid $monzo; color: $monzo; background: lighten($monzo, 56%); border-radius: 4px; - font-size: 0.75rem; display: flex; justify-content: flex-start; align-items: center; diff --git a/ui/app/components/ui/export-text-container/index.scss b/ui/app/components/ui/export-text-container/index.scss index c3e32895f..ee225e5db 100644 --- a/ui/app/components/ui/export-text-container/index.scss +++ b/ui/app/components/ui/export-text-container/index.scss @@ -17,10 +17,11 @@ } &__text { + @include H4; + resize: none; border: none; background: $alabaster; - font-size: 20px; text-align: center; } @@ -32,12 +33,13 @@ } &__button { + @include H7; + padding: 10px; flex: 1; display: flex; justify-content: center; align-items: center; - font-size: 12px; cursor: pointer; color: $primary-blue; diff --git a/ui/app/components/ui/icon-with-label/index.scss b/ui/app/components/ui/icon-with-label/index.scss index 628a54272..ecf28efca 100644 --- a/ui/app/components/ui/icon-with-label/index.scss +++ b/ui/app/components/ui/icon-with-label/index.scss @@ -3,7 +3,8 @@ align-items: center; &__label { - font-size: 10px; + @include H8; + margin-left: 4px; color: $Grey-500; } diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss index 0838521ec..670d25748 100644 --- a/ui/app/components/ui/list-item/index.scss +++ b/ui/app/components/ui/list-item/index.scss @@ -37,9 +37,9 @@ } &__heading { + @include H5; + grid-area: head; - font-size: 16px; - line-height: 160%; position: relative; display: flex; align-items: center; @@ -57,9 +57,9 @@ } &__subheading { + @include H7; + grid-area: sub; - font-size: 12px; - line-height: 14px; color: $Grey-500; margin-top: 4px; // all direct descendants should be truncated with ellipses @@ -76,8 +76,9 @@ } &__mid-content { + @include H7; + grid-area: mid; - font-size: 12px; color: $Grey-500; } diff --git a/ui/app/components/ui/loading-screen/index.scss b/ui/app/components/ui/loading-screen/index.scss index d05286cee..dd3f40d58 100644 --- a/ui/app/components/ui/loading-screen/index.scss +++ b/ui/app/components/ui/loading-screen/index.scss @@ -26,13 +26,6 @@ align-items: center; } - &__message { - margin-top: 32px; - font-weight: 400; - font-size: 20px; - color: $manatee; - } - &__error-screen { display: flex; flex-direction: column; diff --git a/ui/app/components/ui/menu/menu.scss b/ui/app/components/ui/menu/menu.scss index a34deda53..4f89b44f5 100644 --- a/ui/app/components/ui/menu/menu.scss +++ b/ui/app/components/ui/menu/menu.scss @@ -1,5 +1,7 @@ .menu { &__container { + @include H6; + background: $white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.214); border-radius: 8px; @@ -9,9 +11,6 @@ flex-direction: column; align-items: center; padding: 0 16px; - font-size: 14px; - font-weight: normal; - line-height: 20px; z-index: 1050; } diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss index 4c4969a2b..df4f9067a 100644 --- a/ui/app/components/ui/page-container/index.scss +++ b/ui/app/components/ui/page-container/index.scss @@ -73,9 +73,10 @@ a, a:hover { + @include H7; + text-decoration: none; cursor: pointer; - font-size: 0.75rem; text-transform: uppercase; color: #2f9ae0; } @@ -91,24 +92,24 @@ } &__back-button { + @include Paragraph; + color: #2f9ae0; - font-size: 1rem; cursor: pointer; - font-weight: 400; } &__title { + @include H2; + color: $black; - font-size: 2rem; font-weight: 500; - line-height: 2rem; margin-right: 1.5rem; } &__subtitle { + @include H6; + padding-top: 0.5rem; - line-height: initial; - font-size: 0.9rem; color: $gray; } @@ -118,9 +119,10 @@ } &__tab { + @include Paragraph; + min-width: 5rem; color: $dusty-gray; - font-size: 1rem; border-bottom: none; margin-right: 16px; diff --git a/ui/app/components/ui/popover/index.scss b/ui/app/components/ui/popover/index.scss index d5072ccc3..d2869b484 100644 --- a/ui/app/components/ui/popover/index.scss +++ b/ui/app/components/ui/popover/index.scss @@ -36,7 +36,7 @@ @include H4; font-weight: bold; - line-height: 25px; + padding-bottom: 8px; h2 { white-space: nowrap; @@ -51,9 +51,6 @@ &__subtitle { @include H6; - - padding-top: 8px; - line-height: 20px; } &__button { diff --git a/ui/app/components/ui/qr-code/index.scss b/ui/app/components/ui/qr-code/index.scss index 86bd5af43..521075f64 100644 --- a/ui/app/components/ui/qr-code/index.scss +++ b/ui/app/components/ui/qr-code/index.scss @@ -5,13 +5,15 @@ align-items: center; &__message-container > div:first-child { + @include Paragraph; + margin-top: 18px; - font-size: 15px; color: #4d4d4d; } &__message { - font-size: 12px; + @include H7; + color: #f7861c; } diff --git a/ui/app/components/ui/sender-to-recipient/index.scss b/ui/app/components/ui/sender-to-recipient/index.scss index 3c0f7af2d..5c2c3cf5e 100644 --- a/ui/app/components/ui/sender-to-recipient/index.scss +++ b/ui/app/components/ui/sender-to-recipient/index.scss @@ -69,11 +69,12 @@ } &__name { + @include H6; + padding-left: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 0.875rem; [dir='rtl'] & { /*rtl:ignore*/ @@ -117,10 +118,11 @@ } &__name { + @include H9; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 0.5rem; [dir='rtl'] & { /*rtl:ignore*/ @@ -171,10 +173,11 @@ } &__name { + @include H8; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 0.6875rem; [dir='rtl'] & { /*rtl:ignore*/ diff --git a/ui/app/components/ui/snackbar/index.scss b/ui/app/components/ui/snackbar/index.scss index d2aac4879..d3f185e7b 100644 --- a/ui/app/components/ui/snackbar/index.scss +++ b/ui/app/components/ui/snackbar/index.scss @@ -1,6 +1,7 @@ .snackbar { + @include H7; + padding: 0.75rem 1rem; - font-size: 0.75rem; color: $Blue-600; min-width: 360px; width: fit-content; diff --git a/ui/app/components/ui/toggle-button/index.scss b/ui/app/components/ui/toggle-button/index.scss index 09827888c..e37833c1c 100644 --- a/ui/app/components/ui/toggle-button/index.scss +++ b/ui/app/components/ui/toggle-button/index.scss @@ -3,10 +3,8 @@ $self: &; &__status { - font-style: normal; - font-weight: normal; - font-size: 16px; - line-height: 23px; + @include Paragraph; + display: flex; align-items: center; text-transform: uppercase; diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss index c86f487b5..c6da6198f 100644 --- a/ui/app/components/ui/unit-input/index.scss +++ b/ui/app/components/ui/unit-input/index.scss @@ -1,4 +1,6 @@ .unit-input { + @include Paragraph; + display: flex; flex-flow: row nowrap; align-items: center; @@ -7,7 +9,6 @@ border-radius: 4px; background-color: #fff; color: #4d4d4d; - font-size: 16px; padding: 8px 10px; position: relative; @@ -34,12 +35,12 @@ } &__input { + @include Paragraph; + color: #4d4d4d; - font-size: 1rem; border: none; max-width: 22ch; height: 16px; - line-height: 18px; &__disabled { background-color: rgb(222, 222, 222); @@ -48,14 +49,14 @@ &__input-container { display: flex; - align-items: flex-start; - padding-bottom: 4px; + align-items: center; + padding-bottom: 2px; } &__suffix { + @include Paragraph; + margin-left: 3px; - font-size: 1rem; - line-height: 1rem; } &--error { From c130a7ae6c13674f90a122a3b59c9d96e5737da7 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 29 Oct 2020 09:31:04 -0500 Subject: [PATCH 2/6] prevent environment key from leaking into all builds (#9752) --- development/build/scripts.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/development/build/scripts.js b/development/build/scripts.js index c6b9734d5..1f4d17881 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -325,7 +325,8 @@ function createScriptTasks ({ browserPlatforms, livereload }) { // inflating event volume. const SEGMENT_PROD_WRITE_KEY = opts.testing ? undefined : process.env.SEGMENT_PROD_WRITE_KEY const SEGMENT_DEV_WRITE_KEY = opts.testing ? undefined : conf.SEGMENT_WRITE_KEY - const SEGMENT_LEGACY_WRITE_KEY = opts.testing ? undefined : conf.SEGMENT_LEGACY_WRITE_KEY + const SEGMENT_PROD_LEGACY_WRITE_KEY = opts.testing ? undefined : process.env.SEGMENT_PROD_LEGACY_WRITE_KEY + const SEGMENT_DEV_LEGACY_WRITE_KEY = opts.testing ? undefined : conf.SEGMENT_LEGACY_WRITE_KEY // Inject variables into bundle bundler.transform(envify({ @@ -345,7 +346,7 @@ function createScriptTasks ({ browserPlatforms, livereload }) { : conf.INFURA_PROJECT_ID ), SEGMENT_WRITE_KEY: environment === 'production' ? SEGMENT_PROD_WRITE_KEY : SEGMENT_DEV_WRITE_KEY, - SEGMENT_LEGACY_WRITE_KEY: environment === 'production' ? process.env.SEGMENT_LEGACY_WRITE_KEY : SEGMENT_LEGACY_WRITE_KEY, + SEGMENT_LEGACY_WRITE_KEY: environment === 'production' ? SEGMENT_PROD_LEGACY_WRITE_KEY : SEGMENT_DEV_LEGACY_WRITE_KEY, }), { global: true, }) From fe69182056508e54a6ed7e29c6b4d4255b2f0b3b Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 29 Oct 2020 10:03:29 -0500 Subject: [PATCH 3/6] 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; } From 50728ed9ef67111c9753dc868865ff23169b4d9c Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 29 Oct 2020 10:03:45 -0500 Subject: [PATCH 4/6] normalize deprecated itcss font styles (#9696) --- ui/app/css/itcss/components/network.scss | 17 ++- ui/app/css/itcss/components/send.scss | 139 ++++++++++-------- .../css/itcss/components/simple-dropdown.scss | 3 +- 3 files changed, 90 insertions(+), 69 deletions(-) diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 31ca8c201..b7803ef7c 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -42,9 +42,10 @@ } .network-indicator { + @include H8; + display: flex; align-items: center; - font-size: 0.6em; &__down-arrow { height: 8px; @@ -58,16 +59,16 @@ } .fa-question-circle { + font-size: $font-size-paragraph; margin: 0 4px 0 6px; - font-size: 1rem; flex: 0 0 auto; } } .network-name { + @include H7; + padding: 0 4px; - font-size: 12px; - line-height: 14px; flex: 1 1 auto; color: $tundora; font-weight: 500; @@ -163,20 +164,20 @@ } .network-dropdown-title { + @include H4; + height: 25px; width: 120px; color: $white; - font-size: 18px; - line-height: 25px; text-align: center; } .network-dropdown-content { + @include H6; + min-height: 36px; width: 265px; color: $dusty-gray; - font-size: 14px; - line-height: 18px; } .network-caret { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index df18572cd..5aead652c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -39,8 +39,9 @@ } .send-screen input { + @include H7; + width: 100%; - font-size: 12px; } .send-eth-icon { @@ -70,11 +71,11 @@ } .large-input { + @include Paragraph; + border: 1px solid $dusty-gray; border-radius: 4px; margin: 4px 0 20px; - font-size: 16px; - line-height: 22.4px; } .send-screen-gas-input { @@ -92,22 +93,22 @@ } .send-screen-input-wrapper__error-message { + @include H7; + display: block; position: absolute; bottom: 4px; - font-size: 12px; - line-height: 12px; left: 8px; color: $red; } } .send-screen-input-wrapper__error-message { + @include H7; + display: block; position: absolute; bottom: 4px; - font-size: 12px; - line-height: 12px; left: 8px; color: $red; } @@ -118,6 +119,8 @@ } .send-screen-gas-input { + @include Paragraph; + width: 100%; height: 41px; border-radius: 3px; @@ -129,7 +132,6 @@ align-items: center; padding-left: 10px; padding-right: 12px; - font-size: 16px; color: $scorpion; } @@ -158,8 +160,9 @@ } .send-screen-gas-input-customize { + @include H7; + color: $primary-blue; - font-size: 12px; cursor: pointer; } @@ -173,6 +176,8 @@ } .customize-gas-tooltip-container { + @include Paragraph; + position: absolute; bottom: 50px; width: 237px; @@ -182,7 +187,6 @@ box-shadow: $alto 0 0 5px; z-index: 1050; padding: 13px 19px; - font-size: 16px; border-radius: 4px; font-weight: 500; } @@ -219,7 +223,8 @@ } .gas-tooltip-label { - font-size: 16px; + @include Paragraph; + color: $tundora; } @@ -237,10 +242,11 @@ } .customize-gas-input { + @include Paragraph; + width: 178px; height: 28px; border: 1px solid $alto; - font-size: 16px; color: $nile-blue; padding-left: 8px; } @@ -250,14 +256,17 @@ } .gas-tooltip-input-detail { + @include H7; + position: absolute; top: 4px; right: 26px; - font-size: 12px; color: $silver-chalice; } .gas-tooltip-input-arrows { + @include H6; + position: absolute; top: 0; right: 4px; @@ -268,7 +277,6 @@ display: flex; flex-direction: column; color: #9b9b9b; - font-size: 0.8em; padding: 1px 4px; cursor: pointer; } @@ -286,15 +294,15 @@ .send-screen { &__title { + @include H4; + color: $scorpion; - font-size: 18px; - line-height: 29px; } &__subtitle { + @include H6; + margin: 10px 0 20px; - font-size: 14px; - line-height: 24px; } &__send-button, @@ -347,23 +355,23 @@ } &__title { + @include H4; + color: $scorpion; - font-size: 18px; - line-height: 29px; } &__description, &__balance-text, &__token-symbol { + @include H6; + margin-top: 10px; - font-size: 14px; - line-height: 24px; text-align: center; } &__token-balance { - font-size: 40px; - line-height: 40px; + @include H1; + margin-top: 13px; .token-balance__amount { @@ -433,12 +441,13 @@ } &__send-arrow-icon { + @include H4; + color: #f28930; transform: rotate(-45deg); position: absolute; top: -2px; left: 0; - font-size: 1.12em; } &__arrow-background { @@ -489,25 +498,25 @@ } &__title { + @include H3; + color: $scorpion; - font-size: 22px; - line-height: 29px; text-align: center; margin-top: 25px; } &__copy { + @include H6; + color: $gray; - font-size: 14px; - line-height: 19px; text-align: center; margin-top: 10px; width: 287px; } &__error { - font-size: 12px; - line-height: 12px; + @include H7; + left: 8px; color: $red; } @@ -517,8 +526,8 @@ } &__warning { - font-size: 12px; - line-height: 12px; + @include H7; + left: 8px; color: $orange; } @@ -549,6 +558,7 @@ flex-flow: row; flex: 1 0 auto; justify-content: space-between; + align-items: center; } &__form-field-container { @@ -582,22 +592,21 @@ } &__form-label { + @include Paragraph; + color: $scorpion; - font-size: 16px; - line-height: 22px; width: 95px; - font-weight: 400; flex: 0 0 auto; } &__from-dropdown, &__asset-dropdown { + @include H7; + width: 100%; border: 1px solid $alto; border-radius: 4px; background-color: $white; - line-height: 16px; - font-size: 12px; color: $tundora; position: relative; @@ -670,14 +679,16 @@ } &__symbol { - font-size: 16px; + @include Paragraph; + margin-bottom: 2px; } &__name { + @include H7; + display: flex; flex-flow: row nowrap; - font-size: 12px; &__label { margin-right: 0.25rem; @@ -729,6 +740,8 @@ } &__input { + @include Paragraph; + z-index: 1025; position: relative; height: 54px; @@ -738,14 +751,14 @@ background-color: $white; color: $tundora; padding: 10px; - font-size: 16px; - line-height: 21px; } } &__memo-text-area, &__hex-data { &__input { + @include Paragraph; + z-index: 1025; position: relative; height: 54px; @@ -755,13 +768,12 @@ background-color: $white; color: $tundora; padding: 10px; - font-size: 16px; - line-height: 21px; } } &__amount-max { - font-size: 12px; + @include H7; + position: relative; display: inline-block; width: 56px; @@ -815,6 +827,8 @@ } &__sliders-icon-container { + @include Paragraph; + display: flex; align-items: center; justify-content: center; @@ -827,7 +841,6 @@ right: 15px; top: 14px; cursor: pointer; - font-size: 1em; } &__sliders-icon { @@ -872,12 +885,13 @@ } &__header { + @include H3; + height: 52px; border-bottom: 1px solid $alto; display: flex; align-items: center; justify-content: space-between; - font-size: 22px; @media screen and (max-width: $break-small) { flex: 0 0 auto; @@ -913,12 +927,13 @@ } &__footer { + @include H3; + height: 75px; border-top: 1px solid $alto; display: flex; align-items: center; justify-content: space-between; - font-size: 22px; position: relative; @media screen and (max-width: $break-small) { @@ -944,8 +959,9 @@ } &__revert { + @include Paragraph; + color: $silver-chalice; - font-size: 16px; margin-left: 21.25px; } @@ -962,12 +978,12 @@ } &__error-message { + @include H7; + display: block; position: absolute; top: -18px; right: 0; - font-size: 12px; - line-height: 12px; color: $red; width: 100%; text-align: center; @@ -986,19 +1002,19 @@ padding-left: 20px; &__title { + @include H4; + height: 26px; color: $tundora; - font-size: 20px; - line-height: 26px; margin-top: 17px; } &__copy { + @include Paragraph; + height: 38px; width: 314px; color: $tundora; - font-size: 14px; - line-height: 19px; margin-top: 17px; } @@ -1015,10 +1031,11 @@ } .gas-tooltip-input-arrows { + @include H4; + width: 32px; height: 54px; border-left: 1px solid #dadada; - font-size: 18px; color: $tundora; right: 0; padding: 0; @@ -1049,15 +1066,18 @@ } .advanced-gas-options-btn { + @include H6; + display: flex; justify-content: flex-end; - font-size: 14px; color: #2f9ae0; cursor: pointer; margin-top: 5px; } .sliders-icon-container { + @include Paragraph; + display: flex; align-items: center; justify-content: center; @@ -1070,10 +1090,11 @@ right: 15px; top: 14px; cursor: pointer; - font-size: 1em; } .gas-fee-reset { + @include H6; + display: flex; align-items: center; justify-content: center; @@ -1084,8 +1105,6 @@ right: 12px; top: 14px; cursor: pointer; - font-size: 1em; - font-size: 14px; color: #2f9ae0; } diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss index d815de8df..d29aaa55c 100644 --- a/ui/app/css/itcss/components/simple-dropdown.scss +++ b/ui/app/css/itcss/components/simple-dropdown.scss @@ -1,4 +1,6 @@ .simple-dropdown { + @include Paragraph; + height: 56px; display: flex; justify-content: flex-start; @@ -6,7 +8,6 @@ border: 1px solid $alto; border-radius: 4px; background-color: $white; - font-size: 16px; color: #4d4d4d; cursor: pointer; position: relative; From d99d8591f08a6a6e222da67d0f8536f1b9afa11f Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Thu, 29 Oct 2020 12:46:04 -0230 Subject: [PATCH 5/6] Replace shared mocks in incoming transaction controller tests (#9754) The shared mocks used previously in the incoming transaction controller tests have been replaced with functions that can generate a new mock for each test. We should avoid ever sharing mocks between tests. It's quite easy for a mock to get accidentally mutated or not correctly "reset" for the next test, leading to test inter-dependencies and misleading results. In particular, it is unsafe to share a `sinon` fake (e.g. a spy or stub) because they can't be fully reset between tests. Or at least it's difficult to reset them property, and it can't be done while also following their recommendations for preventing memory leaks. The spy API and all related state can be reset with `resetHistory`, which can be called between each test. However `sinon` also recommends calling `restore` after each test, and this will cause `sinon` to drop its internal reference to the fake object, meaning any subsequent call to `resetHistory` would fail. This is intentional, as it's required to prevent memory from building up during the test run, but it also means that sharing `sinon` fakes is particularly difficult to do safely. Instead we should never share mocks in the first place, which has other benefits anyway. This was discovered while writing tests for #9583. I mistakenly believed that `sinon.restore()` would reset the spy state, and this was responsible for many hours of debugging test failures. --- .../controllers/incoming-transactions-test.js | 247 ++++++++++-------- 1 file changed, 136 insertions(+), 111 deletions(-) diff --git a/test/unit/app/controllers/incoming-transactions-test.js b/test/unit/app/controllers/incoming-transactions-test.js index 727c394fa..dc7c1a2fc 100644 --- a/test/unit/app/controllers/incoming-transactions-test.js +++ b/test/unit/app/controllers/incoming-transactions-test.js @@ -2,25 +2,51 @@ import assert from 'assert' import sinon from 'sinon' import proxyquire from 'proxyquire' -import { ROPSTEN, RINKEBY, KOVAN, GOERLI, MAINNET } from '../../../../app/scripts/controllers/network/enums' +import { + GOERLI, + KOVAN, + MAINNET, + RINKEBY, + ROPSTEN, +} from '../../../../app/scripts/controllers/network/enums' const IncomingTransactionsController = proxyquire('../../../../app/scripts/controllers/incoming-transactions', { '../lib/random-id': { default: () => 54321 }, }).default -describe('IncomingTransactionsController', function () { - const EMPTY_INIT_STATE = { +const FAKE_NETWORK = 'FAKE_NETWORK' +const MOCK_SELECTED_ADDRESS = '0x0101' + +function getEmptyInitState () { + return { incomingTransactions: {}, incomingTxLastFetchedBlocksByNetwork: { - [ROPSTEN]: null, - [RINKEBY]: null, - [KOVAN]: null, [GOERLI]: null, + [KOVAN]: null, [MAINNET]: null, + [RINKEBY]: null, + [ROPSTEN]: null, }, } +} - const NON_EMPTY_INIT_STATE = { +function getNonEmptyInitState () { + return { + incomingTransactions: { + '0x123456': { id: 777 }, + }, + incomingTxLastFetchedBlocksByNetwork: { + [GOERLI]: 1, + [KOVAN]: 2, + [MAINNET]: 3, + [RINKEBY]: 5, + [ROPSTEN]: 4, + }, + } +} + +function getNonEmptyInitStateWithFakeNetworkState () { + return { incomingTransactions: { '0x123456': { id: 777 }, }, @@ -30,63 +56,62 @@ describe('IncomingTransactionsController', function () { [KOVAN]: 3, [GOERLI]: 5, [MAINNET]: 4, + [FAKE_NETWORK]: 1111, }, } +} - const NON_EMPTY_INIT_STATE_WITH_FAKE_NETWORK_STATE = { - incomingTransactions: { - '0x123456': { id: 777 }, +function getMockNetworkController (networkType = FAKE_NETWORK) { + return { + getProviderConfig: () => { + return { type: networkType } }, - incomingTxLastFetchedBlocksByNetwork: { - [ROPSTEN]: 1, - [RINKEBY]: 2, - [KOVAN]: 3, - [GOERLI]: 5, - [MAINNET]: 4, - FAKE_NETWORK: 1111, - }, - } - - const MOCK_BLOCKTRACKER = { - addListener: sinon.spy(), - removeListener: sinon.spy(), - testProperty: 'fakeBlockTracker', - getCurrentBlock: () => '0xa', - } - - const MOCK_NETWORK_CONTROLLER = { - getProviderConfig: () => ({ type: 'FAKE_NETWORK' }), on: sinon.spy(), } +} - const MOCK_PREFERENCES_CONTROLLER = { - getSelectedAddress: sinon.stub().returns('0x0101'), +function getMockPreferencesController ({ showIncomingTransactions = true } = {}) { + return { + getSelectedAddress: sinon.stub().returns(MOCK_SELECTED_ADDRESS), store: { getState: sinon.stub().returns({ featureFlags: { - showIncomingTransactions: true, + showIncomingTransactions, }, }), subscribe: sinon.spy(), }, } +} + +function getMockBlockTracker () { + return { + addListener: sinon.stub().callsArgWithAsync(1, '0xa'), + removeListener: sinon.spy(), + testProperty: 'fakeBlockTracker', + getCurrentBlock: () => '0xa', + } +} + +describe('IncomingTransactionsController', function () { + + afterEach(function () { + sinon.restore() + }) describe('constructor', function () { it('should set up correct store, listeners and properties in the constructor', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), initState: {}, }) sinon.spy(incomingTransactionsController, '_update') - assert.deepEqual(incomingTransactionsController.blockTracker, MOCK_BLOCKTRACKER) - assert.deepEqual(incomingTransactionsController.networkController, MOCK_NETWORK_CONTROLLER) - assert.equal(incomingTransactionsController.preferencesController, MOCK_PREFERENCES_CONTROLLER) assert.equal(incomingTransactionsController.getCurrentNetwork(), 'FAKE_NETWORK') - assert.deepEqual(incomingTransactionsController.store.getState(), EMPTY_INIT_STATE) + assert.deepEqual(incomingTransactionsController.store.getState(), getEmptyInitState()) assert(incomingTransactionsController.networkController.on.calledOnce) assert.equal(incomingTransactionsController.networkController.on.getCall(0).args[0], 'networkDidChange') @@ -104,22 +129,22 @@ describe('IncomingTransactionsController', function () { it('should set the store to a provided initial state', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) - assert.deepEqual(incomingTransactionsController.store.getState(), NON_EMPTY_INIT_STATE) + assert.deepEqual(incomingTransactionsController.store.getState(), getNonEmptyInitState()) }) }) describe('#start', function () { it('should set up a listener for the latest block', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), initState: {}, }) sinon.spy(incomingTransactionsController, '_update') @@ -142,10 +167,10 @@ describe('IncomingTransactionsController', function () { describe('_getDataForUpdate', function () { it('should call fetchAll with the correct params when passed a new block number and the current network has no stored block', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) incomingTransactionsController._fetchAll = sinon.stub().returns({}) @@ -160,10 +185,10 @@ describe('IncomingTransactionsController', function () { it('should call fetchAll with the correct params when passed a new block number but the current network has a stored block', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE_WITH_FAKE_NETWORK_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitStateWithFakeNetworkState(), }) incomingTransactionsController._fetchAll = sinon.stub().returns({}) @@ -178,10 +203,10 @@ describe('IncomingTransactionsController', function () { it('should call fetchAll with the correct params when passed a new network type but no block info exists', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE_WITH_FAKE_NETWORK_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitStateWithFakeNetworkState(), }) incomingTransactionsController._fetchAll = sinon.stub().returns({}) @@ -199,10 +224,10 @@ describe('IncomingTransactionsController', function () { it('should return the expected data', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE_WITH_FAKE_NETWORK_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitStateWithFakeNetworkState(), }) incomingTransactionsController._fetchAll = sinon.stub().returns({ latestIncomingTxBlockNumber: 444, @@ -259,10 +284,10 @@ describe('IncomingTransactionsController', function () { it('should update state with correct blockhash and transactions when passed a truthy latestIncomingTxBlockNumber', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) sinon.spy(incomingTransactionsController.store, 'updateState') @@ -284,10 +309,10 @@ describe('IncomingTransactionsController', function () { it('should update state with correct blockhash and transactions when passed a falsy latestIncomingTxBlockNumber', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) sinon.spy(incomingTransactionsController.store, 'updateState') @@ -325,10 +350,10 @@ describe('IncomingTransactionsController', function () { it('should call fetch with the expected url when passed an address, block number and supported network', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) await incomingTransactionsController._fetchTxs('0xfakeaddress', '789', ROPSTEN) @@ -339,10 +364,10 @@ describe('IncomingTransactionsController', function () { it('should call fetch with the expected url when passed an address, block number and MAINNET', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) await incomingTransactionsController._fetchTxs('0xfakeaddress', '789', MAINNET) @@ -353,10 +378,10 @@ describe('IncomingTransactionsController', function () { it('should call fetch with the expected url when passed an address and supported network, but a falsy block number', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) await incomingTransactionsController._fetchTxs('0xfakeaddress', null, ROPSTEN) @@ -367,10 +392,10 @@ describe('IncomingTransactionsController', function () { it('should not fetch and return an empty object when passed an unsported network', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) const result = await incomingTransactionsController._fetchTxs('0xfakeaddress', null, 'UNSUPPORTED_NETWORK') @@ -381,10 +406,10 @@ describe('IncomingTransactionsController', function () { it('should return the results from the fetch call, plus the address and currentNetworkID, when passed an address, block number and supported network', async function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) const result = await incomingTransactionsController._fetchTxs('0xfakeaddress', '789', ROPSTEN) @@ -401,10 +426,10 @@ describe('IncomingTransactionsController', function () { describe('_processTxFetchResponse', function () { it('should return a null block number and empty tx array if status is 0', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) const result = incomingTransactionsController._processTxFetchResponse({ @@ -421,10 +446,10 @@ describe('IncomingTransactionsController', function () { it('should return a null block number and empty tx array if the passed result array is empty', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) const result = incomingTransactionsController._processTxFetchResponse({ @@ -441,10 +466,10 @@ describe('IncomingTransactionsController', function () { it('should return the expected block number and tx list when passed data from a successful fetch', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) incomingTransactionsController._normalizeTxFromEtherscan = (tx, currentNetworkID) => ({ @@ -560,10 +585,10 @@ describe('IncomingTransactionsController', function () { describe('_normalizeTxFromEtherscan', function () { it('should return the expected data when the tx is in error', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) const result = incomingTransactionsController._normalizeTxFromEtherscan({ @@ -600,10 +625,10 @@ describe('IncomingTransactionsController', function () { it('should return the expected data when the tx is not in error', function () { const incomingTransactionsController = new IncomingTransactionsController({ - blockTracker: MOCK_BLOCKTRACKER, - networkController: MOCK_NETWORK_CONTROLLER, - preferencesController: MOCK_PREFERENCES_CONTROLLER, - initState: NON_EMPTY_INIT_STATE, + blockTracker: getMockBlockTracker(), + networkController: getMockNetworkController(), + preferencesController: getMockPreferencesController(), + initState: getNonEmptyInitState(), }) const result = incomingTransactionsController._normalizeTxFromEtherscan({ From 14161e37da34f591b259f859e434a983cd0dc68d Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 29 Oct 2020 11:31:48 -0500 Subject: [PATCH 6/6] 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; }