From cdc0fed82885cc8f10496dffb4049140f4a536e3 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Thu, 4 Aug 2022 07:03:02 -0700 Subject: [PATCH] Update media query instances (#15068) --- ui/components/app/account-menu/index.scss | 12 +++---- ui/components/app/add-network/index.scss | 10 +++--- ui/components/app/app-header/index.scss | 16 ++++----- .../app/asset-list-item/asset-list-item.scss | 2 +- .../app/collectible-details/index.scss | 10 +++--- ui/components/app/edit-gas-popover/index.scss | 2 +- .../advanced-gas-inputs/index.scss | 2 +- .../gas-modal-page-container/index.scss | 8 ++--- .../gas-price-button-group/index.scss | 6 ++-- .../app/home-notification/index.scss | 4 +-- ui/components/app/modal/index.scss | 4 +-- .../modals/confirm-remove-account/index.scss | 2 +- .../app/modals/deposit-ether-modal/index.scss | 14 ++++---- .../metametrics-opt-in-modal/index.scss | 4 +-- .../app/multiple-notifications/index.scss | 2 +- .../app/permission-page-container/index.scss | 6 ++-- .../app/signature-request-original/index.scss | 4 +-- .../app/signature-request/index.scss | 2 +- .../signature-request-message/index.scss | 2 +- ui/components/app/srp-input/srp-input.scss | 4 +-- ui/components/app/tab-bar/index.scss | 12 +++---- ui/components/app/transaction-list/index.scss | 2 +- ui/components/app/whats-new-popup/index.scss | 4 +-- ui/components/ui/list-item/index.scss | 6 ++-- ui/components/ui/page-container/index.scss | 4 +-- .../ui/update-nickname-popover/index.scss | 2 +- ui/css/base-styles.scss | 2 +- ui/css/itcss/components/network.scss | 6 ++-- ui/css/itcss/components/newui-sections.scss | 19 +++++----- ui/css/itcss/components/send.scss | 34 +++++++++--------- ui/helpers/utils/is-mobile-view.js | 2 +- .../confirm-decrypt-message.scss | 4 +-- .../confirm-encryption-public-key.scss | 4 +-- .../create-account/import-account/index.scss | 2 +- ui/pages/create-account/index.scss | 2 +- .../first-time-flow/end-of-flow/index.scss | 4 +-- ui/pages/first-time-flow/index.scss | 15 ++++---- .../metametrics-opt-in/index.scss | 4 +-- .../confirm-seed-phrase/index.scss | 6 ++-- .../first-time-flow/seed-phrase/index.scss | 8 ++--- .../seed-phrase/reveal-seed-phrase/index.scss | 2 +- .../seed-phrase/seed-phrase-intro/index.scss | 8 ++--- ui/pages/first-time-flow/welcome/index.scss | 2 +- ui/pages/home/index.scss | 2 +- .../token-list-placeholder/index.scss | 2 +- ui/pages/keychains/index.scss | 4 +-- ui/pages/notifications/index.scss | 10 +++--- .../create-password/index.scss | 2 +- .../creation-successful/index.scss | 2 +- ui/pages/onboarding-flow/index.scss | 2 +- .../onboarding-flow/metametrics/index.scss | 6 ++-- .../onboarding-app-header/index.scss | 16 ++++----- .../privacy-settings/index.scss | 6 ++-- .../recovery-phrase/index.scss | 25 +++++-------- .../secure-your-wallet/index.scss | 6 ++-- ui/pages/onboarding-flow/welcome/index.scss | 2 +- .../choose-account/index.scss | 4 +-- ui/pages/permissions-connect/index.scss | 2 +- ui/pages/settings/contact-list-tab/index.scss | 6 ++-- .../settings/flask/snaps-list-tab/index.scss | 2 +- ui/pages/settings/flask/view-snap/index.scss | 20 +++++------ ui/pages/settings/index.scss | 36 +++++++++---------- ui/pages/settings/info-tab/index.scss | 4 +-- ui/pages/settings/networks-tab/index.scss | 26 +++++++------- ui/pages/swaps/build-quote/index.scss | 2 +- ui/pages/swaps/countdown-timer/index.scss | 2 +- ui/pages/swaps/index.scss | 12 +++---- .../swaps/select-quote-popover/index.scss | 4 +-- ui/pages/swaps/swaps-footer/index.scss | 6 ++-- ui/pages/swaps/view-quote/index.scss | 10 +++--- ui/pages/token-details/index.scss | 4 +-- 71 files changed, 241 insertions(+), 254 deletions(-) diff --git a/ui/components/app/account-menu/index.scss b/ui/components/app/account-menu/index.scss index d8b9b0bf3..d3b79532a 100644 --- a/ui/components/app/account-menu/index.scss +++ b/ui/components/app/account-menu/index.scss @@ -9,19 +9,19 @@ min-width: 150px; color: var(--color-text-default); - @media screen and (max-width: $break-small) { + @include screen-sm-max { right: 16px; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { right: calc((100vw - 85vw) / 2); } - @media screen and (min-width: 769px) { + @include screen-md-min { right: calc((100vw - 80vw) / 2); } - @media screen and (min-width: 1281px) { + @include screen-lg-min { right: calc((100vw - 65vw) / 2); } @@ -36,7 +36,7 @@ background: none; width: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 0 14px; height: 40px; } @@ -197,7 +197,7 @@ border: 0; width: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 12px 14px; } diff --git a/ui/components/app/add-network/index.scss b/ui/components/app/add-network/index.scss index 4c7d9f909..29899b329 100644 --- a/ui/components/app/add-network/index.scss +++ b/ui/components/app/add-network/index.scss @@ -2,7 +2,7 @@ &__networks-container { padding-inline-end: 24px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 0; } } @@ -10,7 +10,7 @@ &__header { border-bottom: 1px solid var(--color-border-default); - @media screen and (max-width: 575px) { + @include screen-sm-max { padding-inline-start: 24px; padding-inline-end: 24px; } @@ -22,14 +22,14 @@ } &__main-container { - @media screen and (max-width: 575px) { + @include screen-sm-max { padding-inline-start: 24px; padding-inline-end: 24px; } } &__list-of-networks { - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 75%; } } @@ -65,7 +65,7 @@ width: 100%; padding-bottom: 8px; - @media screen and (max-width: 575px) { + @include screen-sm-max { padding-inline-start: 24px !important; } diff --git a/ui/components/app/app-header/index.scss b/ui/components/app/app-header/index.scss index dd3e27fd1..b06486b7a 100644 --- a/ui/components/app/app-header/index.scss +++ b/ui/components/app/app-header/index.scss @@ -8,12 +8,12 @@ width: 100%; flex: 0 0 auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 1rem; z-index: $mobile-header-z-index; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 75px; justify-content: center; } @@ -22,13 +22,13 @@ &--icon { height: 32px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { display: none; } } &--horizontal { - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: none; } } @@ -39,19 +39,19 @@ flex-flow: row nowrap; width: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: 100%; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 85vw; } - @media screen and (min-width: 769px) { + @include screen-md-min { width: 80vw; } - @media screen and (min-width: 1281px) { + @include screen-lg-min { width: 62vw; } } diff --git a/ui/components/app/asset-list-item/asset-list-item.scss b/ui/components/app/asset-list-item/asset-list-item.scss index 3289e1d01..9e657d4be 100644 --- a/ui/components/app/asset-list-item/asset-list-item.scss +++ b/ui/components/app/asset-list-item/asset-list-item.scss @@ -58,7 +58,7 @@ padding-bottom: 0; } - @media (min-width: $break-large) { + @include screen-sm-min { &__warning-tooltip { display: none; } diff --git a/ui/components/app/collectible-details/index.scss b/ui/components/app/collectible-details/index.scss index c368c63ff..44cad6eb5 100644 --- a/ui/components/app/collectible-details/index.scss +++ b/ui/components/app/collectible-details/index.scss @@ -6,7 +6,7 @@ $spacer-break-small: 16px; .collectible-details { padding: 0 $spacer-break-small; - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding: 0 $spacer-break-large; } @@ -15,14 +15,14 @@ $spacer-break-small: 16px; flex-direction: column; margin-bottom: $spacer-break-small; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-bottom: $spacer-break-large; flex-direction: row; } } &__info { - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-width: calc( 100% - #{$card-width-break-large} - #{$spacer-break-large} @@ -35,7 +35,7 @@ $spacer-break-small: 16px; overflow: hidden; margin-bottom: $spacer-break-small; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-right: $spacer-break-large; margin-bottom: 0; max-width: $card-width-break-large; @@ -95,7 +95,7 @@ $spacer-break-small: 16px; &__send-button { margin-inline-end: 8px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-width: 160px; } } diff --git a/ui/components/app/edit-gas-popover/index.scss b/ui/components/app/edit-gas-popover/index.scss index a3fe4b5d9..e81e9d382 100644 --- a/ui/components/app/edit-gas-popover/index.scss +++ b/ui/components/app/edit-gas-popover/index.scss @@ -1,6 +1,6 @@ .edit-gas-popover { &__wrapper { - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-height: 84vh; } } diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/index.scss b/ui/components/app/gas-customization/advanced-gas-inputs/index.scss index 177078d9a..1f1630485 100644 --- a/ui/components/app/gas-customization/advanced-gas-inputs/index.scss +++ b/ui/components/app/gas-customization/advanced-gas-inputs/index.scss @@ -18,7 +18,7 @@ justify-content: space-between; align-items: center; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H8; } diff --git a/ui/components/app/gas-customization/gas-modal-page-container/index.scss b/ui/components/app/gas-customization/gas-modal-page-container/index.scss index 70d759d21..50d851798 100644 --- a/ui/components/app/gas-customization/gas-modal-page-container/index.scss +++ b/ui/components/app/gas-customization/gas-modal-page-container/index.scss @@ -7,7 +7,7 @@ min-height: 585px; overflow-y: initial; - @media screen and (max-width: $break-small) { + @include screen-sm-max { &__content { display: flex; overflow-y: initial; @@ -87,7 +87,7 @@ } .gas-modal-content { - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; } @@ -124,7 +124,7 @@ &__label { @include Paragraph; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; } } @@ -134,7 +134,7 @@ font-weight: bold; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; } } diff --git a/ui/components/app/gas-customization/gas-price-button-group/index.scss b/ui/components/app/gas-customization/gas-price-button-group/index.scss index 51137268f..3ce7fca88 100644 --- a/ui/components/app/gas-customization/gas-price-button-group/index.scss +++ b/ui/components/app/gas-customization/gas-price-button-group/index.scss @@ -70,7 +70,7 @@ justify-content: stretch; min-height: 54px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { max-width: 260px; } @@ -93,7 +93,7 @@ padding-bottom: 2px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H8; } } @@ -103,7 +103,7 @@ padding-bottom: 2px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H8; } } diff --git a/ui/components/app/home-notification/index.scss b/ui/components/app/home-notification/index.scss index a1e812ee1..64672e85d 100644 --- a/ui/components/app/home-notification/index.scss +++ b/ui/components/app/home-notification/index.scss @@ -9,7 +9,7 @@ min-height: 116px; padding: 16px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { min-width: 472px; } @@ -45,7 +45,7 @@ flex-direction: row; align-items: center; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 160px; } } diff --git a/ui/components/app/modal/index.scss b/ui/components/app/modal/index.scss index 858409a92..776b5ea2c 100644 --- a/ui/components/app/modal/index.scss +++ b/ui/components/app/modal/index.scss @@ -8,7 +8,7 @@ flex-flow: column; border-radius: 8px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { max-height: 450px; } @@ -17,7 +17,7 @@ flex: 1; padding: 16px 32px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { justify-content: center; padding: 28px 20px; } diff --git a/ui/components/app/modals/confirm-remove-account/index.scss b/ui/components/app/modals/confirm-remove-account/index.scss index 939198dee..4eea82d09 100644 --- a/ui/components/app/modals/confirm-remove-account/index.scss +++ b/ui/components/app/modals/confirm-remove-account/index.scss @@ -43,7 +43,7 @@ margin-top: 14px; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { &__name { width: 90px; } diff --git a/ui/components/app/modals/deposit-ether-modal/index.scss b/ui/components/app/modals/deposit-ether-modal/index.scss index 007e0b581..9c366d0b8 100644 --- a/ui/components/app/modals/deposit-ether-modal/index.scss +++ b/ui/components/app/modals/deposit-ether-modal/index.scss @@ -12,7 +12,7 @@ flex: 1; align-items: center; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: 0; } } @@ -31,7 +31,7 @@ max-height: 60px; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 60px; } } @@ -45,7 +45,7 @@ padding: 30px 0 20px; min-height: 170px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { min-height: 270px; flex-flow: column; justify-content: flex-start; @@ -63,11 +63,11 @@ flex: 0 0 auto; padding: 0 20px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 12rem; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; max-height: 6rem; padding-bottom: 20px; @@ -83,7 +83,7 @@ padding-bottom: 20px; align-self: flex-start; - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 15rem; } @@ -102,7 +102,7 @@ display: flex; justify-content: flex-end; - @media screen and (min-width: $break-large) { + @include screen-sm-min { min-width: 300px; } } diff --git a/ui/components/app/modals/metametrics-opt-in-modal/index.scss b/ui/components/app/modals/metametrics-opt-in-modal/index.scss index cabba027a..acfdf9be8 100644 --- a/ui/components/app/modals/metametrics-opt-in-modal/index.scss +++ b/ui/components/app/modals/metametrics-opt-in-modal/index.scss @@ -5,7 +5,7 @@ margin-right: 0%; max-height: 75vh; - @media screen and (max-width: $break-small) { + @include screen-sm-max { max-height: 100vh; } } @@ -20,7 +20,7 @@ } .metametrics-opt-in__footer { - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-top: 10px; justify-content: center; margin-left: 2%; diff --git a/ui/components/app/multiple-notifications/index.scss b/ui/components/app/multiple-notifications/index.scss index 3d3eaf2ad..af939b884 100644 --- a/ui/components/app/multiple-notifications/index.scss +++ b/ui/components/app/multiple-notifications/index.scss @@ -8,7 +8,7 @@ right: 0; margin: 8px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 340px; } diff --git a/ui/components/app/permission-page-container/index.scss b/ui/components/app/permission-page-container/index.scss index 61543c17c..8294744aa 100644 --- a/ui/components/app/permission-page-container/index.scss +++ b/ui/components/app/permission-page-container/index.scss @@ -10,7 +10,7 @@ justify-content: space-between; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 426px; flex: 1; @@ -94,7 +94,7 @@ align-items: center; margin-top: 12px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { border-top: none; } @@ -108,7 +108,7 @@ } } - @media screen and (max-width: $break-small) { + @include screen-sm-max { &__title { position: initial; } diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss index 65ff59fa5..bfea089cc 100644 --- a/ui/components/app/signature-request-original/index.scss +++ b/ui/components/app/signature-request-original/index.scss @@ -11,13 +11,13 @@ position: relative; height: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; top: 0; box-shadow: none; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 620px; } diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss index f1e6f6906..aacb6a2f9 100644 --- a/ui/components/app/signature-request/index.scss +++ b/ui/components/app/signature-request/index.scss @@ -8,7 +8,7 @@ flex-direction: column; min-width: 0; - @media screen and (min-width: $break-large) { + @include screen-sm-min { flex: initial; } } diff --git a/ui/components/app/signature-request/signature-request-message/index.scss b/ui/components/app/signature-request/signature-request-message/index.scss index ef2baa76d..b0b5c67ae 100644 --- a/ui/components/app/signature-request/signature-request-message/index.scss +++ b/ui/components/app/signature-request/signature-request-message/index.scss @@ -32,7 +32,7 @@ padding-left: 12px; padding-right: 12px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: auto; } } diff --git a/ui/components/app/srp-input/srp-input.scss b/ui/components/app/srp-input/srp-input.scss index 5d971147b..8f55cbe36 100644 --- a/ui/components/app/srp-input/srp-input.scss +++ b/ui/components/app/srp-input/srp-input.scss @@ -9,7 +9,7 @@ 'too-many-words-error too-many-words-error'; } - @media (max-width: 767px) { + @include screen-md-max { &__container { grid-template-areas: 'title' @@ -44,7 +44,7 @@ grid-area: input; } - @media (max-width: 767px) { + @include screen-md-max { &__srp { grid-template-columns: 1fr; } diff --git a/ui/components/app/tab-bar/index.scss b/ui/components/app/tab-bar/index.scss index be543a9cb..ca5f04764 100644 --- a/ui/components/app/tab-bar/index.scss +++ b/ui/components/app/tab-bar/index.scss @@ -18,7 +18,7 @@ background-color: unset; text-align: start; - @media screen and (min-width: $break-large) { + @include screen-sm-min { &:hover { opacity: 0.4; } @@ -28,7 +28,7 @@ } } - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H4; border-bottom: 1px solid var(--color-border-muted); @@ -44,7 +44,7 @@ &__title { @include H4; - @media screen and (min-width: $break-large) { + @include screen-sm-min { @include H6; } } @@ -52,7 +52,7 @@ &__description { display: none; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; display: block; @@ -69,7 +69,7 @@ flex: 0 0 18px; color: var(--color-icon-alternative); - @media screen and (min-width: $break-large) { + @include screen-sm-min { flex: 0 0 14px; } } @@ -78,7 +78,7 @@ &__caret { display: none; - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: block; margin-inline-start: auto; margin-inline-end: 8px; diff --git a/ui/components/app/transaction-list/index.scss b/ui/components/app/transaction-list/index.scss index ee932bc3b..1cdcf96c0 100644 --- a/ui/components/app/transaction-list/index.scss +++ b/ui/components/app/transaction-list/index.scss @@ -17,7 +17,7 @@ border-bottom: 1px solid var(--color-border-muted); padding: 8px 0 8px 20px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 8px 0 8px 16px; } } diff --git a/ui/components/app/whats-new-popup/index.scss b/ui/components/app/whats-new-popup/index.scss index ba588d00e..5ca37a51f 100644 --- a/ui/components/app/whats-new-popup/index.scss +++ b/ui/components/app/whats-new-popup/index.scss @@ -76,12 +76,12 @@ } .popover-wrap.whats-new-popup__popover { - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-height: 600px; width: 500px; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { max-height: 568px; } } diff --git a/ui/components/ui/list-item/index.scss b/ui/components/ui/list-item/index.scss index 05ece17c3..ead139c9d 100644 --- a/ui/components/ui/list-item/index.scss +++ b/ui/components/ui/list-item/index.scss @@ -97,13 +97,13 @@ white-space: nowrap; } - @media (max-width: $break-small) { + @include screen-sm-max { &__mid-content { display: none; } } - @media (min-width: $break-large) { + @include screen-sm-min { grid-template-areas: 'icon head head head head mid mid mid mid right right right' 'icon sub sub sub sub mid mid mid mid right right right' @@ -115,7 +115,7 @@ grid-template-areas: 'icon head head head head head head head right right right right'; align-items: center; - @media (min-width: $break-large) { + @include screen-sm-min { grid-template-areas: 'icon head head head head mid mid mid mid right right right'; } } diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss index c15941abb..2d83913b0 100644 --- a/ui/components/ui/page-container/index.scss +++ b/ui/components/ui/page-container/index.scss @@ -190,7 +190,7 @@ } } -@media screen and (max-width: $break-small) { +@include screen-sm-max { .page-container { height: 100%; width: 100%; @@ -201,7 +201,7 @@ } } -@media screen and (min-width: $break-large) { +@include screen-sm-min { .page-container { max-height: 82vh; min-height: 570px; diff --git a/ui/components/ui/update-nickname-popover/index.scss b/ui/components/ui/update-nickname-popover/index.scss index 21a7736f4..ce0b03622 100644 --- a/ui/components/ui/update-nickname-popover/index.scss +++ b/ui/components/ui/update-nickname-popover/index.scss @@ -13,7 +13,7 @@ border-radius: 10px; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 96%; height: 96%; } diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss index 23e946a0f..f426a03ea 100644 --- a/ui/css/base-styles.scss +++ b/ui/css/base-styles.scss @@ -51,7 +51,7 @@ html { flex-direction: column; background: var(--color-background-alternative); - @media screen and (max-width: $break-small) { + @include screen-sm-max { background-color: var(--color-background-default); } } diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss index 624a3b597..b333ab88a 100644 --- a/ui/css/itcss/components/network.scss +++ b/ui/css/itcss/components/network.scss @@ -64,15 +64,15 @@ margin: 0 14px 0 4px; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { right: calc(((100% - 85vw) / 2) + 2px); } - @media screen and (min-width: 769px) { + @include screen-md-min { right: calc(((100% - 80vw) / 2) + 2px); } - @media screen and (min-width: 1281px) { + @include screen-lg-min { right: calc(((100% - 65vw) / 2) + 2px); } } diff --git a/ui/css/itcss/components/newui-sections.scss b/ui/css/itcss/components/newui-sections.scss index 43ef900a9..f0462fd5d 100644 --- a/ui/css/itcss/components/newui-sections.scss +++ b/ui/css/itcss/components/newui-sections.scss @@ -1,6 +1,3 @@ -$sub-mid-size-breakpoint: 667px; -$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})"; - /* NewUI Container Elements */ @@ -50,7 +47,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma // main-container media queries -@media screen and (min-width: $break-large) { +@include screen-sm-min { .lap-visible { display: flex; } @@ -67,7 +64,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma } } -@media screen and (min-width: 769px) { +@include screen-md-min { .main-container { width: 80vw; min-height: 82vh; @@ -75,7 +72,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma } } -@media screen and (min-width: 1281px) { +@include screen-lg-min { .main-container { width: 62vw; min-height: 82vh; @@ -83,7 +80,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma } } -@media screen and (max-width: $break-small) { +@include screen-sm-max { .lap-visible { display: none; } @@ -117,19 +114,19 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma flex-direction: row-reverse; justify-content: space-between; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: 100%; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 85vw; } - @media screen and (min-width: 769px) { + @include screen-md-min { width: 80vw; } - @media screen and (min-width: 1281px) { + @include screen-lg-min { width: 62vw; } } diff --git a/ui/css/itcss/components/send.scss b/ui/css/itcss/components/send.scss index bd02111ad..f0ef8c8f1 100644 --- a/ui/css/itcss/components/send.scss +++ b/ui/css/itcss/components/send.scss @@ -3,7 +3,7 @@ flex-flow: column nowrap; z-index: 25; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; overflow-y: auto; } @@ -24,7 +24,7 @@ width: 498px; flex: 1 0 auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { top: 0; width: 100%; box-shadow: none; @@ -56,7 +56,7 @@ padding: 4px; background-color: var(--color-background-default); - @media screen and (max-width: $break-small) { + @include screen-sm-max { position: relative; top: 0; } @@ -334,7 +334,7 @@ flex-flow: column nowrap; flex: 1 0 auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { top: 0; width: 100%; box-shadow: none; @@ -347,7 +347,7 @@ top: -35px; z-index: 25; - @media screen and (max-width: $break-small) { + @include screen-sm-max { position: relative; top: 0; flex: 0 0 auto; @@ -385,7 +385,7 @@ align-items: center; flex: 0 0 auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-top: 24px; } @@ -413,7 +413,7 @@ align-items: center; position: relative; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; top: 0; box-shadow: none; @@ -424,7 +424,7 @@ &__send-header-icon-container { z-index: 25; - @media screen and (max-width: $break-small) { + @include screen-sm-max { position: relative; top: 0; } @@ -450,7 +450,7 @@ border-radius: 50%; z-index: 100; - @media screen and (max-width: $break-small) { + @include screen-sm-max { top: 36px; } } @@ -464,7 +464,7 @@ justify-content: center; align-items: center; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: 59px; width: 100vw; } @@ -479,7 +479,7 @@ left: 178px; top: 75px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { top: 46px; left: 0; right: 0; @@ -527,7 +527,7 @@ } &__form { - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin: 0; flex: 1 1 auto; } @@ -666,7 +666,7 @@ flex-grow: 1; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { &__asset-data { width: 60%; } @@ -868,7 +868,7 @@ display: flex; flex-flow: column; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100vw; height: 100vh; } @@ -882,7 +882,7 @@ align-items: center; justify-content: space-between; - @media screen and (max-width: $break-small) { + @include screen-sm-max { flex: 0 0 auto; } } @@ -909,7 +909,7 @@ display: flex; margin-bottom: 24px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { flex-flow: column; flex: 1 1 auto; } @@ -925,7 +925,7 @@ justify-content: space-between; position: relative; - @media screen and (max-width: $break-small) { + @include screen-sm-max { flex: 0 0 auto; } } diff --git a/ui/helpers/utils/is-mobile-view.js b/ui/helpers/utils/is-mobile-view.js index 55bbba0ba..310d49d6e 100644 --- a/ui/helpers/utils/is-mobile-view.js +++ b/ui/helpers/utils/is-mobile-view.js @@ -1,6 +1,6 @@ // Checks if viewport at invoke time fits mobile dimensions // isMobileView :: () => Bool const isMobileView = () => - window.matchMedia('screen and (max-width: $break-small)').matches; + window.matchMedia('screen and (max-width: 575px)').matches; export default isMobileView; diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss index 01988e2b7..82b6f3e83 100644 --- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss +++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss @@ -11,13 +11,13 @@ position: relative; height: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; top: 0; box-shadow: none; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 620px; } } diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss index 4e7a2c62b..7e1120255 100644 --- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss +++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss @@ -11,13 +11,13 @@ position: relative; height: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; top: 0; box-shadow: none; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 620px; } } diff --git a/ui/pages/create-account/import-account/index.scss b/ui/pages/create-account/import-account/index.scss index d40af3bfb..e0d62bf6b 100644 --- a/ui/pages/create-account/import-account/index.scss +++ b/ui/pages/create-account/import-account/index.scss @@ -11,7 +11,7 @@ align-items: center; padding: 0 30px 30px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 0 22px 22px; } diff --git a/ui/pages/create-account/index.scss b/ui/pages/create-account/index.scss index a39b96980..cba93d46a 100644 --- a/ui/pages/create-account/index.scss +++ b/ui/pages/create-account/index.scss @@ -14,7 +14,7 @@ display: none; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { position: absolute; } diff --git a/ui/pages/first-time-flow/end-of-flow/index.scss b/ui/pages/first-time-flow/end-of-flow/index.scss index 94aa971ef..4667e05d8 100644 --- a/ui/pages/first-time-flow/end-of-flow/index.scss +++ b/ui/pages/first-time-flow/end-of-flow/index.scss @@ -6,7 +6,7 @@ width: 742px; margin-top: 3%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; } } @@ -30,7 +30,7 @@ margin-top: 2px; margin-bottom: 2px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; margin-bottom: 16px; diff --git a/ui/pages/first-time-flow/index.scss b/ui/pages/first-time-flow/index.scss index 4ed5ae444..f6d26288a 100644 --- a/ui/pages/first-time-flow/index.scss +++ b/ui/pages/first-time-flow/index.scss @@ -4,7 +4,6 @@ @import 'end-of-flow/index'; @import 'metametrics-opt-in/index'; - .first-time-flow { width: 100%; background-color: var(--color-background-default); @@ -12,7 +11,7 @@ justify-content: center; &__wrapper { - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-width: 742px; display: flex; flex-direction: column; @@ -23,7 +22,7 @@ .app-header__metafox-logo { margin-bottom: 40px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-bottom: 0; } } @@ -54,7 +53,7 @@ margin-bottom: 24px; color: var(--color-text-default); - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; margin-bottom: 16px; @@ -105,11 +104,9 @@ } .first-time-flow__wrapper.intro { - @media screen and (min-width: $break-large) { + padding: 0 20px; + + @include screen-sm-min { max-width: 1010px; } - - @media screen and (max-width: 1010px) { - padding: 0 20px; - } } diff --git a/ui/pages/first-time-flow/metametrics-opt-in/index.scss b/ui/pages/first-time-flow/metametrics-opt-in/index.scss index b8ce8929c..c254a5d6a 100644 --- a/ui/pages/first-time-flow/metametrics-opt-in/index.scss +++ b/ui/pages/first-time-flow/metametrics-opt-in/index.scss @@ -13,7 +13,7 @@ margin-right: 28%; color: var(--color-text-default); - @media screen and (max-width: $break-small) { + @include screen-sm-max { justify-content: center; margin-left: 2%; margin-right: 0%; @@ -99,7 +99,7 @@ &__footer { margin-top: 26px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-top: 10px; justify-content: center; margin-left: 2%; diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss index 3ff753ce7..19c5ee07a 100644 --- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss +++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss @@ -4,7 +4,7 @@ } &__sorted-seed-words { - max-width: $break-small; + max-width: $screen-sm-max; } &__seed-word { @@ -57,7 +57,7 @@ color: transparent; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; padding: 6px 18px; @@ -70,7 +70,7 @@ display: flex; flex-flow: row wrap; min-height: 161px; - max-width: $break-small; + max-width: $screen-sm-max; border: 1px solid var(--color-border-muted); border-radius: 6px; background-color: var(--color-background-default); diff --git a/ui/pages/first-time-flow/seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/index.scss index 4bb2b8255..f7505907e 100644 --- a/ui/pages/first-time-flow/seed-phrase/index.scss +++ b/ui/pages/first-time-flow/seed-phrase/index.scss @@ -6,11 +6,11 @@ &__sections { display: flex; - @media screen and (min-width: $break-large) { + @include screen-sm-min { flex-direction: row; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { flex-direction: column; } } @@ -24,11 +24,11 @@ flex: 2; min-width: 0; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-left: 81px; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-top: 24px; } diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index f000930cc..fce4022d5 100644 --- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss @@ -1,5 +1,5 @@ .reveal-seed-phrase { - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: flex; flex-direction: column; width: 96%; diff --git a/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/index.scss b/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/index.scss index f0aeb8979..9ae1b16dc 100644 --- a/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/index.scss +++ b/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/index.scss @@ -2,11 +2,11 @@ &__sections { display: flex; - @media screen and (min-width: $break-large) { + @include screen-sm-min { flex-direction: row; } - @media screen and (max-width: 970px) { + @include screen-md-max { flex-direction: column; } } @@ -20,7 +20,7 @@ flex: 1; min-width: 0; - @media screen and (max-width: 970px) { + @include screen-md-max { margin-top: 24px; } } @@ -28,7 +28,7 @@ video { border-radius: 8px; - @media screen and (max-width: 970px) { + @include screen-md-max { width: 95%; } } diff --git a/ui/pages/first-time-flow/welcome/index.scss b/ui/pages/first-time-flow/welcome/index.scss index 69f0f0a9c..f3dd786f7 100644 --- a/ui/pages/first-time-flow/welcome/index.scss +++ b/ui/pages/first-time-flow/welcome/index.scss @@ -38,7 +38,7 @@ color: var(--color-primary-default); } - @media screen and (max-width: $break-small) { + @include screen-sm-max { font-size: 0.9rem; } } diff --git a/ui/pages/home/index.scss b/ui/pages/home/index.scss index 388a4f008..b4accb829 100644 --- a/ui/pages/home/index.scss +++ b/ui/pages/home/index.scss @@ -182,7 +182,7 @@ margin-inline-start: 8px; padding: 8px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-bottom: 50px; margin-inline-end: 8px; left: 70%; diff --git a/ui/pages/import-token/token-list/token-list-placeholder/index.scss b/ui/pages/import-token/token-list/token-list-placeholder/index.scss index 3024e2023..e97741621 100644 --- a/ui/pages/import-token/token-list/token-list-placeholder/index.scss +++ b/ui/pages/import-token/token-list/token-list-placeholder/index.scss @@ -16,7 +16,7 @@ margin-top: 8px; opacity: 0.5; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 60%; } } diff --git a/ui/pages/keychains/index.scss b/ui/pages/keychains/index.scss index 1c081b686..45003490a 100644 --- a/ui/pages/keychains/index.scss +++ b/ui/pages/keychains/index.scss @@ -13,7 +13,7 @@ } -@media screen and (min-width: 1281px) { +@include screen-lg-min { .first-view-main { width: 62vw; } @@ -27,7 +27,7 @@ max-width: initial; } -@media only screen and (max-width: $break-small) { +@include screen-sm-max { .import-account { margin: 24px; display: flex; diff --git a/ui/pages/notifications/index.scss b/ui/pages/notifications/index.scss index a76a4cb87..929bdae68 100644 --- a/ui/pages/notifications/index.scss +++ b/ui/pages/notifications/index.scss @@ -12,7 +12,7 @@ padding: 65px 24px 15px 24px; border-bottom: 1px solid var(--color-border-muted); - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 10px 20px; } @@ -27,7 +27,7 @@ margin-left: 26px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; margin-left: 16px; @@ -39,7 +39,7 @@ &_button { width: auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { font-size: 0.75rem; padding: 3.5px 1rem; } @@ -52,7 +52,7 @@ flex-direction: column; flex: 1 1 auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: 100%; } @@ -62,7 +62,7 @@ color: var(--color-text-muted); text-align: center; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H6; } } diff --git a/ui/pages/onboarding-flow/create-password/index.scss b/ui/pages/onboarding-flow/create-password/index.scss index dc87f8cc6..c501c77b7 100644 --- a/ui/pages/onboarding-flow/create-password/index.scss +++ b/ui/pages/onboarding-flow/create-password/index.scss @@ -23,7 +23,7 @@ } &__form { - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-width: 320px; } diff --git a/ui/pages/onboarding-flow/creation-successful/index.scss b/ui/pages/onboarding-flow/creation-successful/index.scss index 5aa7567bf..df40050cf 100644 --- a/ui/pages/onboarding-flow/creation-successful/index.scss +++ b/ui/pages/onboarding-flow/creation-successful/index.scss @@ -1,5 +1,5 @@ .creation-successful { - @media screen and (min-width: $break-large) { + @include screen-sm-min { display: flex; flex-direction: column; align-items: center; diff --git a/ui/pages/onboarding-flow/index.scss b/ui/pages/onboarding-flow/index.scss index 72d384031..3353f010f 100644 --- a/ui/pages/onboarding-flow/index.scss +++ b/ui/pages/onboarding-flow/index.scss @@ -21,7 +21,7 @@ border: 1px solid var(--color-border-muted); border-radius: 24px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin: 64px auto 40px; padding: 32px; } diff --git a/ui/pages/onboarding-flow/metametrics/index.scss b/ui/pages/onboarding-flow/metametrics/index.scss index 568a367a9..ff77a4e28 100644 --- a/ui/pages/onboarding-flow/metametrics/index.scss +++ b/ui/pages/onboarding-flow/metametrics/index.scss @@ -1,5 +1,5 @@ .onboarding-metametrics { - @media screen and (min-width: $break-large) { + @include screen-sm-min { display: flex; flex-direction: column; justify-content: center; @@ -37,7 +37,7 @@ margin-top: 24px; width: 100%; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-top: 40px; justify-content: space-between; display: flex; @@ -46,7 +46,7 @@ button { margin-bottom: 24px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 200px; } } diff --git a/ui/pages/onboarding-flow/onboarding-app-header/index.scss b/ui/pages/onboarding-flow/onboarding-app-header/index.scss index 400ca9231..5d22608f7 100644 --- a/ui/pages/onboarding-flow/onboarding-app-header/index.scss +++ b/ui/pages/onboarding-flow/onboarding-app-header/index.scss @@ -8,12 +8,12 @@ width: 100%; flex: 0 0 auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 16px; z-index: $mobile-header-z-index; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 75px; justify-content: center; } @@ -22,13 +22,13 @@ &--icon { height: 32px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { display: none; } } &--horizontal { - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: none; } } @@ -40,19 +40,19 @@ width: 100%; justify-content: space-between; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: 100%; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 85vw; } - @media screen and (min-width: 769px) { + @include screen-md-min { width: 90vw; } - @media screen and (min-width: 1281px) { + @include screen-lg-min { width: 62vw; } } diff --git a/ui/pages/onboarding-flow/privacy-settings/index.scss b/ui/pages/onboarding-flow/privacy-settings/index.scss index 0f3c1e874..0a623482b 100644 --- a/ui/pages/onboarding-flow/privacy-settings/index.scss +++ b/ui/pages/onboarding-flow/privacy-settings/index.scss @@ -4,11 +4,11 @@ justify-content: center; align-items: center; - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-bottom: 24px; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-bottom: 40px; } @@ -29,7 +29,7 @@ max-width: 620px; margin-bottom: 20px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-inline-start: 48px; margin-inline-end: 48px; } diff --git a/ui/pages/onboarding-flow/recovery-phrase/index.scss b/ui/pages/onboarding-flow/recovery-phrase/index.scss index 89fa4d1ed..039e206fe 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/index.scss +++ b/ui/pages/onboarding-flow/recovery-phrase/index.scss @@ -24,17 +24,10 @@ justify-items: center; align-items: center; row-gap: 16px; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - @media screen and (max-width: 460px) { - grid-template-columns: 198px; - } - - @media screen and (min-width: 460px) and (max-width: $break-small) { - grid-template-columns: 181px 181px; - } - - @media screen and (min-width: $break-large) { - grid-template-columns: 166px 166px 166px; + @include screen-sm-min { + grid-template-columns: 1fr 1fr 1fr; } &--hidden { @@ -85,7 +78,7 @@ align-items: center; width: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-inline-start: 40px; margin-inline-end: 40px; margin-bottom: 40px; @@ -98,7 +91,7 @@ align-items: center; width: 100%; - @media screen and (min-width: $break-small) { + @include screen-md-min { margin-top: 20px; } @@ -112,7 +105,7 @@ &--button { align-self: center; - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-width: 300px; } } @@ -127,7 +120,7 @@ flex-direction: row; justify-content: space-between; - @media screen and (min-width: $break-large) { + @include screen-sm-min { justify-content: space-around; } } @@ -152,7 +145,7 @@ justify-content: flex-end; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { justify-content: center; width: 100%; } @@ -187,7 +180,7 @@ } &__confirm { - @media screen and (min-width: $break-large) { + @include screen-sm-min { display: flex; flex-direction: column; align-items: center; diff --git a/ui/pages/onboarding-flow/secure-your-wallet/index.scss b/ui/pages/onboarding-flow/secure-your-wallet/index.scss index 9fcad972f..a5b401b6c 100644 --- a/ui/pages/onboarding-flow/secure-your-wallet/index.scss +++ b/ui/pages/onboarding-flow/secure-your-wallet/index.scss @@ -14,14 +14,14 @@ justify-content: space-between; width: 100%; - @media screen and (min-width: $break-large) { + @include screen-sm-min { flex-direction: row; } button { margin-bottom: 16px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { + button { margin-left: 16px; } @@ -42,7 +42,7 @@ padding: 12px; border-radius: 10px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-inline-end: 43px; } } diff --git a/ui/pages/onboarding-flow/welcome/index.scss b/ui/pages/onboarding-flow/welcome/index.scss index 3131edfec..a2cab4582 100644 --- a/ui/pages/onboarding-flow/welcome/index.scss +++ b/ui/pages/onboarding-flow/welcome/index.scss @@ -15,7 +15,7 @@ opacity: 1; color: var(--color-icon-default); - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding: 40px; } } diff --git a/ui/pages/permissions-connect/choose-account/index.scss b/ui/pages/permissions-connect/choose-account/index.scss index 9681d0b01..5456135bf 100644 --- a/ui/pages/permissions-connect/choose-account/index.scss +++ b/ui/pages/permissions-connect/choose-account/index.scss @@ -24,7 +24,7 @@ flex-direction: column; justify-content: flex-end; - @media screen and (min-width: $break-large) { + @include screen-sm-min { flex-direction: column-reverse; justify-content: space-between; padding-bottom: 20px; @@ -40,7 +40,7 @@ margin-top: 12px; border-top: 1px solid var(--color-border-muted); - @media screen and (min-width: $break-large) { + @include screen-sm-min { border-top: none; } diff --git a/ui/pages/permissions-connect/index.scss b/ui/pages/permissions-connect/index.scss index 76c709ec2..689ca7b45 100644 --- a/ui/pages/permissions-connect/index.scss +++ b/ui/pages/permissions-connect/index.scss @@ -11,7 +11,7 @@ display: flex; flex-direction: column; - @media screen and (min-width: $break-large) { + @include screen-sm-min { .page-container { max-height: none; min-height: auto; diff --git a/ui/pages/settings/contact-list-tab/index.scss b/ui/pages/settings/contact-list-tab/index.scss index 543635c97..a693a6540 100644 --- a/ui/pages/settings/contact-list-tab/index.scss +++ b/ui/pages/settings/contact-list-tab/index.scss @@ -7,7 +7,7 @@ .address-book { flex: 0.4 1 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { flex: 1; max-width: 100%; @@ -215,7 +215,7 @@ right: 16px; width: auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { top: 8px; right: 60px; @@ -233,7 +233,7 @@ .address-book-contact-content { flex: 0.4 1 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { flex: 1; } } diff --git a/ui/pages/settings/flask/snaps-list-tab/index.scss b/ui/pages/settings/flask/snaps-list-tab/index.scss index d3bb0e2af..927849aec 100644 --- a/ui/pages/settings/flask/snaps-list-tab/index.scss +++ b/ui/pages/settings/flask/snaps-list-tab/index.scss @@ -9,7 +9,7 @@ &__body { padding: 12px 18px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding: 12px; } } diff --git a/ui/pages/settings/flask/view-snap/index.scss b/ui/pages/settings/flask/view-snap/index.scss index a57304df6..25b584dda 100644 --- a/ui/pages/settings/flask/view-snap/index.scss +++ b/ui/pages/settings/flask/view-snap/index.scss @@ -1,7 +1,7 @@ .view-snap { padding: 12px 18px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding: 12px; } @@ -14,7 +14,7 @@ display: flex; flex-flow: row nowrap; - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-inline-end: 0; padding: 0 0 16px; flex-direction: column; @@ -28,7 +28,7 @@ border-bottom: 1px solid var(--color-border-muted); margin-inline-end: 24px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-inline-end: 0; } } @@ -38,7 +38,7 @@ } &__title { - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding-bottom: 16px; } } @@ -48,14 +48,14 @@ display: flex; flex-grow: 1; - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; justify-content: space-between; } } &__pill-container { - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding-left: 0; display: inline-block; } @@ -64,7 +64,7 @@ &__toggle-container { margin-left: auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding-left: 0; display: inline-block; } @@ -75,7 +75,7 @@ } &__content-container { - @media screen and (max-width: $break-small) { + @include screen-sm-max { width: 100%; } } @@ -89,7 +89,7 @@ padding-bottom: 16px; margin-bottom: 16px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: initial; padding: 5px 0 16px; } @@ -124,7 +124,7 @@ &__remove-button { max-width: 175px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { align-self: center; } } diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss index caf7e0f7f..8dba19d34 100644 --- a/ui/pages/settings/index.scss +++ b/ui/pages/settings/index.scss @@ -16,7 +16,7 @@ padding: 8px 24px 8px 24px; position: relative; - @media screen and (max-width: $break-small) { + @include screen-sm-max { background: var(--color-background-alternative); } @@ -42,7 +42,7 @@ flex: 1 0 auto; - @media screen and (max-width: $break-small) { + @include screen-sm-max { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -52,18 +52,18 @@ } &__search { - @media screen and (max-width: $break-small) { + @include screen-sm-max { position: relative; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { position: absolute; right: 57px; top: 10px; width: 300px; } - @media screen and (min-width: $break-midpoint) { + @include screen-md-min { width: 400px; } @@ -109,7 +109,7 @@ } &__section-multiple-lines { - @media screen and (max-width: $break-small) { + @include screen-sm-max { margin-left: 10px; } } @@ -144,7 +144,7 @@ display: flex; flex-flow: row nowrap; - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: none; } } @@ -171,7 +171,7 @@ align-items: center; padding: 16px 0; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: 69px; position: relative; text-align: center; @@ -181,7 +181,7 @@ &__sub-header-text { @include H4; - @media screen and (max-width: $break-small) { + @include screen-sm-max { @include H5; width: 100%; @@ -191,7 +191,7 @@ &__back-button { display: none; - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: block; margin-right: 8px; cursor: pointer; @@ -215,14 +215,14 @@ flex-direction: column; flex: 1 1 auto; - @media screen and (min-width: $break-large) { + @include screen-sm-min { flex: 0 0 40%; max-width: 197px; padding-top: 13px; } .tab-bar__tab { - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-height: 50px; } } @@ -234,7 +234,7 @@ display: flex; flex-flow: column; - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: none; } } @@ -243,7 +243,7 @@ &__body { padding: 12px 24px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding: 12px; } } @@ -270,7 +270,7 @@ flex-direction: column; margin-bottom: 20px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { height: initial; padding: 5px 0; } @@ -344,7 +344,7 @@ display: flex; flex-direction: column; - @media screen and (max-width: $break-small) { + @include screen-sm-max { max-width: 100%; width: 100%; } @@ -380,13 +380,13 @@ .settings-page { &__content { &__tabs { - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: none; } } &__modules { - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: block; } } diff --git a/ui/pages/settings/info-tab/index.scss b/ui/pages/settings/info-tab/index.scss index f08538ea8..c2a08c1b8 100644 --- a/ui/pages/settings/info-tab/index.scss +++ b/ui/pages/settings/info-tab/index.scss @@ -16,7 +16,7 @@ &__link-header { padding-bottom: 15px; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding-bottom: 5px; } } @@ -29,7 +29,7 @@ &__link-item { padding: 15px 0; - @media screen and (max-width: $break-small) { + @include screen-sm-max { padding: 5px 0; } } diff --git a/ui/pages/settings/networks-tab/index.scss b/ui/pages/settings/networks-tab/index.scss index f10554839..d34a749f8 100644 --- a/ui/pages/settings/networks-tab/index.scss +++ b/ui/pages/settings/networks-tab/index.scss @@ -14,7 +14,7 @@ isolation: isolate; } - @media screen and (min-width: $break-large) { + @include screen-sm-min { display: grid; grid-template-columns: 1fr 1fr; } @@ -49,7 +49,7 @@ display: flex; flex-direction: column; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-inline-end: 16px; margin-bottom: 24px; } @@ -58,7 +58,7 @@ &__subheader { display: none; - @media screen and (min-width: $break-large) { + @include screen-sm-min { @include H4; padding: 16px 4px; @@ -80,7 +80,7 @@ &__network-form { padding: 16px 24px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding: 16px; } @@ -99,7 +99,7 @@ gap: 16px; padding: 16px 24px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding: 16px; min-width: 160px; // Allow network form to take priority in the grid on resize border-right: 1px solid var(--color-border-muted); @@ -108,7 +108,7 @@ &__custom-search-network { @include H6; - @media screen and (min-width: $break-large) { + @include screen-sm-min { @include Paragraph; } } @@ -125,7 +125,7 @@ width: 100%; background: var(--color-background-default); - @media screen and (min-width: $break-large) { + @include screen-sm-min { display: none; } } @@ -138,13 +138,13 @@ padding: 10px; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: none; } } &__networks-list--selection { - @media screen and (max-width: $break-small) { + @include screen-sm-max { display: none; } } @@ -175,7 +175,7 @@ padding-top: 3px; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { color: var(--color-text-default); } } @@ -184,7 +184,7 @@ font-weight: bold; color: var(--color-text-default); - @media screen and (max-width: $break-small) { + @include screen-sm-max { font-weight: normal; color: var(--color-text-default); } @@ -193,7 +193,7 @@ &__networks-list-name--disabled { color: var(--color-text-muted); - @media screen and (max-width: $break-small) { + @include screen-sm-max { color: var(--color-text-default); } } @@ -224,7 +224,7 @@ padding: 16px 24px; grid-column: span 2; // spread both columns of grid layout - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-width: 400px; // but only expand to 400px padding: 16px; } diff --git a/ui/pages/swaps/build-quote/index.scss b/ui/pages/swaps/build-quote/index.scss index bf28abb1a..f09573b23 100644 --- a/ui/pages/swaps/build-quote/index.scss +++ b/ui/pages/swaps/build-quote/index.scss @@ -141,7 +141,7 @@ &__open-to-dropdown { max-height: 194px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { max-height: 276px; } } diff --git a/ui/pages/swaps/countdown-timer/index.scss b/ui/pages/swaps/countdown-timer/index.scss index a936ad616..f07a54741 100644 --- a/ui/pages/swaps/countdown-timer/index.scss +++ b/ui/pages/swaps/countdown-timer/index.scss @@ -4,7 +4,7 @@ display: flex; justify-content: center; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin: 0; } diff --git a/ui/pages/swaps/index.scss b/ui/pages/swaps/index.scss index 4d2f8f6c9..74f0c3e14 100644 --- a/ui/pages/swaps/index.scss +++ b/ui/pages/swaps/index.scss @@ -23,7 +23,7 @@ justify-content: center; width: 100%; - @media screen and (min-width: $break-large) { + @include screen-sm-min { z-index: 12; } @@ -31,7 +31,7 @@ margin-left: 24px; margin-right: 24px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-left: 20px; margin-right: 20px; } @@ -46,7 +46,7 @@ overflow-x: hidden; overflow-y: auto; - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 460px; background: var(--color-background-default); border: 1px solid var(--color-border-muted); @@ -64,13 +64,13 @@ width: 100%; height: 100%; - @media screen and (max-width: $break-small) { + @include screen-sm-max { &--overflow { overflow: scroll; } } - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 348px; } } @@ -97,7 +97,7 @@ position: relative; flex-direction: row; - @media screen and (min-width: $break-large) { + @include screen-sm-min { padding-top: 8px; padding-bottom: 8px; height: 66px; diff --git a/ui/pages/swaps/select-quote-popover/index.scss b/ui/pages/swaps/select-quote-popover/index.scss index e2e5bd829..6f7c46439 100644 --- a/ui/pages/swaps/select-quote-popover/index.scss +++ b/ui/pages/swaps/select-quote-popover/index.scss @@ -9,7 +9,7 @@ &__popover-wrap { height: 100%; - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 620px; width: 348px; } @@ -31,7 +31,7 @@ background: var(--color-background-alternative); opacity: 1; - @media screen and (min-width: $break-large) { + @include screen-sm-min { opacity: 0.5; } } diff --git a/ui/pages/swaps/swaps-footer/index.scss b/ui/pages/swaps/swaps-footer/index.scss index 55f5e9730..c06454a83 100644 --- a/ui/pages/swaps/swaps-footer/index.scss +++ b/ui/pages/swaps/swaps-footer/index.scss @@ -9,7 +9,7 @@ } - @media screen and (max-width: $break-small) { + @include screen-sm-max { &--border { .swaps-footer__custom-page-container-footer-class { border-top: 1px solid var(--color-border-muted); @@ -20,7 +20,7 @@ &__custom-page-container-footer-class { border-top: none; - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 96px; } } @@ -44,7 +44,7 @@ display: flex; justify-content: center; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-top: 0; } } diff --git a/ui/pages/swaps/view-quote/index.scss b/ui/pages/swaps/view-quote/index.scss index 7f671e901..0f955d0ee 100644 --- a/ui/pages/swaps/view-quote/index.scss +++ b/ui/pages/swaps/view-quote/index.scss @@ -28,13 +28,13 @@ pointer-events: none; } - @media screen and (max-width: $break-small) { + @include screen-sm-max { overflow-y: auto; max-height: 420px; } } - @media screen and (min-width: $break-large) { + @include screen-sm-min { width: 348px; } @@ -134,7 +134,7 @@ margin-top: 8px; margin-bottom: 8px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { &--thin { min-height: 36px; } @@ -160,7 +160,7 @@ max-width: 311px; margin-bottom: 8px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-bottom: 0; } } @@ -182,7 +182,7 @@ &__thin-swaps-footer { max-height: 82px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { height: 72px; } } diff --git a/ui/pages/token-details/index.scss b/ui/pages/token-details/index.scss index c62952340..0bce7cfc6 100644 --- a/ui/pages/token-details/index.scss +++ b/ui/pages/token-details/index.scss @@ -28,7 +28,7 @@ float: right; margin-inline-start: 62px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-inline-start: 112px; } } @@ -38,7 +38,7 @@ height: 39px; margin-top: 70px; - @media screen and (min-width: $break-large) { + @include screen-sm-min { margin-inline-start: 20px; } }