From f46dda0195204480f7bcfd1e9a2a486fb4b9e0e7 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 15 Jul 2020 10:13:40 -0300 Subject: [PATCH] Uncomment and fix all auto-fixable stylelint rules (#8989) All stylelint rules that can be automatically fixed have been uncommented. The rules are: * `at-rule-empty-line-before` * `block-closing-brace-empty-line-before` * `block-closing-brace-newline-before` * `block-opening-brace-space-before` * `color-hex-case` * `color-hex-length` * `comment-empty-line-before` * `declaration-block-semicolon-newline-after` * `declaration-block-semicolon-space-after` * `declaration-block-trailing-semicolon` * `declaration-colon-space-after` * `declaration-empty-line-before` * `function-comma-space-after` * `function-comma-space-before` * `indentation` * `length-zero-no-unit` * `no-eol-whitespace` * `no-missing-end-of-source-newline` * `number-leading-zero` * `number-no-trailing-zeros` * `rule-empty-line-before` * `selector-list-comma-newline-after` * `selector-pseudo-element-colon-notation` --- stylelint.config.js | 96 +++++----- ui/app/components/app/account-menu/index.scss | 4 +- .../unconnected-account-alert.scss | 6 +- ui/app/components/app/app-header/index.scss | 1 + .../confirm-detail-row/index.scss | 6 +- .../confirm-page-container-summary/index.scss | 2 +- .../confirm-page-container-warning/index.scss | 2 +- .../confirm-page-container-content/index.scss | 13 +- .../index.scss | 22 +-- .../app/confirm-page-container/index.scss | 3 - .../app/connected-accounts-list/index.scss | 9 +- .../connected-accounts-permissions/index.scss | 9 +- .../app/connected-sites-list/index.scss | 2 +- .../app/connected-status-indicator/index.scss | 17 +- .../advanced-gas-inputs/index.scss | 17 +- .../advanced-tab-content/index.scss | 22 +-- .../basic-tab-content/index.scss | 2 +- .../gas-modal-page-container/index.scss | 17 +- .../gas-price-button-group/index.scss | 25 +-- .../gas-price-chart/index.scss | 35 ++-- .../gas-customization/gas-slider/index.scss | 6 +- .../app/gas-customization/index.scss | 3 - .../app/home-notification/index.scss | 14 +- ui/app/components/app/index.scss | 58 ------ ui/app/components/app/info-box/index.scss | 2 +- ui/app/components/app/menu-bar/index.scss | 3 +- .../app/modal/modal-content/index.scss | 2 +- .../add-to-addressbook-modal/index.scss | 3 + .../cancel-transaction-gas-fee/index.scss | 4 +- .../app/modals/cancel-transaction/index.scss | 2 +- .../modals/confirm-remove-account/index.scss | 4 +- .../edit-approval-permission/index.scss | 30 ++-- ui/app/components/app/modals/index.scss | 7 - .../metametrics-opt-in-modal/index.scss | 2 +- .../app/modals/new-account-modal/index.scss | 6 +- .../app/modals/reject-transactions/index.scss | 2 +- .../modals/transaction-confirmed/index.scss | 2 +- .../app/multiple-notifications/index.scss | 2 - .../components/app/network-display/index.scss | 2 +- .../app/permission-page-container/index.scss | 9 +- .../app/permissions-connect-footer/index.scss | 7 +- .../app/permissions-connect-header/index.scss | 6 +- .../app/selected-account/index.scss | 4 +- ui/app/components/app/sidebars/index.scss | 4 +- .../app/sidebars/sidebar-content.scss | 5 +- .../app/signature-request/index.scss | 142 +++++++-------- .../signature-request-footer/index.scss | 31 ++-- .../signature-request-header/index.scss | 7 +- .../signature-request-message/index.scss | 131 +++++++------- .../app/transaction-activity-log/index.scss | 4 +- .../app/transaction-breakdown/index.scss | 1 - .../transaction-breakdown-row/index.scss | 2 +- .../transaction-list-item-details/index.scss | 3 +- .../app/transaction-list-item/index.scss | 7 +- .../app/transaction-list/index.scss | 1 + .../app/transaction-status/index.scss | 7 + .../components/app/wallet-overview/index.scss | 6 +- .../ui/alert-circle-icon/index.scss | 2 +- ui/app/components/ui/button-group/index.scss | 4 +- ui/app/components/ui/button/buttons.scss | 44 +++-- ui/app/components/ui/card/index.scss | 2 +- ui/app/components/ui/check-box/index.scss | 3 +- ui/app/components/ui/circle-icon/index.scss | 2 +- .../components/ui/currency-input/index.scss | 6 +- ui/app/components/ui/dialog/dialog.scss | 2 +- ui/app/components/ui/dropdown/dropdown.scss | 5 +- ui/app/components/ui/error-message/index.scss | 2 +- .../ui/icon-border/icon-border.scss | 5 +- .../components/ui/icon/preloader/index.scss | 5 +- ui/app/components/ui/list-item/index.scss | 9 +- ui/app/components/ui/menu/menu.scss | 5 +- .../components/ui/page-container/index.scss | 9 +- ui/app/components/ui/popover/index.scss | 13 +- .../ui/sender-to-recipient/index.scss | 14 +- ui/app/components/ui/snackbar/index.scss | 3 +- ui/app/components/ui/tabs/index.scss | 1 - ui/app/components/ui/toggle-button/index.scss | 3 +- ui/app/components/ui/unit-input/index.scss | 3 +- ui/app/css/index.scss | 6 - .../itcss/components/account-dropdown.scss | 6 +- ui/app/css/itcss/components/alert.scss | 12 +- ui/app/css/itcss/components/confirm.scss | 5 +- ui/app/css/itcss/components/index.scss | 23 --- .../css/itcss/components/loading-overlay.scss | 2 +- ui/app/css/itcss/components/menu.scss | 10 +- ui/app/css/itcss/components/modal.scss | 25 +-- ui/app/css/itcss/components/network.scss | 20 +-- ui/app/css/itcss/components/new-account.scss | 30 ++-- .../css/itcss/components/newui-sections.scss | 6 +- ui/app/css/itcss/components/pages/index.scss | 1 - .../components/request-decrypt-message.scss | 165 +++++++++--------- .../request-encryption-public-key.scss | 14 +- .../itcss/components/request-signature.scss | 4 +- ui/app/css/itcss/components/sections.scss | 22 +-- ui/app/css/itcss/components/send.scss | 63 ++++--- .../css/itcss/components/simple-dropdown.scss | 4 +- ui/app/css/itcss/components/tab-bar.scss | 8 +- ui/app/css/itcss/components/tooltip.scss | 2 +- .../itcss/components/transaction-list.scss | 20 +-- ui/app/css/itcss/generic/index.scss | 7 +- ui/app/css/itcss/generic/reset.scss | 9 +- ui/app/css/itcss/settings/index.scss | 1 - ui/app/css/itcss/settings/typography.scss | 16 +- ui/app/css/itcss/settings/variables.scss | 54 +++--- ui/app/css/itcss/tools/utilities.scss | 4 +- ui/app/pages/add-token/index.scss | 1 - ui/app/pages/add-token/token-list/index.scss | 8 +- .../token-list-placeholder/index.scss | 5 +- ui/app/pages/asset/asset.scss | 2 +- ui/app/pages/confirm-add-token/index.scss | 2 +- .../confirm-approve-content/index.scss | 36 ++-- ui/app/pages/connected-accounts/index.scss | 5 +- ui/app/pages/connected-sites/index.scss | 8 +- ui/app/pages/error/index.scss | 2 - .../first-time-flow/end-of-flow/index.scss | 7 +- ui/app/pages/first-time-flow/index.scss | 22 +-- .../metametrics-opt-in/index.scss | 9 +- .../confirm-seed-phrase/index.scss | 4 +- .../first-time-flow/seed-phrase/index.scss | 4 +- .../seed-phrase/reveal-seed-phrase/index.scss | 8 +- .../first-time-flow/select-action/index.scss | 13 +- .../pages/first-time-flow/welcome/index.scss | 2 +- ui/app/pages/home/index.scss | 9 +- ui/app/pages/index.scss | 13 -- ui/app/pages/keychains/index.scss | 28 +-- .../choose-account/index.scss | 18 +- ui/app/pages/permissions-connect/index.scss | 6 +- ui/app/pages/send/send.scss | 57 +++--- .../settings/contact-list-tab/index.scss | 34 ++-- ui/app/pages/settings/index.scss | 21 +-- ui/app/pages/settings/networks-tab/index.scss | 28 +-- ui/app/pages/settings/settings-tab/index.scss | 1 + 132 files changed, 928 insertions(+), 947 deletions(-) diff --git a/stylelint.config.js b/stylelint.config.js index 7788eeac4..3582b90ef 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,32 +1,33 @@ module.exports = { rules: { // stylelint-config-standard - // 'at-rule-empty-line-before': [ - // 'always', - // { - // except: ['blockless-after-same-name-blockless', 'first-nested'], - // ignore: ['after-comment'], - // }, - // ], + + 'at-rule-empty-line-before': [ + 'always', + { + except: ['blockless-after-same-name-blockless', 'first-nested'], + ignore: ['after-comment'], + }, + ], 'at-rule-name-case': 'lower', 'at-rule-name-space-after': 'always-single-line', 'at-rule-semicolon-newline-after': 'always', - // 'block-closing-brace-empty-line-before': 'never', + 'block-closing-brace-empty-line-before': 'never', 'block-closing-brace-newline-after': 'always', - // 'block-closing-brace-newline-before': 'always-multi-line', + 'block-closing-brace-newline-before': 'always-multi-line', 'block-closing-brace-space-before': 'always-single-line', 'block-opening-brace-newline-after': 'always-multi-line', 'block-opening-brace-space-after': 'always-single-line', - // 'block-opening-brace-space-before': 'always', - // 'color-hex-case': 'lower', - // 'color-hex-length': 'short', - // 'comment-empty-line-before': [ - // 'always', - // { - // except: ['first-nested'], - // ignore: ['stylelint-commands'], - // }, - // ], + 'block-opening-brace-space-before': 'always', + 'color-hex-case': 'lower', + 'color-hex-length': 'short', + 'comment-empty-line-before': [ + 'always', + { + except: ['first-nested'], + ignore: ['stylelint-commands'], + }, + ], // 'comment-whitespace-inside': 'always', 'custom-property-empty-line-before': [ 'always', @@ -37,31 +38,31 @@ module.exports = { ], 'declaration-bang-space-after': 'never', 'declaration-bang-space-before': 'always', - // 'declaration-block-semicolon-newline-after': 'always-multi-line', - // 'declaration-block-semicolon-space-after': 'always-single-line', + 'declaration-block-semicolon-newline-after': 'always-multi-line', + 'declaration-block-semicolon-space-after': 'always-single-line', 'declaration-block-semicolon-space-before': 'never', 'declaration-block-single-line-max-declarations': 1, - // 'declaration-block-trailing-semicolon': 'always', + 'declaration-block-trailing-semicolon': 'always', 'declaration-colon-newline-after': 'always-multi-line', - // 'declaration-colon-space-after': 'always-single-line', + 'declaration-colon-space-after': 'always-single-line', 'declaration-colon-space-before': 'never', - // 'declaration-empty-line-before': [ - // 'always', - // { - // except: ['after-declaration', 'first-nested'], - // ignore: ['after-comment', 'inside-single-line-block'], - // }, - // ], + 'declaration-empty-line-before': [ + 'always', + { + except: ['after-declaration', 'first-nested'], + ignore: ['after-comment', 'inside-single-line-block'], + }, + ], 'function-comma-newline-after': 'always-multi-line', - // 'function-comma-space-after': 'always-single-line', - // 'function-comma-space-before': 'never', + 'function-comma-space-after': 'always-single-line', + 'function-comma-space-before': 'never', 'function-max-empty-lines': 0, 'function-name-case': 'lower', 'function-parentheses-newline-inside': 'always-multi-line', 'function-parentheses-space-inside': 'never-single-line', 'function-whitespace-after': 'always', - // indentation: 2, - // 'length-zero-no-unit': true, + indentation: 2, + 'length-zero-no-unit': true, // 'max-empty-lines': 1, 'media-feature-colon-space-after': 'always', 'media-feature-colon-space-before': 'never', @@ -72,31 +73,31 @@ module.exports = { 'media-query-list-comma-newline-after': 'always-multi-line', 'media-query-list-comma-space-after': 'always-single-line', 'media-query-list-comma-space-before': 'never', - // 'no-eol-whitespace': true, - // 'no-missing-end-of-source-newline': true, - // 'number-leading-zero': 'always', - // 'number-no-trailing-zeros': true, + 'no-eol-whitespace': true, + 'no-missing-end-of-source-newline': true, + 'number-leading-zero': 'always', + 'number-no-trailing-zeros': true, 'property-case': 'lower', - // 'rule-empty-line-before': [ - // 'always-multi-line', - // { - // except: ['first-nested'], - // ignore: ['after-comment'], - // }, - // ], + 'rule-empty-line-before': [ + 'always-multi-line', + { + except: ['first-nested'], + ignore: ['after-comment'], + }, + ], 'selector-attribute-brackets-space-inside': 'never', 'selector-attribute-operator-space-after': 'never', 'selector-attribute-operator-space-before': 'never', 'selector-combinator-space-after': 'always', 'selector-combinator-space-before': 'always', 'selector-descendant-combinator-no-non-space': true, - // 'selector-list-comma-newline-after': 'always', + 'selector-list-comma-newline-after': 'always', 'selector-list-comma-space-before': 'never', 'selector-max-empty-lines': 0, 'selector-pseudo-class-case': 'lower', 'selector-pseudo-class-parentheses-space-inside': 'never', 'selector-pseudo-element-case': 'lower', - // 'selector-pseudo-element-colon-notation': 'double', + 'selector-pseudo-element-colon-notation': 'double', 'selector-type-case': 'lower', 'unit-case': 'lower', // 'value-keyword-case': 'lower', @@ -106,6 +107,7 @@ module.exports = { 'value-list-max-empty-lines': 0, // custom rules + // 'color-named': 'never', // 'font-family-name-quotes': 'always-where-recommended', // 'font-weight-notation': 'numeric', diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss index 95755f2d0..8a2a34bc3 100644 --- a/ui/app/components/app/account-menu/index.scss +++ b/ui/app/components/app/account-menu/index.scss @@ -82,7 +82,7 @@ background-color: $dusty-gray; color: $black; font-weight: normal; - letter-spacing: .5px; + letter-spacing: 0.5px; } } @@ -176,7 +176,7 @@ background: #3f3f3f; z-index: 201; cursor: pointer; - opacity: .8; + opacity: 0.8; display: flex; justify-content: center; align-items: center; 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 54f37beac..35ffe43dd 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 @@ -17,7 +17,7 @@ } &__dismiss-button { - background: #037DD6; + background: #037dd6; color: white; height: 40px; width: 100px; @@ -29,8 +29,8 @@ margin-bottom: 16px; padding: 16px; font-size: 14px; - border: 1px solid #D73A49; - background: #F8EAE8; + border: 1px solid #d73a49; + background: #f8eae8; border-radius: 3px; } diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss index f93e6f600..aacbbf9be 100644 --- a/ui/app/components/app/app-header/index.scss +++ b/ui/app/components/app/app-header/index.scss @@ -32,6 +32,7 @@ &__metafox-logo { &--icon { height: 32px; + @media screen and (min-width: $break-large) { display: none; } 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 80eb9cce6..25b901ed3 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,7 @@ align-items: center; &__label { - font-size: .75rem; + font-size: 0.75rem; font-weight: 500; color: $scorpion; text-transform: uppercase; @@ -29,7 +29,7 @@ } &__header-text { - font-size: .75rem; + font-size: 0.75rem; text-transform: uppercase; margin-bottom: 6px; color: $scorpion; @@ -40,7 +40,7 @@ } &--total { - font-size: .625rem; + font-size: 0.625rem; } } 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 7f0f5d37a..4f1e1547a 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 @@ -12,7 +12,7 @@ &__action { text-transform: uppercase; color: $oslo-gray; - font-size: .75rem; + font-size: 0.75rem; padding: 3px 8px; border: 1px solid $oslo-gray; border-radius: 4px; 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 50545a1a2..8451165cf 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,7 @@ } &__warning { - font-size: .75rem; + font-size: 0.75rem; 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 50d15d193..854327f12 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 @@ -1,5 +1,4 @@ @import 'confirm-page-container-warning/index'; - @import 'confirm-page-container-summary/index'; .confirm-page-container-content { @@ -17,14 +16,14 @@ } &__data { - padding: 16px; - color: $oslo-gray; + padding: 16px; + color: $oslo-gray; } &__data-box { background-color: #f9fafa; padding: 12px; - font-size: .75rem; + font-size: 0.75rem; margin-bottom: 16px; word-wrap: break-word; max-height: 200px; @@ -60,7 +59,7 @@ } &__function-type { - font-size: .875rem; + font-size: 0.875rem; font-weight: 500; text-transform: capitalize; color: $black; @@ -68,8 +67,8 @@ } &__tab { - font-size: .75rem; - color: #8C8E94; + font-size: 0.75rem; + color: #8c8e94; text-transform: uppercase; margin: 0 8px; } 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 0cf184c60..fe3106aa8 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 @@ -16,19 +16,19 @@ padding-left: 5px; padding-right: 5px; } - + &__arrow:hover { -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); - -o-transform: scale(1.1); - transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); } &__arrow:active { -webkit-transform: scale(0.95); - -moz-transform: scale(0.95); - -o-transform: scale(0.95); - transform: scale(0.95); + -moz-transform: scale(0.95); + -o-transform: scale(0.95); + transform: scale(0.95); } &__textcontainer { @@ -47,8 +47,8 @@ &__imageflip { -webkit-transform: scaleX(-1); - -moz-transform: scaleX(-1); - -o-transform: scaleX(-1); - transform: scaleX(-1); + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + transform: scaleX(-1); } -} \ No newline at end of file +} diff --git a/ui/app/components/app/confirm-page-container/index.scss b/ui/app/components/app/confirm-page-container/index.scss index 3fc72c3a6..9723c2d23 100644 --- a/ui/app/components/app/confirm-page-container/index.scss +++ b/ui/app/components/app/confirm-page-container/index.scss @@ -1,9 +1,6 @@ @import 'confirm-page-container-content/index'; - @import 'confirm-page-container-header/index'; - @import 'confirm-detail-row/index'; - @import 'confirm-page-container-navigation/index'; .page-container { diff --git a/ui/app/components/app/connected-accounts-list/index.scss b/ui/app/components/app/connected-accounts-list/index.scss index fb462775e..f6dd23893 100644 --- a/ui/app/components/app/connected-accounts-list/index.scss +++ b/ui/app/components/app/connected-accounts-list/index.scss @@ -22,15 +22,18 @@ &__account-status { @extend %account-status-typography; + display: inline; color: $Grey-500; } &__account-status-link { @extend %account-status-typography; + display: block; - &, &:hover { + &, + &:hover { color: $curious-blue; cursor: pointer; } @@ -43,17 +46,15 @@ align-items: center; width: 100%; padding: 16px 24px; - border-top: 1px solid $geyser; &--highlight { background-color: $warning-light-yellow; border: 1px solid $warning-yellow; - box-sizing: border-box; padding: 16px; margin-bottom: 16px; - width: calc(100% - 16px) + width: calc(100% - 16px); } } diff --git a/ui/app/components/app/connected-accounts-permissions/index.scss b/ui/app/components/app/connected-accounts-permissions/index.scss index 712d0b431..8be840f9b 100644 --- a/ui/app/components/app/connected-accounts-permissions/index.scss +++ b/ui/app/components/app/connected-accounts-permissions/index.scss @@ -1,7 +1,6 @@ .connected-accounts-permissions { display: flex; flex-direction: column; - font-size: 12px; line-height: 17px; color: $Grey-500; @@ -20,15 +19,13 @@ justify-content: space-between; align-items: center; cursor: pointer; - font-size: 14px; line-height: 20px; - color: #24292E; + color: #24292e; button { font-size: 16px; line-height: 24px; - background: none; padding: 0; margin-left: 8px; @@ -49,10 +46,10 @@ } &__list-container { - max-height: 0px; + max-height: 0; overflow: hidden; height: auto; - transition: max-height 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); + transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1); &--expanded { // arbitrarily set hard coded value for effect to work diff --git a/ui/app/components/app/connected-sites-list/index.scss b/ui/app/components/app/connected-sites-list/index.scss index 8666cfedf..9922eec7a 100644 --- a/ui/app/components/app/connected-sites-list/index.scss +++ b/ui/app/components/app/connected-sites-list/index.scss @@ -11,7 +11,7 @@ flex-direction: row; justify-content: space-between; align-items: center; - border-top: 1px solid #D2D8DD; + border-top: 1px solid #d2d8dd; padding: 16px 24px; } diff --git a/ui/app/components/app/connected-status-indicator/index.scss b/ui/app/components/app/connected-status-indicator/index.scss index cc7f1d397..6d9711c0b 100644 --- a/ui/app/components/app/connected-status-indicator/index.scss +++ b/ui/app/components/app/connected-status-indicator/index.scss @@ -1,19 +1,18 @@ .connected-status-indicator { - display:flex; + display: flex; align-items: center; place-self: center start; - background: none; font-size: inherit; padding: 8px; border-radius: 100px; &:hover { - background-color: #F2F3F4; + background-color: #f2f3f4; } &:active { - background-color: #EDEDED; + background-color: #ededed; } &__inner-circle { @@ -23,7 +22,9 @@ background-color: transparent; } - &__green-circle, &__yellow-circle, &__grey-circle { + &__green-circle, + &__yellow-circle, + &__grey-circle { border-radius: 4px; height: 8px; width: 8px; @@ -34,15 +35,15 @@ } &__green-circle { - border-color: #4CD964; + border-color: #4cd964; } &__green-circle &__inner-circle { - background-color: #4CD964; + background-color: #4cd964; } &__yellow-circle { - border-color: #FFD33D; + border-color: #ffd33d; } &__grey-circle { 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 8b5913c60..b30a6a3b9 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,7 +11,7 @@ width: 47.5%; &__label { - color: #313B5E; + color: #313b5e; font-size: 12px; display: flex; justify-content: space-between; @@ -60,18 +60,19 @@ } &__input--error { - border: 1px solid $red; + border: 1px solid $red; } &__input--warning { - border: 1px solid $orange; + border: 1px solid $orange; } &__input-arrows { position: absolute; top: 7px; + /*rtl:ignore*/ - right: 0px; + right: 0; width: 17px; height: 24px; border: 1px solid #dadada; @@ -79,7 +80,7 @@ display: flex; flex-direction: column; color: #9b9b9b; - font-size: .8em; + font-size: 0.8em; border-bottom-right-radius: 4px; cursor: pointer; @@ -92,12 +93,12 @@ } &__i-wrap:hover { - background: #4EADE7; + background: #4eade7; color: $white; } i:hover { - background: #4EADE7; + background: #4eade7; } i { @@ -132,4 +133,4 @@ color: $dusty-gray; } } -} \ No newline at end of file +} 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 18772bc3c..039ccab2b 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 @@ -22,26 +22,27 @@ flex-flow: row; justify-content: space-between; font-size: 12px; - color: #888EA3; + color: #888ea3; } &__container { font-size: 16px; - margin-top: 0px; + margin-top: 0; } &__fee { font-size: 16px; - color: #313A5E; + color: #313a5e; } &__time-remaining { /*rtl:ignore*/ direction: ltr; - color: #313A5E; + color: #313a5e; font-size: 16px; - .minutes-num, .seconds-num { + .minutes-num, + .seconds-num { font-size: 16px; } @@ -50,7 +51,8 @@ font-size: 16px; } - .minutes-label, .seconds-label { + .minutes-label, + .seconds-label { font-size: 16px; } } @@ -59,14 +61,14 @@ &__fee-chart { margin-top: 8px; height: 265px; - background: #F8F9FB; + background: #f8f9fb; border-bottom: 1px solid #d2d8dd; border-top: 1px solid #d2d8dd; position: relative; &__title { font-size: 12px; - color: #313A5E; + color: #313a5e; margin-left: 22px; } @@ -79,7 +81,7 @@ padding-right: 19px; width: 100%; font-size: 10px; - color: #888EA3; + color: #888ea3; } .loading-overlay { @@ -99,6 +101,6 @@ margin-left: 20px; margin-right: 10px; margin-top: 10px; - margin-bottom: 20px + margin-bottom: 20px; } } 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 e34e4e328..06587323b 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 @@ -4,7 +4,7 @@ align-items: flex-start; padding-left: 21px; height: 324px; - background: #F5F7F8; + background: #f5f7f8; border-bottom: 1px solid #d2d8dd; &__title { 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 76c7d502c..c128d67ac 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 @@ -15,7 +15,7 @@ } &__header { - padding: 0px; + padding: 0; padding-top: 16px; &--no-padding-bottom { @@ -32,7 +32,7 @@ &__header-close-text { font-size: 14px; - color: #4EADE7; + color: #4eade7; position: absolute; top: 16px; right: 16px; @@ -56,7 +56,7 @@ } &__tabs { - margin-top: 0px; + margin-top: 0; } &__tab { @@ -85,7 +85,8 @@ } - &__info-row, &__info-row--fade { + &__info-row, + &__info-row--fade { width: 100%; background: $polar; padding: 15px 21px; @@ -98,7 +99,10 @@ padding: 4px 21px; } - &__send-info, &__transaction-info, &__total-info, &__fiat-total-info { + &__send-info, + &__transaction-info, + &__total-info, + &__fiat-total-info { display: flex; flex-flow: row; justify-content: space-between; @@ -127,7 +131,8 @@ } } - &__transaction-info, &__send-info { + &__transaction-info, + &__send-info { &__label { font-size: 12px; } 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 92b4aba42..4eb307f5c 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 @@ -22,7 +22,8 @@ height: 130px; } - .button-group__button, .button-group__button--active { + .button-group__button, + .button-group__button--active { height: 130px; max-width: 108px; font-size: 12px; @@ -56,7 +57,7 @@ &:last-child { display: flex; color: $curious-blue; - margin-top: 8px + margin-top: 8px; } } } @@ -109,7 +110,8 @@ height: 54px; } - .button-group__button, .button-group__button--active { + .button-group__button, + .button-group__button--active { background: white; color: $scorpion; padding: 0 4px; @@ -136,7 +138,7 @@ &:last-child { display: flex; color: $curious-blue; - margin-top: 10px + margin-top: 10px; } } } @@ -181,19 +183,20 @@ color: $black; } - .button-group__button, .button-group__button--active { + .button-group__button, + .button-group__button--active { height: 78px; background: white; - color: #2A4055; + color: #2a4055; width: 108px; height: 97px; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.151579); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.151579); border-radius: 6px; border: none; div { display: flex; - flex-flow: column;; + flex-flow: column; align-items: flex-start; justify-content: flex-start; position: relative; @@ -213,8 +216,8 @@ } .button-group__button--active { - background: #F7FCFF; - border: 2px solid #2C8BDC; + background: #f7fcff; + border: 2px solid #2c8bdc; .button-check-wrapper { height: 16px; @@ -223,7 +226,7 @@ position: absolute; top: -11px; right: -10px; - background: #D5ECFA; + background: #d5ecfa; display: flex; flex-flow: row; justify-content: center; 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 097543104..a26b477a0 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 @@ -14,14 +14,16 @@ } } - .tick text, .c3-axis-x-label, .c3-axis-y-label { + .tick text, + .c3-axis-x-label, + .c3-axis-y-label { font-family: Roboto; font-style: normal; font-weight: bold; line-height: normal; font-size: 8px; text-align: center; - fill: #9A9CA6 !important; + fill: #9a9ca6 !important; } .c3-tooltip-container { @@ -32,7 +34,7 @@ .custom-tooltip { background: rgba(0, 0, 0, 1); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-radius: 3px; opacity: 1 !important; height: 21px; @@ -41,7 +43,7 @@ .tooltip-arrow { background: black; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1 !important; @@ -58,26 +60,29 @@ font-size: 10px; text-align: center; padding: 3px; - color: #FFFFFF; + color: #fff; } .c3-circle { visibility: hidden; } - .c3-selected-circle, .c3-circle._expanded_ { - fill: #FFFFFF !important; + .c3-selected-circle, + .c3-circle._expanded_ { + fill: #fff !important; stroke-width: 2.4px !important; stroke: #2d9fd9 !important; + /* visibility: visible; */ } #set-circle { - fill: #313A5E !important; - stroke: #313A5E !important; + fill: #313a5e !important; + stroke: #313a5e !important; } - .c3-axis-x-label, .c3-axis-y-label { + .c3-axis-x-label, + .c3-axis-y-label { font-weight: normal; } @@ -91,8 +96,8 @@ .c3-line-data1 { stroke: #2d9fd9 !important; - background: rgba(0,0,0,0) !important; - color: rgba(0,0,0,0) !important; + background: rgba(0, 0, 0, 0) !important; + color: rgba(0, 0, 0, 0) !important; } .c3 path { @@ -105,7 +110,7 @@ } .c3-xgrid-line line { - stroke: #B8B8B8 !important; + stroke: #b8b8b8 !important; } .c3-xgrid-focus { @@ -119,7 +124,7 @@ .c3-axis-y .domain { fill: none; - stroke: #C8CCD6; + stroke: #c8ccd6; } .c3-event-rect { @@ -128,5 +133,5 @@ } #chart { - background: #F8F9FB + background: #f8f9fb; } 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 e6c734367..f526e5dd7 100644 --- a/ui/app/components/app/gas-customization/gas-slider/index.scss +++ b/ui/app/components/app/gas-customization/gas-slider/index.scss @@ -17,7 +17,7 @@ height: 34px; width: 34px; background-color: $curious-blue; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); border-radius: 50%; position: relative; z-index: 10; @@ -38,7 +38,7 @@ &__colored { height: 6px; border-radius: 4px; - margin-left: 102px; + margin-left: 102px; width: 322px; z-index: 1; background-color: $blizzard-blue; @@ -51,4 +51,4 @@ margin-top: -6px; color: $mid-gray; } -} \ No newline at end of file +} diff --git a/ui/app/components/app/gas-customization/index.scss b/ui/app/components/app/gas-customization/index.scss index b06c1d044..06a9d7820 100644 --- a/ui/app/components/app/gas-customization/index.scss +++ b/ui/app/components/app/gas-customization/index.scss @@ -1,7 +1,4 @@ @import './gas-slider/index'; - @import './gas-modal-page-container/index'; - @import './gas-price-chart/index'; - @import './advanced-gas-inputs/index'; diff --git a/ui/app/components/app/home-notification/index.scss b/ui/app/components/app/home-notification/index.scss index 0e081be91..1aedb90ec 100644 --- a/ui/app/components/app/home-notification/index.scss +++ b/ui/app/components/app/home-notification/index.scss @@ -45,11 +45,11 @@ } .fa-info-circle { - color: #6A737D; + color: #6a737d; } &__ignore-button { - border: 2px solid #6A737D; + border: 2px solid #6a737d; box-sizing: border-box; border-radius: 6px; color: $white; @@ -63,8 +63,8 @@ } &:hover { - border-color: #6A737D; - background-color: #6A737D; + border-color: #6a737d; + background-color: #6a737d; } &:active { @@ -73,7 +73,7 @@ } &__accept-button { - border: 2px solid #6A737D; + border: 2px solid #6a737d; box-sizing: border-box; border-radius: 6px; color: $white; @@ -88,8 +88,8 @@ } &:hover { - border-color: #6A737D; - background-color: #6A737D; + border-color: #6a737d; + background-color: #6a737d; } &:active { diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index 59088d232..00724f3e2 100644 --- a/ui/app/components/app/index.scss +++ b/ui/app/components/app/index.scss @@ -1,117 +1,59 @@ @import 'account-menu/index'; - @import 'add-token-button/index'; - @import 'alerts/alerts'; - @import 'app-header/index'; - @import 'asset-list-item/asset-list-item'; - @import '../ui/breadcrumbs/index'; - @import '../ui/button-group/index'; - @import '../ui/card/index'; - @import 'confirm-page-container/index'; - @import '../ui/currency-input/index'; - @import '../ui/currency-display/index'; - @import '../ui/error-message/index'; - @import '../ui/export-text-container/index'; - @import '../ui/identicon/index'; - @import '../ui/menu/menu'; - @import 'info-box/index'; - @import 'menu-bar/index'; - @import 'modal/index'; - @import 'modals/index'; - @import 'network-display/index'; - @import '../ui/page-container/index'; - @import '../../pages/index'; - @import 'permission-page-container/index'; - @import 'selected-account/index'; - @import '../ui/sender-to-recipient/index'; - @import '../ui/tabs/index'; - @import '../ui/token-balance/index'; - @import 'token-cell/token-cell'; - @import 'transaction-activity-log/index'; - @import 'transaction-breakdown/index'; - @import 'transaction-list/index'; - @import 'transaction-list-item/index'; - @import 'transaction-list-item-details/index'; - @import 'transaction-status/index'; - @import 'sidebars/index'; - @import '../ui/unit-input/index'; - @import 'gas-customization/gas-modal-page-container/index'; - @import 'gas-customization/index'; - @import 'gas-customization/gas-price-button-group/index'; - @import '../ui/toggle-button/index'; - @import 'home-notification/index'; - @import 'multiple-notifications/index'; - @import 'signature-request/index'; - @import 'connected-sites-list/index'; - @import 'connected-accounts-list/index'; - @import 'connected-accounts-permissions/index'; - @import '../ui/icon/index'; - @import '../ui/icon-with-fallback/icon-with-fallback'; - @import '../ui/icon-with-label/index'; - @import '../ui/circle-icon/index'; - @import '../ui/alert-circle-icon/index'; - @import './connected-status-indicator/index'; - @import '../ui/check-box/index'; - @import '../ui/dropdown/dropdown'; - @import 'permissions-connect-header/index'; - @import 'permissions-connect-footer/index'; - @import 'wallet-overview/index'; - @import '../ui/account-mismatch-warning/index'; - @import '../ui/icon-border/icon-border'; diff --git a/ui/app/components/app/info-box/index.scss b/ui/app/components/app/info-box/index.scss index 8b5626d79..bad69cd53 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: .75rem; + font-size: 0.75rem; } } diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss index 4b9e428fa..ac99b6b90 100644 --- a/ui/app/components/app/menu-bar/index.scss +++ b/ui/app/components/app/menu-bar/index.scss @@ -19,7 +19,7 @@ } .account-options-menu { - &__connected-sites:before { + &__connected-sites::before { content: ""; background-image: url(/images/icons/connected-sites.svg); background-size: contain; @@ -27,6 +27,7 @@ background-position: center; padding: 8px; } + &__explorer-origin { 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 560505b84..560c2cbd4 100644 --- a/ui/app/components/app/modal/modal-content/index.scss +++ b/ui/app/components/app/modal/modal-content/index.scss @@ -14,6 +14,6 @@ &__description { text-align: center; - font-size: .875rem; + font-size: 0.875rem; } } 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 f6bf85a0a..b5e3b9ae7 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 @@ -4,6 +4,7 @@ &__content { @extend %col-nowrap; + padding: 1.5rem; border-bottom: 1px solid $Grey-100; @@ -19,6 +20,7 @@ &__input { @extend %input; + margin-top: 0.75rem; &::placeholder { @@ -28,6 +30,7 @@ &__footer { @extend %row-nowrap; + padding: 1rem; button + button { 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 ce81dd448..5d99e66d5 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 @@ -1,5 +1,5 @@ .cancel-transaction-gas-fee { - background: #F1F4F9; + background: #f1f4f9; padding: 16px; display: flex; flex-direction: column; @@ -12,6 +12,6 @@ } &__fiat { - font-size: .75rem; + font-size: 0.75rem; } } diff --git a/ui/app/components/app/modals/cancel-transaction/index.scss b/ui/app/components/app/modals/cancel-transaction/index.scss index 4ffb5a0f8..93ba99ad4 100644 --- a/ui/app/components/app/modals/cancel-transaction/index.scss +++ b/ui/app/components/app/modals/cancel-transaction/index.scss @@ -9,7 +9,7 @@ &__description { text-align: center; - font-size: .875rem; + 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 3be3a1967..90fa7dd53 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,7 @@ .confirm-remove-account { &__description { text-align: center; - font-size: .875rem; + font-size: 0.875rem; } &__account { @@ -55,4 +55,4 @@ &__link { color: #2f9ae0; } -} \ No newline at end of file +} 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 f400da4c1..17f0ef6ca 100644 --- a/ui/app/components/app/modals/edit-approval-permission/index.scss +++ b/ui/app/components/app/modals/edit-approval-permission/index.scss @@ -17,8 +17,8 @@ position: absolute; right: 24px; background-image: url("/images/close-gray.svg"); - width: .75rem; - height: .75rem; + width: 0.75rem; + height: 0.75rem; cursor: pointer; } } @@ -37,7 +37,7 @@ &__balance { font-weight: normal; font-size: 14px; - color: #24292E; + color: #24292e; } &__account { @@ -51,7 +51,7 @@ } &__balance { - color: #6A737D; + color: #6a737d; } } @@ -62,14 +62,14 @@ font-weight: bold; font-size: 14px; line-height: 20px; - color: #24292E; + color: #24292e; } &__description { font-weight: normal; font-size: 12px; line-height: 17px; - color: #6A737D; + color: #6a737d; margin-top: 8px; } @@ -89,22 +89,22 @@ } &__option-label, - &__option-label--selected { + &__option-label--selected { font-weight: normal; font-size: 14px; line-height: 20px; - color: #474B4D; + color: #474b4d; } &__option-label--selected { - color: #037DD6; + color: #037dd6; } &__option-description { font-weight: normal; font-size: 12px; line-height: 17px; - color: #6A737D; + color: #6a737d; margin-top: 8px; margin-bottom: 6px; } @@ -113,7 +113,7 @@ font-weight: normal; font-size: 18px; line-height: 25px; - color: #24292E; + color: #24292e; } &__radio-button { @@ -130,13 +130,13 @@ &__radio-button-outline--selected { width: 18px; height: 18px; - background: #DADCDD; + background: #dadcdd; border-radius: 9px; position: absolute; } &__radio-button-outline--selected { - background: #037DD6; + background: #037dd6; } &__radio-button-fill { @@ -150,7 +150,7 @@ &__radio-button-dot { width: 8px; height: 8px; - background: #037DD6; + background: #037dd6; border-radius: 4px; position: absolute; } @@ -158,7 +158,7 @@ } .edit-approval-permission-modal-content { - padding: 0px; + padding: 0; } .edit-approval-permission-modal-container { diff --git a/ui/app/components/app/modals/index.scss b/ui/app/components/app/modals/index.scss index 16cec11f9..ebb662b96 100644 --- a/ui/app/components/app/modals/index.scss +++ b/ui/app/components/app/modals/index.scss @@ -1,15 +1,8 @@ @import 'cancel-transaction/index'; - @import 'confirm-remove-account/index'; - @import 'qr-scanner/index'; - @import 'transaction-confirmed/index'; - @import 'metametrics-opt-in-modal/index'; - @import './add-to-addressbook-modal/index'; - @import './edit-approval-permission/index'; - @import './new-account-modal/index'; 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 88b6d7a4d..4c99ecc28 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 @@ -27,4 +27,4 @@ max-height: 520px; } } -} \ No newline at end of file +} 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 687f6b5f0..31dfff92d 100644 --- a/ui/app/components/app/modals/new-account-modal/index.scss +++ b/ui/app/components/app/modals/new-account-modal/index.scss @@ -4,11 +4,13 @@ &__content { @extend %col-nowrap; + padding: 1.5rem; border-bottom: 1px solid $Grey-100; &__header { @extend %header--18; + font-weight: bold; display: flex; justify-content: space-between; @@ -16,7 +18,7 @@ } &__header-close { - color: #24292E; + color: #24292e; background: none; font-size: 1.1rem; } @@ -29,6 +31,7 @@ &__input { @extend %input; + margin-top: 0.75rem; &::placeholder { @@ -38,6 +41,7 @@ &__footer { @extend %row-nowrap; + padding: 1rem; button + button { diff --git a/ui/app/components/app/modals/reject-transactions/index.scss b/ui/app/components/app/modals/reject-transactions/index.scss index 753466883..278689246 100644 --- a/ui/app/components/app/modals/reject-transactions/index.scss +++ b/ui/app/components/app/modals/reject-transactions/index.scss @@ -1,6 +1,6 @@ .reject-transactions { &__description { text-align: center; - font-size: .875rem; + 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 c97371fb6..6135f9b0c 100644 --- a/ui/app/components/app/modals/transaction-confirmed/index.scss +++ b/ui/app/components/app/modals/transaction-confirmed/index.scss @@ -8,7 +8,7 @@ &__description { text-align: center; - font-size: .875rem; + 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 e8d064bc0..0f2d86ad3 100644 --- a/ui/app/components/app/multiple-notifications/index.scss +++ b/ui/app/components/app/multiple-notifications/index.scss @@ -51,7 +51,6 @@ .fa-sm { margin-bottom: 8px; } - } .home-notification-wrapper--show-first { @@ -64,7 +63,6 @@ > div:first-of-type { visibility: visible; - } .fa-sm { diff --git a/ui/app/components/app/network-display/index.scss b/ui/app/components/app/network-display/index.scss index d70786d20..a17e47bc9 100644 --- a/ui/app/components/app/network-display/index.scss +++ b/ui/app/components/app/network-display/index.scss @@ -33,7 +33,7 @@ } &__name { - font-size: .75rem; + font-size: 0.75rem; 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 576147aed..2db5ec09f 100644 --- a/ui/app/components/app/permission-page-container/index.scss +++ b/ui/app/components/app/permission-page-container/index.scss @@ -32,6 +32,7 @@ &__title { @extend %header--18; + line-height: 25px; text-align: center; margin-top: 32px; @@ -42,11 +43,12 @@ display: flex; overflow-y: auto; flex-direction: column; - color: #7C808E; + color: #7c808e; padding-left: 24px; padding-right: 24px; - a, a:hover { + a, + a:hover { color: $dodger-blue; } @@ -83,8 +85,9 @@ &__permissions-header { @extend %content-text; + line-height: 20px; - color: #6A737D; + color: #6a737d; } &__permissions-container { diff --git a/ui/app/components/app/permissions-connect-footer/index.scss b/ui/app/components/app/permissions-connect-footer/index.scss index 01e029cce..f8ea463f6 100644 --- a/ui/app/components/app/permissions-connect-footer/index.scss +++ b/ui/app/components/app/permissions-connect-footer/index.scss @@ -6,16 +6,17 @@ &__text { @extend %content-text; + font-size: 12px; line-height: 17px; - color: #6A737D; + color: #6a737d; display: flex; margin-top: 10px; &--link { - color: #037DD6; + color: #037dd6; margin-left: 4px; cursor: pointer; } } -} \ No newline at end of file +} diff --git a/ui/app/components/app/permissions-connect-header/index.scss b/ui/app/components/app/permissions-connect-header/index.scss index 591e9a0dc..1b29ec3e0 100644 --- a/ui/app/components/app/permissions-connect-header/index.scss +++ b/ui/app/components/app/permissions-connect-header/index.scss @@ -27,13 +27,16 @@ &__title { @extend %header--24; + text-align: center; color: $Black-100; margin-top: 14px; } - &__text, &__subtitle { + &__text, + &__subtitle { @extend %content-text; + text-align: center; color: $Grey-500; } @@ -42,6 +45,7 @@ width: 100%; text-overflow: ellipsis; overflow: hidden; + /*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 c4fa5af7c..c90ef7d78 100644 --- a/ui/app/components/app/selected-account/index.scss +++ b/ui/app/components/app/selected-account/index.scss @@ -23,8 +23,8 @@ } &__address { - font-size: .75rem; - line-height: .75rem; + font-size: 0.75rem; + line-height: 0.75rem; color: #989a9b; } diff --git a/ui/app/components/app/sidebars/index.scss b/ui/app/components/app/sidebars/index.scss index 08181426f..d2d224eb0 100644 --- a/ui/app/components/app/sidebars/index.scss +++ b/ui/app/components/app/sidebars/index.scss @@ -52,7 +52,7 @@ visibility: visible; will-change: transform; overflow-y: auto; - box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; + box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px; width: 85%; height: 100%; @@ -77,5 +77,5 @@ bottom: 0; opacity: 1; visibility: visible; - background-color: rgba(0, 0, 0, .3); + background-color: rgba(0, 0, 0, 0.3); } diff --git a/ui/app/components/app/sidebars/sidebar-content.scss b/ui/app/components/app/sidebars/sidebar-content.scss index ca6b0a458..7b3c10116 100644 --- a/ui/app/components/app/sidebars/sidebar-content.scss +++ b/ui/app/components/app/sidebars/sidebar-content.scss @@ -44,7 +44,7 @@ .basic-tab-content { height: auto; - margin-bottom: 0px; + margin-bottom: 0; border-bottom: 1px solid #d2d8dd; flex: 1 1 70%; @@ -93,6 +93,7 @@ &__info-row-wrapper { display: flex; + @media screen and (min-width: $break-small) { flex: 1 1 30%; } @@ -109,4 +110,4 @@ } } } -} \ No newline at end of file +} diff --git a/ui/app/components/app/signature-request/index.scss b/ui/app/components/app/signature-request/index.scss index 69115681f..27e7fcfbc 100644 --- a/ui/app/components/app/signature-request/index.scss +++ b/ui/app/components/app/signature-request/index.scss @@ -3,94 +3,94 @@ @import 'signature-request-message/index'; .signature-request { - display: flex; - flex: 1 1 auto; - flex-direction: column; - min-width: 0; + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; - @media screen and (min-width: 576px) { - flex: initial; - } + @media screen and (min-width: 576px) { + flex: initial; + } } .signature-request-header { - flex: 1; + flex: 1; - .network-display__container { - padding: 0; - justify-content: flex-end; - } + .network-display__container { + padding: 0; + justify-content: flex-end; + } - .network-display__name { - font-size: 12px; - white-space: nowrap; - font-weight: 500; - } + .network-display__name { + font-size: 12px; + white-space: nowrap; + font-weight: 500; + } } .signature-request-content { - flex: 1 40%; - margin-top: 1rem; + flex: 1 40%; + margin-top: 1rem; + display: flex; + align-items: center; + flex-direction: column; + margin-bottom: 25px; + min-height: min-content; + + &__title { + font-family: Roboto; + font-style: normal; + font-weight: 500; + font-size: 18px; + } + + &__identicon-container { + padding: 1rem; + flex: 1; + position: relative; + width: 100%; display: flex; + justify-content: center; align-items: center; - flex-direction: column; - margin-bottom: 25px; - min-height: min-content; + } - &__title { - font-family: Roboto; - font-style: normal; - font-weight: 500; - font-size: 18px; - } + &__identicon-border { + height: 75px; + width: 75px; + border-radius: 50%; + border: 1px solid white; + position: absolute; + box-shadow: 0 2px 2px 0.5px rgba(0, 0, 0, 0.19); + } - &__identicon-container { - padding: 1rem; - flex: 1; - position: relative; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - } + &__identicon-initial { + position: absolute; + font-family: Roboto; + font-style: normal; + font-weight: 500; + font-size: 60px; + color: white; + z-index: 1; + text-shadow: 0 4px 6px rgba(0, 0, 0, 0.422); + } - &__identicon-border { - height: 75px; - width: 75px; - border-radius: 50%; - border: 1px solid white; - position: absolute; - box-shadow: 0 2px 2px 0.5px rgba(0, 0, 0, 0.19); - } + &__info { + font-size: 12px; + } - &__identicon-initial { - position: absolute; - font-family: Roboto; - font-style: normal; - font-weight: 500; - font-size: 60px; - color: white; - z-index: 1; - text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.422); - } + &__info--bolded { + font-size: 16px; + font-weight: 500; + } - &__info { - font-size: 12px; - } + p { + color: #999; + font-size: 0.8rem; + } - &__info--bolded { - font-size: 16px; - font-weight: 500; - } - - p { - color: #999999; - font-size: 0.8rem; - } - - .identicon {} + .identicon {} } .signature-request-footer { - flex: 1 1 auto; -} \ No newline at end of file + flex: 1 1 auto; +} diff --git a/ui/app/components/app/signature-request/signature-request-footer/index.scss b/ui/app/components/app/signature-request/signature-request-footer/index.scss index d8c6b36d6..53a64dc38 100644 --- a/ui/app/components/app/signature-request/signature-request-footer/index.scss +++ b/ui/app/components/app/signature-request/signature-request-footer/index.scss @@ -1,18 +1,19 @@ .signature-request-footer { - display: flex; - border-top: 1px solid #d2d8dd; + display: flex; + border-top: 1px solid #d2d8dd; - button { - text-transform: uppercase; - flex: 1; - margin: 1rem 0.5rem; - border-radius: 3px; - } + button { + text-transform: uppercase; + flex: 1; + margin: 1rem 0.5rem; + border-radius: 3px; + } - button:first-child() { - margin-left: 1rem; - } - button:last-child() { - margin-right: 1rem; - } -} \ No newline at end of file + button:first-child() { + margin-left: 1rem; + } + + button:last-child() { + margin-right: 1rem; + } +} 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 1d32b4328..cd94a0e31 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 @@ -3,9 +3,10 @@ padding: 1rem; border-bottom: 1px solid $geyser; justify-content: space-between; - font-size: .75rem; + font-size: 0.75rem; - &--account, &--network { + &--account, + &--network { flex: 1; } @@ -25,7 +26,7 @@ } &__top-row { - margin: 0px; + margin: 0; } } } 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 aec597f89..7eef17560 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 @@ -1,67 +1,68 @@ .signature-request-message { - flex: 1 60%; + flex: 1 60%; + display: flex; + flex-direction: column; + + &__title { + font-weight: 500; + font-size: 14px; + color: #636778; + margin-left: 12px; + } + + h2 { + flex: 1 1 0; + text-align: left; + font-size: 0.8rem; + border-bottom: 1px solid #d2d8dd; + padding: 0.5rem; + margin: 0; + color: #ccc; + } + + &--root { + flex: 1 100%; + background-color: #f8f9fb; + padding-bottom: 0.5rem; + overflow: auto; + padding-left: 12px; + padding-right: 12px; + width: 360px; + font-family: monospace; + + @media screen and (min-width: 576px) { + width: auto; + } + } + + &__type-title { + font-family: monospace; + font-style: normal; + font-weight: normal; + font-size: 14px; + margin-left: 12px; + margin-top: 6px; + margin-bottom: 10px; + } + + &--node, + &--node-leaf { + padding-left: 0.8rem; + + &-label { + color: #5b5d67; + } + + &-value { + color: black; + margin-left: 0.5rem; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + + &--node-leaf { display: flex; - flex-direction: column; - - &__title { - font-weight: 500; - font-size: 14px; - color: #636778; - margin-left: 12px; - } - - h2 { - flex: 1 1 0; - text-align: left; - font-size: 0.8rem; - border-bottom: 1px solid #d2d8dd; - padding: 0.5rem; - margin: 0; - color: #ccc; - } - - &--root { - flex: 1 100%; - background-color: #f8f9fb; - padding-bottom: 0.5rem; - overflow: auto; - padding-left: 12px; - padding-right: 12px; - width: 360px; - font-family: monospace; - - @media screen and (min-width: 576px) { - width: auto; - } - } - - &__type-title { - font-family: monospace; - font-style: normal; - font-weight: normal; - font-size: 14px; - margin-left: 12px; - margin-top: 6px; - margin-bottom: 10px; - } - - &--node, &--node-leaf { - padding-left: 0.8rem; - - &-label { - color: #5B5D67; - } - - &-value { - color: black; - margin-left: 0.5rem; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - } - - &--node-leaf { - display: flex; - } -} \ No newline at end of file + } +} diff --git a/ui/app/components/app/transaction-activity-log/index.scss b/ui/app/components/app/transaction-activity-log/index.scss index 00c17e6aa..6c0ef388e 100644 --- a/ui/app/components/app/transaction-activity-log/index.scss +++ b/ui/app/components/app/transaction-activity-log/index.scss @@ -55,7 +55,7 @@ &__activity-text { color: $dusty-gray; - font-size: .75rem; + font-size: 0.75rem; cursor: pointer; &:hover { @@ -73,7 +73,7 @@ } &__action-link { - font-size: .75rem; + font-size: 0.75rem; cursor: pointer; color: $curious-blue; } diff --git a/ui/app/components/app/transaction-breakdown/index.scss b/ui/app/components/app/transaction-breakdown/index.scss index 2d2a939cb..7df517d1b 100644 --- a/ui/app/components/app/transaction-breakdown/index.scss +++ b/ui/app/components/app/transaction-breakdown/index.scss @@ -14,7 +14,6 @@ &__value { display: flex; justify-content: flex-end; - text-align: end; white-space: nowrap; overflow: hidden; 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 8c73be1a6..b36dc48c8 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,5 @@ .transaction-breakdown-row { - font-size: .75rem; + font-size: 0.75rem; 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 dc35506ae..64fe19220 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: .625rem; + font-size: 0.625rem; &:not(:last-child) { margin-right: 8px; @@ -38,7 +38,6 @@ margin-right: 8px; min-width: 0; margin: 0 0 8px 0; - } &__transaction-activity-log { diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss index d0c3c786f..1a4e081ef 100644 --- a/ui/app/components/app/transaction-list-item/index.scss +++ b/ui/app/components/app/transaction-list-item/index.scss @@ -20,6 +20,7 @@ &__pending-actions { padding-top: 12px; display: flex; + .button { font-size: 0.625rem; padding: 8px; @@ -27,6 +28,7 @@ white-space: nowrap; line-height: 1rem; } + &:empty { padding-top: 0; } @@ -39,12 +41,13 @@ text-overflow: initial; } - .transaction-status:after { + .transaction-status::after { content: "·"; margin: 0 4px; } - &__origin, &__address { + &__origin, + &__address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss index ad4359ce3..58feee644 100644 --- a/ui/app/components/app/transaction-list/index.scss +++ b/ui/app/components/app/transaction-list/index.scss @@ -43,6 +43,7 @@ justify-content: center; color: $silver; } + &__view-more { margin: 16px auto; max-width: 200px; diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss index 13dcd6c30..0896aa7f8 100644 --- a/ui/app/components/app/transaction-status/index.scss +++ b/ui/app/components/app/transaction-status/index.scss @@ -1,23 +1,30 @@ .transaction-status { display: inline; + &--unapproved { color: $Orange-500; } + &--failed { color: $Red-500; } + &--cancelled { color: $Red-500; } + &--dropped { color: $Red-500; } + &--rejected { color: $Red-500; } + &--pending { color: $Orange-500; } + &--queued { color: $Grey-500; } diff --git a/ui/app/components/app/wallet-overview/index.scss b/ui/app/components/app/wallet-overview/index.scss index b461f062a..391edcc04 100644 --- a/ui/app/components/app/wallet-overview/index.scss +++ b/ui/app/components/app/wallet-overview/index.scss @@ -5,9 +5,7 @@ flex: 1; height: 209px; min-width: 0; - padding-top: 10px; - flex-direction: column; width: 100%; @@ -34,6 +32,7 @@ &:not(:last-child) { margin-right: 12px; } + text-transform: uppercase; font-weight: bold; } @@ -66,7 +65,8 @@ margin-left: 4px; } - &__cached-balance, &__cached-star { + &__cached-balance, + &__cached-star { color: $web-orange; } diff --git a/ui/app/components/ui/alert-circle-icon/index.scss b/ui/app/components/ui/alert-circle-icon/index.scss index b5f5d6cc6..71e3ccb2e 100644 --- a/ui/app/components/ui/alert-circle-icon/index.scss +++ b/ui/app/components/ui/alert-circle-icon/index.scss @@ -10,4 +10,4 @@ color: $warning-yellow; background: $warning-light-yellow; } -} \ No newline at end of file +} diff --git a/ui/app/components/ui/button-group/index.scss b/ui/app/components/ui/button-group/index.scss index 29713c75b..aea6d826f 100644 --- a/ui/app/components/ui/button-group/index.scss +++ b/ui/app/components/ui/button-group/index.scss @@ -32,7 +32,7 @@ } &:disabled { - opacity: .5; + opacity: 0.5; } } -} \ No newline at end of file +} diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss index a28dfa4d2..e8ad6e5fa 100644 --- a/ui/app/components/ui/button/buttons.scss +++ b/ui/app/components/ui/button/buttons.scss @@ -2,14 +2,14 @@ Buttons */ -$hover-secondary: #B0D7F2; -$hover-default: #B3B3B3; -$hover-confirm: #0372C3; -$hover-red: #FEB6BF; -$hover-red-primary: #C72837; -$hover-orange: #FFD3B5; -$danger-light-red: #EA7E77; -$warning-light-orange: #F8B588; +$hover-secondary: #b0d7f2; +$hover-default: #b3b3b3; +$hover-confirm: #0372c3; +$hover-red: #feb6bf; +$hover-red-primary: #c72837; +$hover-orange: #ffd3b5; +$danger-light-red: #ea7e77; +$warning-light-orange: #f8b588; %button { @include h6; @@ -17,19 +17,19 @@ $warning-light-orange: #F8B588; font-weight: 500; font-family: Roboto, Arial; line-height: 1.25rem; - padding: .75rem 1rem; + padding: 0.75rem 1rem; display: flex; justify-content: center; align-items: center; box-sizing: border-box; border-radius: 6px; width: 100%; - transition: border-color .3s ease, background-color .3s ease; + transition: border-color 0.3s ease, background-color 0.3s ease; &--disabled, &[disabled] { cursor: auto; - opacity: .5; + opacity: 0.5; pointer-events: none; } } @@ -61,6 +61,7 @@ $warning-light-orange: #F8B588; %small-link { @extend %link; + @include h6; } @@ -169,7 +170,7 @@ $warning-light-orange: #F8B588; } &:active { - background: #FBFBFC; + background: #fbfbfc; border-color: $Grey-500; } @@ -217,7 +218,7 @@ $warning-light-orange: #F8B588; .btn-raised { color: $curious-blue; background-color: $white; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; height: initial; min-height: initial; @@ -228,25 +229,25 @@ $warning-light-orange: #F8B588; .btn--first-time { height: 54px; width: 198px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); + 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, .9); + background-color: rgba(247, 134, 28, 0.9); border-radius: 0; } button[disabled], input[type="submit"][disabled] { cursor: not-allowed; - opacity: .5; + opacity: 0.5; } button.primary { padding: 8px 12px; background: #f7861c; - box-shadow: 0 3px 6px rgba(247, 134, 28, .36); + box-shadow: 0 3px 6px rgba(247, 134, 28, 0.36); color: $white; font-size: 1.1em; font-family: Roboto; @@ -257,12 +258,14 @@ button.primary { border-radius: 100px; will-change: box-shadow; transition: box-shadow cubic-bezier(0.6, -0.28, 0.735, 0.045) 200ms; + &:hover { - box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); } &.btn-secondary { border: 1px solid $Blue-500; + &--disabled, &[disabled] { border-color: $hover-secondary; @@ -276,6 +279,7 @@ button.primary { &.btn-default { border: 1px solid $Grey-500; + &--disabled, &[disabled] { border-color: $Grey-100; @@ -289,6 +293,7 @@ button.primary { &.btn-danger { border: 1px solid $Red-500; + &--disabled, &[disabled] { border-color: $Red-100; @@ -302,6 +307,7 @@ button.primary { &.btn-warning { border: 1px solid $Orange-500; + &--disabled, &[disabled] { border-color: $warning-light-orange; @@ -315,6 +321,7 @@ button.primary { &.btn-primary { background-color: $Blue-500; + &--disabled, &[disabled] { background-color: $hover-secondary; @@ -327,6 +334,7 @@ button.primary { &.btn-danger-primary { background-color: $Red-500; + &--disabled, &[disabled] { background-color: $danger-light-red; diff --git a/ui/app/components/ui/card/index.scss b/ui/app/components/ui/card/index.scss index bde54a15e..4fa32e1bc 100644 --- a/ui/app/components/ui/card/index.scss +++ b/ui/app/components/ui/card/index.scss @@ -1,6 +1,6 @@ .card { border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); padding: 8px; &__title { diff --git a/ui/app/components/ui/check-box/index.scss b/ui/app/components/ui/check-box/index.scss index 446ce1683..0897549c1 100644 --- a/ui/app/components/ui/check-box/index.scss +++ b/ui/app/components/ui/check-box/index.scss @@ -10,7 +10,8 @@ border-radius: 2px; display: flex; - &__checked, &__indeterminate { + &__checked, + &__indeterminate { color: $curious-blue; border-color: $curious-blue; } diff --git a/ui/app/components/ui/circle-icon/index.scss b/ui/app/components/ui/circle-icon/index.scss index 82310ed15..5002f83e6 100644 --- a/ui/app/components/ui/circle-icon/index.scss +++ b/ui/app/components/ui/circle-icon/index.scss @@ -20,4 +20,4 @@ &__icon { position: relative; } -} \ No newline at end of file +} diff --git a/ui/app/components/ui/currency-input/index.scss b/ui/app/components/ui/currency-input/index.scss index f659f5b35..b240ed097 100644 --- a/ui/app/components/ui/currency-input/index.scss +++ b/ui/app/components/ui/currency-input/index.scss @@ -13,14 +13,14 @@ background-size: contain; background-repeat: no-repeat; cursor: pointer; - opacity: .4; + opacity: 0.4; &:hover { - opacity: .3; + opacity: 0.3; } &:active { - opacity: .5; + opacity: 0.5; } } } diff --git a/ui/app/components/ui/dialog/dialog.scss b/ui/app/components/ui/dialog/dialog.scss index 68b5ce329..d113947ad 100644 --- a/ui/app/components/ui/dialog/dialog.scss +++ b/ui/app/components/ui/dialog/dialog.scss @@ -1,5 +1,5 @@ .dialog { - font-size: .75rem; + font-size: 0.75rem; line-height: 1rem; padding: 1rem; border: 1px solid $black; diff --git a/ui/app/components/ui/dropdown/dropdown.scss b/ui/app/components/ui/dropdown/dropdown.scss index 064c0788b..296ea95c0 100644 --- a/ui/app/components/ui/dropdown/dropdown.scss +++ b/ui/app/components/ui/dropdown/dropdown.scss @@ -4,11 +4,10 @@ // TODO: remove these after getting autoprefixer working in Storybook -moz-appearance: none; -webkit-appearance: none; - border: 1px solid $Grey-500; border-radius: 6px; - background-image: url('/images/icons/caret-down.svg'); - background-repeat: no-repeat, repeat; + background-image: url('/images/icons/caret-down.svg'); + background-repeat: no-repeat, repeat; background-position: right 18px top 50%; background-color: white; padding: 8px 32px 8px 16px; diff --git a/ui/app/components/ui/error-message/index.scss b/ui/app/components/ui/error-message/index.scss index 5915e21cf..8b3860c37 100644 --- a/ui/app/components/ui/error-message/index.scss +++ b/ui/app/components/ui/error-message/index.scss @@ -4,7 +4,7 @@ color: $monzo; background: lighten($monzo, 56%); border-radius: 4px; - font-size: .75rem; + font-size: 0.75rem; display: flex; justify-content: flex-start; align-items: center; diff --git a/ui/app/components/ui/icon-border/icon-border.scss b/ui/app/components/ui/icon-border/icon-border.scss index 6a718c83a..cd18ccc6e 100644 --- a/ui/app/components/ui/icon-border/icon-border.scss +++ b/ui/app/components/ui/icon-border/icon-border.scss @@ -1,9 +1,8 @@ .icon-border { border-radius: 50%; - border: 1px solid #F2F3F4; - background: #FFFFFF; - + border: 1px solid #f2f3f4; + background: #fff; display: flex; justify-content: center; align-items: center; diff --git a/ui/app/components/ui/icon/preloader/index.scss b/ui/app/components/ui/icon/preloader/index.scss index 2a62c950d..e4c7cc963 100644 --- a/ui/app/components/ui/icon/preloader/index.scss +++ b/ui/app/components/ui/icon/preloader/index.scss @@ -7,9 +7,10 @@ @keyframes spin { from { - transform:rotate(0deg); + transform: rotate(0deg); } + to { - transform:rotate(360deg); + transform: rotate(360deg); } } diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss index 1aca82d2a..9f8a6a5bc 100644 --- a/ui/app/components/ui/list-item/index.scss +++ b/ui/app/components/ui/list-item/index.scss @@ -2,14 +2,16 @@ width: 100%; min-height: 86px; margin: 0; - background: #FFFFFF; + background: #fff; padding: 24px 16px; + @extend %font; + border-top: 1px solid $mercury; border-bottom: 1px solid $mercury; color: $Black-100; display: grid; - grid-template-columns: 0fr repeat(11, 1fr); + grid-template-columns: 0 repeat(11, 1fr); grid-template-areas: 'icon head head head head head head head right right right right' 'icon sub sub sub sub sub sub sub right right right right' @@ -24,6 +26,7 @@ &__icon { grid-area: icon; align-self: center; + > * { margin: 0 16px 0 0; } @@ -46,6 +49,7 @@ text-overflow: ellipsis; white-space: nowrap; } + &-wrap { display: inline-block; margin-left: 8px; @@ -65,6 +69,7 @@ text-overflow: ellipsis; white-space: nowrap; } + &:empty { display: none; } diff --git a/ui/app/components/ui/menu/menu.scss b/ui/app/components/ui/menu/menu.scss index 76102c49b..de3935539 100644 --- a/ui/app/components/ui/menu/menu.scss +++ b/ui/app/components/ui/menu/menu.scss @@ -9,12 +9,10 @@ flex-direction: column; align-items: center; padding: 0 16px; - font-family: Roboto, 'sans-serif'; font-size: 14px; font-weight: normal; line-height: 20px; - z-index: 1050; } @@ -32,7 +30,6 @@ background: none; font-family: inherit; font-size: inherit; - display: grid; grid-template-columns: min-content auto; text-align: start; @@ -48,7 +45,7 @@ } .disconnect-icon { - &:before { + &::before { content: ""; background-image: url(/images/icons/disconnect.svg); background-size: contain; diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss index 98bbcd9d1..4c4969a2b 100644 --- a/ui/app/components/ui/page-container/index.scss +++ b/ui/app/components/ui/page-container/index.scss @@ -1,7 +1,7 @@ .page-container { width: 408px; background-color: $white; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); z-index: 25; display: flex; flex-flow: column; @@ -71,7 +71,8 @@ padding: 0 16px 16px; flex: 0 0 auto; - a, a:hover { + a, + a:hover { text-decoration: none; cursor: pointer; font-size: 0.75rem; @@ -105,9 +106,9 @@ } &__subtitle { - padding-top: .5rem; + padding-top: 0.5rem; line-height: initial; - font-size: .9rem; + font-size: 0.9rem; color: $gray; } diff --git a/ui/app/components/ui/popover/index.scss b/ui/app/components/ui/popover/index.scss index a34f99e50..1c3d8744c 100644 --- a/ui/app/components/ui/popover/index.scss +++ b/ui/app/components/ui/popover/index.scss @@ -7,7 +7,7 @@ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; - background: #C4C4C4; + background: #c4c4c4; } display: flex; @@ -15,8 +15,7 @@ position: absolute; width: 328px; max-height: 94vh; - - box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); border-radius: 10px; background: white; } @@ -35,6 +34,7 @@ justify-content: space-between; @extend %font; + font-weight: bold; font-size: 18px; line-height: 25px; @@ -53,6 +53,7 @@ &__subtitle { @extend %font; + font-weight: normal; font-size: 14px; line-height: 20px; @@ -73,7 +74,7 @@ width: 100%; height: 100%; background: black; - opacity: .2; + opacity: 0.2; } &-content { @@ -104,7 +105,7 @@ display: flex; flex-direction: row; justify-content: space-between; - border-top: 1px solid #D2D8DD; + border-top: 1px solid #d2d8dd; padding: 16px 24px 24px; > :only-child { @@ -118,6 +119,6 @@ background: white; position: absolute; transform: rotate(45deg); - box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); } } diff --git a/ui/app/components/ui/sender-to-recipient/index.scss b/ui/app/components/ui/sender-to-recipient/index.scss index 641015a81..3c0f7af2d 100644 --- a/ui/app/components/ui/sender-to-recipient/index.scss +++ b/ui/app/components/ui/sender-to-recipient/index.scss @@ -73,16 +73,18 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: .875rem; + font-size: 0.875rem; [dir='rtl'] & { /*rtl:ignore*/ direction: ltr; + /*rtl:ignore*/ text-align: right; span { display: block; + /*rtl:ignore*/ direction: rtl; } @@ -100,7 +102,7 @@ justify-content: center; flex: 1; border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; background: $white; cursor: pointer; @@ -118,16 +120,18 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: .5rem; + font-size: 0.5rem; [dir='rtl'] & { /*rtl:ignore*/ direction: ltr; + /*rtl:ignore*/ text-align: right; span { display: block; + /*rtl:ignore*/ direction: rtl; } @@ -170,16 +174,18 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: .6875rem; + font-size: 0.6875rem; [dir='rtl'] & { /*rtl:ignore*/ direction: ltr; + /*rtl:ignore*/ text-align: right; span { display: block; + /*rtl:ignore*/ direction: rtl; } diff --git a/ui/app/components/ui/snackbar/index.scss b/ui/app/components/ui/snackbar/index.scss index 5cfab7a9b..d2aac4879 100644 --- a/ui/app/components/ui/snackbar/index.scss +++ b/ui/app/components/ui/snackbar/index.scss @@ -1,10 +1,9 @@ .snackbar { - padding: .75rem 1rem; + padding: 0.75rem 1rem; font-size: 0.75rem; color: $Blue-600; min-width: 360px; width: fit-content; - background: $Blue-000; border: 1px solid $Blue-200; border-radius: 6px; diff --git a/ui/app/components/ui/tabs/index.scss b/ui/app/components/ui/tabs/index.scss index a4a064d7b..ea22a7d52 100644 --- a/ui/app/components/ui/tabs/index.scss +++ b/ui/app/components/ui/tabs/index.scss @@ -9,7 +9,6 @@ justify-content: flex-start; border-bottom: 1px solid $geyser; background-color: $white; - position: sticky; top: 0; z-index: 1; diff --git a/ui/app/components/ui/toggle-button/index.scss b/ui/app/components/ui/toggle-button/index.scss index a72cf8bdb..cdd99f7f7 100644 --- a/ui/app/components/ui/toggle-button/index.scss +++ b/ui/app/components/ui/toggle-button/index.scss @@ -14,7 +14,8 @@ display: grid; } - &__label-off, &__label-on { + &__label-off, + &__label-on { grid-area: 1 / 1 / 1 / 1; } diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss index 338b3829f..ed80f26ac 100644 --- a/ui/app/components/ui/unit-input/index.scss +++ b/ui/app/components/ui/unit-input/index.scss @@ -64,7 +64,6 @@ } &__disabled { - background-color: #F2F3F4; + background-color: #f2f3f4; } - } diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index 5fb4ba48d..0df12d3cb 100644 --- a/ui/app/css/index.scss +++ b/ui/app/css/index.scss @@ -6,15 +6,9 @@ */ @import './itcss/settings/index'; - @import './itcss/tools/index'; - @import './itcss/generic/index'; - @import './itcss/objects/index'; - @import './itcss/components/index'; - @import './itcss/trumps/index'; - @import '../../../node_modules/react-select/dist/react-select'; diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 283b083da..20fbe94ce 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -52,7 +52,7 @@ } div:last-of-type { - color: rgba(220, 153, 18, 0.6901960784313725) + color: rgba(220, 153, 18, 0.6901960784313725); } } @@ -99,11 +99,11 @@ &__dropdown { &:hover { - background: rgba($alto, .2); + background: rgba($alto, 0.2); cursor: pointer; input { - background: rgba($alto, .1); + background: rgba($alto, 0.1); } } } diff --git a/ui/app/css/itcss/components/alert.scss b/ui/app/css/itcss/components/alert.scss index 930fc3f54..0e58f2aac 100644 --- a/ui/app/css/itcss/components/alert.scss +++ b/ui/app/css/itcss/components/alert.scss @@ -1,7 +1,7 @@ .global-alert { position: relative; width: 100%; - background-color: #33A4E7; + background-color: #33a4e7; .msg { width: 100%; @@ -13,11 +13,11 @@ } .global-alert.hidden { - animation: alertHidden .5s ease forwards; + animation: alertHidden 0.5s ease forwards; } .global-alert.visible { - animation: alert .5s ease forwards; + animation: alert 0.5s ease forwards; } /* Animation */ @@ -25,7 +25,7 @@ 0% { opacity: 0; top: -50px; - padding: 0px; + padding: 0; line-height: 12px; } @@ -51,7 +51,7 @@ 100% { opacity: 0; top: -50px; - padding: 0px; - line-height: 0px; + padding: 0; + line-height: 0; } } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index f65f5aa0b..2ee11279c 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -4,7 +4,7 @@ font-family: Roboto; flex: 1 0 auto; flex-flow: column nowrap; - box-shadow: 0 2px 4px 0 rgba($black, .08); + box-shadow: 0 2px 4px 0 rgba($black, 0.08); border-radius: 8px; display: flex; @@ -16,7 +16,6 @@ .notification { .confirm-screen-wrapper { - @media screen and (max-width: $break-small) { height: calc(100vh - 85px); } @@ -219,7 +218,7 @@ section .confirm-screen-account-number, } .confirm-screen-section-column { - flex: .5; + flex: 0.5; } .confirm-screen-row { diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index da3ba1e87..b9a698503 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -4,52 +4,29 @@ @import '../../../components/ui/list-item/index'; @import '../../../components/ui/popover/index'; @import '../../../components/ui/icon/preloader/index'; - @import './footer'; - @import './network'; - @import './modal'; - @import './alert'; - @import './newui-sections'; - @import './account-dropdown'; - @import './send'; - @import './confirm'; - @import './loading-overlay'; // Tx List and Sections @import './transaction-list'; - @import './sections'; - @import './currency-display'; - @import './menu'; - @import './gas-slider'; - @import './tab-bar'; - @import './simple-dropdown'; - @import './request-signature'; - @import './request-encryption-public-key'; - @import './request-decrypt-message'; - @import './editable-label'; - @import './pages/index'; - @import './new-account'; - @import './tooltip'; - @import '../../../components/app/index'; diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index a99c58a23..3ab6d3bbc 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -9,7 +9,7 @@ flex: 1 1 auto; width: 100%; height: 100%; - background: rgba(255, 255, 255, .8); + background: rgba(255, 255, 255, 0.8); &__screen-content { display: flex; diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 7d71ea799..f2dfd8ca3 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -1,7 +1,7 @@ .menu { border-radius: 4px; - background: rgba($black, .8); - box-shadow: rgba($black, .15) 0 2px 2px 2px; + background: rgba($black, 0.8); + box-shadow: rgba($black, 0.15) 0 2px 2px 2px; min-width: 150px; color: $white; @@ -21,11 +21,11 @@ cursor: pointer; &:hover { - background-color: rgba($white, .05); + background-color: rgba($white, 0.05); } &:active { - background-color: rgba($white, .1); + background-color: rgba($white, 0.1); } } @@ -42,7 +42,7 @@ &__subtext { font-size: 12px; - padding: 5px 0px 0px 30px; + padding: 5px 0 0 30px; } } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index a980d35b4..b7fa9a879 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -20,7 +20,7 @@ bottom: 0; left: 0; z-index: 1040; - background-color: #373A47; + background-color: #373a47; animation-fill-mode: forwards; animation-duration: 0.3s; } @@ -87,7 +87,6 @@ // Account Details Modal .account-modal-container { - .qr-header { margin-top: 9px; font-size: 20px; @@ -144,7 +143,8 @@ flex-direction: column; } -.private-key-password-label, .private-key-password-error { +.private-key-password-label, +.private-key-password-error { color: $scorpion; font-size: 14px; line-height: 18px; @@ -171,7 +171,7 @@ .private-key-password-warning { border-radius: 8px; - background-color: #FFF6F6; + background-color: #fff6f6; font-size: 12px; font-weight: 500; line-height: 15px; @@ -235,7 +235,7 @@ min-height: 250.72px; border-radius: 4px; background-color: $white; - box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5); + box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5); &__container { padding: 24px 27px 21px; @@ -288,7 +288,9 @@ &__button { @include paragraph; + @extend %button; + width: 141px; margin: 0 5px; } @@ -297,7 +299,6 @@ //Notification Modal .notification-modal { - &__wrapper { display: flex; flex-direction: column; @@ -333,7 +334,7 @@ justify-content: space-evenly; width: 100%; margin-bottom: 24px; - padding: 0px 42px; + padding: 0 42px; &__btn { cursor: pointer; @@ -429,7 +430,7 @@ &__back { position: absolute; top: 10px; - left: 0px; + left: 0; } &__logo-container { @@ -485,7 +486,7 @@ } &__buy-row:last-of-type { - border-bottom: 0px; + border-bottom: 0; } &__deposit-button { @@ -493,11 +494,11 @@ } .simple-dropdown { - color: #5B5D67; + color: #5b5d67; font-size: 16px; line-height: 21px; - border: 1px solid #D8D8D8; - background-color: #FFFFFF; + border: 1px solid #d8d8d8; + background-color: #fff; text-align: center; width: 100%; height: 45px; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 2f5074686..194a59fbd 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -14,23 +14,23 @@ display: flex; &.ethereum-network .menu-icon-circle div { - background-color: rgba(3, 135, 137, .7) !important; + background-color: rgba(3, 135, 137, 0.7) !important; } &.ropsten-test-network .menu-icon-circle div { - background-color: rgba(233, 21, 80, .7) !important; + background-color: rgba(233, 21, 80, 0.7) !important; } &.kovan-test-network .menu-icon-circle div { - background-color: rgba(105, 4, 150, .7) !important; + background-color: rgba(105, 4, 150, 0.7) !important; } &.rinkeby-test-network .menu-icon-circle div { - background-color: rgba(235, 179, 63, .7) !important; + background-color: rgba(235, 179, 63, 0.7) !important; } &.goerli-test-network .menu-icon-circle div { - background-color: rgba(48, 153, 242, .7) !important; + background-color: rgba(48, 153, 242, 0.7) !important; } } @@ -44,7 +44,7 @@ .network-indicator { display: flex; align-items: center; - font-size: .6em; + font-size: 0.6em; &__down-arrow { height: 8px; @@ -79,12 +79,12 @@ } .dropdown-menu-item .fa.delete { - margin-right: 10px; - display: none; + margin-right: 10px; + display: none; } .dropdown-menu-item:hover .fa.delete { - display: inherit; + display: inherit; } .network-droppo { @@ -136,7 +136,7 @@ .menu-icon-circle--active { border: 1px solid $white; - background: rgba(100, 100, 100, .4); + background: rgba(100, 100, 100, 0.4); } .menu-icon-circle div, diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 41b170e41..298e7978a 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -1,7 +1,7 @@ .new-account { width: 375px; - background-color: #FFFFFF; - box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + background-color: #fff; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); z-index: 25; height: unset; overflow: auto; @@ -63,7 +63,7 @@ .new-account-import-disclaimer { width: 120%; - background-color: #F4F9FC; + background-color: #f4f9fc; display: inline-block; align-items: center; padding: 20px 30px 20px; @@ -95,9 +95,9 @@ &__select { height: 54px; width: 210px; - border: 1px solid #D2D8DD; + border: 1px solid #d2d8dd; border-radius: 4px; - background-color: #FFFFFF; + background-color: #fff; display: flex; align-items: center; @@ -146,7 +146,7 @@ color: $scorpion; font-family: Roboto; font-size: 16px; - padding: 0px 20px; + padding: 0 20px; } &__json { @@ -167,8 +167,8 @@ .hw-tutorial { width: 375px; - border-top: 1px solid #D2D8DD; - border-bottom: 1px solid #D2D8DD; + border-top: 1px solid #d2d8dd; + border-bottom: 1px solid #d2d8dd; overflow: visible; display: block; padding: 15px 30px; @@ -205,7 +205,7 @@ &__connect-btn.disabled { cursor: not-allowed; - opacity: .5; + opacity: 0.5; } &__btn { @@ -261,7 +261,7 @@ &__learn-more { margin-top: 15px; font-size: 14px; - color: #5B5D67; + color: #5b5d67; line-height: 19px; text-align: center; cursor: pointer; @@ -271,7 +271,7 @@ display: block; text-align: center; height: 30px; - margin: 0px auto 10px; + margin: 0 auto 10px; } } @@ -343,7 +343,7 @@ } &__step-asset { - margin: 0px auto 20px; + margin: 0 auto 20px; display: flex; } } @@ -457,9 +457,9 @@ line-height: 19px; border: none; min-width: 46px; - margin-right: 0px; + margin-right: 0; margin-left: 16px; - padding: 0px; + padding: 0; text-transform: uppercase; font-family: Roboto; } @@ -537,7 +537,7 @@ font-size: 16px; line-height: 21px; margin-top: 15px; - padding: 0px 20px; + padding: 0 20px; } &__buttons { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 166d958ae..2572c5fa4 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -47,7 +47,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma width: 85vw; margin-bottom: 10vh; min-height: 90vh; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); } } @@ -55,7 +55,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma .main-container { width: 80vw; min-height: 82vh; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); } } @@ -63,7 +63,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma .main-container { width: 62vw; min-height: 82vh; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); } } diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss index 2d9ca6fb3..e3e333aaf 100644 --- a/ui/app/css/itcss/components/pages/index.scss +++ b/ui/app/css/itcss/components/pages/index.scss @@ -1,3 +1,2 @@ @import './reveal-seed'; - @import './permission-approval'; diff --git a/ui/app/css/itcss/components/request-decrypt-message.scss b/ui/app/css/itcss/components/request-decrypt-message.scss index 3d6ad7a61..7387e944a 100644 --- a/ui/app/css/itcss/components/request-decrypt-message.scss +++ b/ui/app/css/itcss/components/request-decrypt-message.scss @@ -3,7 +3,7 @@ width: 380px; border-radius: 8px; background-color: $white; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; z-index: 25; @@ -62,12 +62,12 @@ } &__header__text { - color: #5B5D67; + color: #5b5d67; font-family: Roboto; font-size: 22px; line-height: 29px; z-index: 3; - text-align: center; + text-align: center; } &__header__tip-container { @@ -174,69 +174,70 @@ border-radius: 5px; position: relative; - &-text { - font-size: 0.7em; - height: 115px; - } + &-text { + font-size: 0.7em; + height: 115px; + } - &-cover { - background-color: white; - opacity: 0.75; - position: absolute; - height: 100%; - width: 100%; - top: 0px; - } + &-cover { + background-color: white; + opacity: 0.75; + position: absolute; + height: 100%; + width: 100%; + top: 0; + } - &-lock { - position: absolute; - height: 100%; - width: 100%; - top: 0px; - cursor: pointer; - img { - padding: 5px; - background-color: #fff; - left: calc(50% - 24px); - position: absolute; - top: calc(50% - 34px); - border-radius: 3px; - } + &-lock { + position: absolute; + height: 100%; + width: 100%; + top: 0; + cursor: pointer; - &--pressed { - display: none; - } - } + img { + padding: 5px; + background-color: #fff; + left: calc(50% - 24px); + position: absolute; + top: calc(50% - 34px); + border-radius: 3px; + } - &-lock-text { - 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; - } + &--pressed { + display: none; + } + } - &-copy { - justify-content: space-evenly; - font-size: 0.75em; - margin-left: 20px; - margin-right: 20px; - display: flex; - cursor: pointer; - } + &-lock-text { + 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-text { - margin-right: 10px; - display: inline; - } + &-copy { + justify-content: space-evenly; + font-size: 0.75em; + margin-left: 20px; + margin-right: 20px; + display: flex; + cursor: pointer; + } - &-copy-tooltip { - float: right; - } + &-copy-text { + margin-right: 10px; + display: inline; + } + + &-copy-tooltip { + float: right; + } } &__footer { @@ -260,34 +261,34 @@ } &__visual { + display: flex; + flex-direction: row; + justify-content: space-evenly; + position: relative; + margin: 0 20px; + + section { display: flex; - flex-direction: row; - justify-content: space-evenly; - position: relative; - margin: 0 20px; + flex-direction: column; + align-items: center; + flex: 1; + } - section { - display: flex; - flex-direction: column; - align-items: center; - flex: 1; - } + &-identicon { + width: 48px; + height: 48px; - &-identicon { + &--default { + background-color: #777a87; + color: white; width: 48px; height: 48px; - - &--default { - background-color: #777A87; - color: white; - width: 48px; - height: 48px; - border-radius: 24px; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - } + border-radius: 24px; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; } } + } } diff --git a/ui/app/css/itcss/components/request-encryption-public-key.scss b/ui/app/css/itcss/components/request-encryption-public-key.scss index 36865a147..a4d601267 100644 --- a/ui/app/css/itcss/components/request-encryption-public-key.scss +++ b/ui/app/css/itcss/components/request-encryption-public-key.scss @@ -3,7 +3,7 @@ width: 380px; border-radius: 8px; background-color: $white; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; z-index: 25; @@ -62,12 +62,12 @@ } &__header__text { - color: #5B5D67; + color: #5b5d67; font-family: Roboto; font-size: 22px; line-height: 29px; z-index: 3; - text-align: center; + text-align: center; } &__header__tip-container { @@ -163,9 +163,9 @@ margin-top: 41px; margin-bottom: 11px; width: 100%; - padding-left: 20px; + padding-left: 20px; padding-right: 20px; - color: $dusty-gray; + color: $dusty-gray; } &__footer { @@ -187,7 +187,7 @@ margin-right: 1.2rem; } } - + &__visual { display: flex; flex-direction: row; @@ -207,7 +207,7 @@ height: 48px; &--default { - background-color: #777A87; + background-color: #777a87; color: white; width: 48px; height: 48px; diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 25924b6c0..0a47d4252 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -3,7 +3,7 @@ width: 380px; border-radius: 8px; background-color: $white; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; z-index: 25; @@ -62,7 +62,7 @@ } &__header__text { - color: #5B5D67; + color: #5b5d67; font-family: Roboto; font-size: 22px; line-height: 29px; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 10a83d7ba..f9bba2827 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -91,7 +91,7 @@ textarea.twelve-word-phrase { } .section-title .fa-arrow-left { - margin: -2px 8px 0px -8px; + margin: -2px 8px 0 -8px; } .sizing-input { @@ -107,7 +107,7 @@ textarea.twelve-word-phrase { /* accounts */ .accounts-section { - margin: 0 0px; + margin: 0 0; } .accounts-section .horizontal-line { @@ -128,7 +128,7 @@ textarea.twelve-word-phrase { } .unconftx-link .fa-arrow-right { - margin: 0 -8px 0px 8px; + margin: 0 -8px 0 8px; } /* identity panel */ @@ -166,7 +166,7 @@ textarea.twelve-word-phrase { } .identity-copy.flex-column { - flex: .25 0 auto; + flex: 0.25 0 auto; justify-content: center; } @@ -237,6 +237,7 @@ textarea.twelve-word-phrase { .name-label:hover .edit-text { visibility: visible; } + /* tx confirm */ .unconftx-section input[type=password] { @@ -317,7 +318,7 @@ textarea.twelve-word-phrase { box-sizing: border-box; border: solid; border-color: transparent; - border-width: .5px; + border-width: 0.5px; border-radius: 2px; } @@ -325,21 +326,21 @@ textarea.twelve-word-phrase { box-sizing: inherit; border: solid; border-color: #f7861c; - border-width: .5px; + border-width: 0.5px; border-radius: 2px; } .buy-inputs:focus { border: solid; border-color: #f7861c; - border-width: .5px; + border-width: 0.5px; border-radius: 2px; } .activeForm { background: #f7f7f7; border: none; - border-radius: 8px 8px 0px 0px; + border-radius: 8px 8px 0 0; width: 50%; text-align: center; padding-bottom: 4px; @@ -347,7 +348,7 @@ textarea.twelve-word-phrase { .inactiveForm { border: none; - border-radius: 8px 8px 0px 0px; + border-radius: 8px 8px 0 0; width: 50%; text-align: center; padding-bottom: 4px; @@ -402,7 +403,8 @@ textarea.twelve-word-phrase { color: $white; } -.qr-ellip-address, .ellip-address { +.qr-ellip-address, +.ellip-address { /*rtl:ignore*/ direction: ltr; overflow: hidden; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 803d69936..9b823cf0b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -16,7 +16,7 @@ .send-screen-card { background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 46px 40.5px 26px; position: relative; align-items: center; @@ -49,7 +49,7 @@ width: 70px; height: 70px; border: 1px solid $alto; - box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); position: absolute; top: -35px; z-index: 25; @@ -271,7 +271,7 @@ display: flex; flex-direction: column; color: #9b9b9b; - font-size: .8em; + font-size: 0.8em; padding: 1px 4px; cursor: pointer; } @@ -307,7 +307,7 @@ } &__send-button__disabled { - opacity: .5; + opacity: 0.5; cursor: auto; } } @@ -322,7 +322,7 @@ width: 498px; height: 605px; background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 46px 40.5px 26px; position: relative; align-items: center; @@ -402,7 +402,7 @@ width: 380px; border-radius: 8px; background-color: $white; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; z-index: 25; @@ -548,7 +548,7 @@ } &__form-row { - margin: 1rem 1rem 0px; + margin: 1rem 1rem 0; position: relative; display: flex; flex-flow: row; @@ -625,7 +625,7 @@ border: 1px solid $geyser; border-radius: 4px; background-color: $white; - box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 11px; margin-left: -1px; overflow-y: scroll; @@ -642,13 +642,13 @@ &__single-asset { display: flex; - flex-flow: row nowrap; - align-items: center; - padding: 8px 8px; + flex-flow: row nowrap; + align-items: center; + padding: 8px 8px; - &:hover { - background-color: rgba($alto, 0.2); - } + &:hover { + background-color: rgba($alto, 0.2); + } } &__asset { @@ -687,7 +687,7 @@ font-size: 12px; &__label { - margin-right: .25rem; + margin-right: 0.25rem; } } @@ -703,7 +703,7 @@ border: 1px solid $geyser; border-radius: 4px; background-color: $white; - box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); top: 65px; left: 0; box-sizing: content-box; @@ -728,6 +728,7 @@ .send-v2__asset-dropdown__asset { height: 100%; + &:hover { background-color: $white; } @@ -750,7 +751,8 @@ } } - &__memo-text-area, &__hex-data { + &__memo-text-area, + &__hex-data { &__input { z-index: 1025; position: relative; @@ -780,7 +782,7 @@ width: 56px; height: 20px; position: absolute; - border: 2px solid #B0D7F2; + border: 2px solid #b0d7f2; border-radius: 6px; cursor: pointer; top: 0; @@ -793,14 +795,14 @@ color: #2f9ae0; &__disabled { - color: #B0D7F2; + color: #b0d7f2; cursor: auto; } } input:checked + &__button { - background-color: #037DD6; - border: 2px solid #037DD6; + background-color: #037dd6; + border: 2px solid #037dd6; color: #fff; } } @@ -820,7 +822,6 @@ display: flex; align-items: center; } - } &__sliders-icon-container { @@ -868,10 +869,10 @@ } &__customize-gas { - border: 1px solid #D8D8D8; + border: 1px solid #d8d8d8; border-radius: 4px; - background-color: #FFFFFF; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); + background-color: #fff; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14); font-family: Roboto; display: flex; flex-flow: column; @@ -943,7 +944,10 @@ margin-right: 21.25px; } - &__revert, &__cancel, &__save, &__save__error { + &__revert, + &__cancel, + &__save, + &__save__error { display: flex; justify-content: center; align-items: center; @@ -957,7 +961,9 @@ margin-left: 21.25px; } - &__cancel, &__save, &__save__error { + &__cancel, + &__save, + &__save__error { width: 85.74px; min-width: initial; } @@ -1028,7 +1034,7 @@ border-left: 1px solid #dadada; font-size: 18px; color: $tundora; - right: 0px; + right: 0; padding: 0; display: flex; justify-content: space-around; @@ -1054,7 +1060,6 @@ display: none; } } - } .advanced-gas-options-btn { diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss index a21095a3e..d815de8df 100644 --- a/ui/app/css/itcss/components/simple-dropdown.scss +++ b/ui/app/css/itcss/components/simple-dropdown.scss @@ -30,8 +30,8 @@ border: 1px solid #d2d8dd; border-radius: 4px; background-color: #fff; - -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 10px; overflow-y: scroll; left: 0; diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss index fccba2198..2579b279f 100644 --- a/ui/app/css/itcss/components/tab-bar.scss +++ b/ui/app/css/itcss/components/tab-bar.scss @@ -13,16 +13,16 @@ box-sizing: border-box; font-size: 16px; padding: 16px 24px; - opacity: .5; + opacity: 0.5; transition: opacity 200ms ease-in-out; @media screen and (min-width: 576px) { &:hover { - opacity: .4; + opacity: 0.4; } &:active { - opacity: .6; + opacity: 0.6; } } @@ -58,7 +58,7 @@ background-image: url('/images/caret-right.svg'); width: 36px; height: 36px; - opacity: .5; + opacity: 0.5; background-size: contain; background-repeat: no-repeat; background-position: center; diff --git a/ui/app/css/itcss/components/tooltip.scss b/ui/app/css/itcss/components/tooltip.scss index d6cb4025b..97840ca1a 100644 --- a/ui/app/css/itcss/components/tooltip.scss +++ b/ui/app/css/itcss/components/tooltip.scss @@ -1,7 +1,7 @@ @import '../../../../../node_modules/react-tippy/dist/tippy'; .metamask-tooltip { - padding: 5px !important; + padding: 5px !important; } .tooltip { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 988d5b277..486c48694 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -16,8 +16,8 @@ @media screen and (max-width: $break-small) { .tx-list-header-wrapper { - margin-top: .2em; - margin-bottom: .6em; + margin-top: 0.2em; + margin-bottom: 0.6em; justify-content: center; flex: 0 0 auto; } @@ -34,7 +34,7 @@ @media screen and (min-width: $break-large) { .tx-list-header { font-size: 16px; - margin: 1.1em 2.37em .8em; + margin: 1.1em 2.37em 0.8em; } .tx-list-container::-webkit-scrollbar { @@ -48,11 +48,11 @@ flex: 0 0 1px; @media screen and (max-width: $break-small) { - margin: .1em 0; + margin: 0.1em 0; } @media screen and (min-width: $break-large) { - margin: .1em 2.37em; + margin: 0.1em 2.37em; } } @@ -65,7 +65,7 @@ flex-flow: column nowrap; @media screen and (max-width: $break-small) { - padding: 0 1.3em .8em; + padding: 0 1.3em 0.8em; } @media screen and (min-width: $break-large) { @@ -75,7 +75,7 @@ .tx-list-pending-item-container { cursor: pointer; - opacity: .5; + opacity: 0.5; } .tx-list-date-wrapper { @@ -118,7 +118,7 @@ background: #d1edff; width: 100%; border-radius: 12px; - font-size: .75rem; + font-size: 0.75rem; display: flex; justify-content: center; margin-left: 44px; @@ -147,7 +147,7 @@ cursor: pointer; @media screen and (min-width: 576px) and (max-width: 679px) { - margin-left: 0px; + margin-left: 0; } @media screen and (min-width: 380px) and (max-width: 575px) { @@ -155,7 +155,7 @@ } @media screen and (max-width: 379px) { - margin-left: 0px; + margin-left: 0; text-align: center; } } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index e9a19a207..64c9688f6 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -41,8 +41,7 @@ html { .unit-input__input, .account-list-item__account-primary-balance, .account-list-item__input, - .currency-display__input - { + .currency-display__input { outline: none; } } @@ -130,11 +129,11 @@ input.form-control { .pinned-to-bottom { position: absolute; - bottom: 0px; + bottom: 0; } .pinned-to-bottom-right { position: absolute; - bottom: 0px; + bottom: 0; right: 0; } diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss index c556eddc3..b60fcd068 100644 --- a/ui/app/css/itcss/generic/reset.scss +++ b/ui/app/css/itcss/generic/reset.scss @@ -122,10 +122,10 @@ q { quotes: none; } -blockquote:before, -blockquote:after, -q:before, -q:after { +blockquote::before, +blockquote::after, +q::before, +q::after { content: ''; content: none; } @@ -138,6 +138,7 @@ table { button { border-style: none; cursor: pointer; + &::-moz-focus-inner { border: none; } diff --git a/ui/app/css/itcss/settings/index.scss b/ui/app/css/itcss/settings/index.scss index cc32a5477..bbf79c80f 100644 --- a/ui/app/css/itcss/settings/index.scss +++ b/ui/app/css/itcss/settings/index.scss @@ -1,3 +1,2 @@ @import './variables'; - @import './typography'; diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index 4fe0309c8..27390b6ee 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -51,34 +51,34 @@ $fa-font-path: 'fonts/fontawesome'; font-size: $size; } -@mixin h1($weight: 400, $size: 2.5rem){ +@mixin h1($weight: 400, $size: 2.5rem) { @include fontScale($weight, $size); } -@mixin h2($weight: 400, $size: 2rem){ +@mixin h2($weight: 400, $size: 2rem) { @include fontScale($weight, $size); } -@mixin h3($weight: 400, $size: 1.5rem){ +@mixin h3($weight: 400, $size: 1.5rem) { @include fontScale($weight, $size); } -@mixin h4($weight: 400, $size: 1.125rem){ +@mixin h4($weight: 400, $size: 1.125rem) { @include fontScale($weight, $size); } -@mixin h5($weight: 400, $size: 1rem){ +@mixin h5($weight: 400, $size: 1rem) { @include fontScale($weight, $size); } -@mixin h6($weight: 400, $size: .875rem){ +@mixin h6($weight: 400, $size: 0.875rem) { @include fontScale($weight, $size); } -@mixin h7($weight: 400, $size: .75rem){ +@mixin h7($weight: 400, $size: 0.75rem) { @include fontScale($weight, $size); } -@mixin paragraph($weight: 400, $size: 1rem){ +@mixin paragraph($weight: 400, $size: 1rem) { @include fontScale($weight, $size); } diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 740d765a5..1910c39d0 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -17,8 +17,8 @@ $white-linen: #faf6f0; // formerly 'faint orange (textfield shades)' $rajah: #f5c26d; // formerly 'light orange (button shades)' $buttercup: #f5a623; // formerly 'dark orange (text)' $tundora: #4a4a4a; // formerly 'borders/font/any gray' -$flamingo: #F56821; -$valencia: #D73A49; +$flamingo: #f56821; +$valencia: #d73a49; $gallery: #efefef; $alabaster: #f7f7f7; $shark: #22232c; @@ -28,7 +28,7 @@ $dusty-gray: #9b9b9b; $alto: #dedede; $alabaster: #fafafa; $silver-chalice: #aeaeae; -$curious-blue: #037DD6; +$curious-blue: #037dd6; $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; @@ -57,25 +57,25 @@ $dodger-blue: #3099f2; $zumthor: #edf7ff; $ecstasy: #f7861c; $linen: #fdf4f4; -$oslo-gray: #8C8E94; +$oslo-gray: #8c8e94; $polar: #fafcfe; $blizzard-blue: #bfdef3; $mischka: #dddee9; $web-orange: #f2a202; -$mercury: #E5E5E5; -$lochmara: #037DD6; +$mercury: #e5e5e5; +$lochmara: #037dd6; /* notification and error message colors */ -$success-green: #28A745; -$success-light-green: #E8F9F1; -$danger-red: #D73A49; -$danger-light-red: #F8EAE8; -$info-blue: #037DD6; -$info-light-blue: #E8F4FD; -$warning-yellow: #FFD33D; -$warning-light-yellow: #FEFAE8; +$success-green: #28a745; +$success-light-green: #e8f9f1; +$danger-red: #d73a49; +$danger-light-red: #f8eae8; +$info-blue: #037dd6; +$info-light-blue: #e8f4fd; +$warning-yellow: #ffd33d; +$warning-light-yellow: #fefae8; /* Z-Indicies @@ -117,7 +117,7 @@ $sidebar-overlay-z-index: 25; %modal { background-color: $white; border-radius: 10px; - box-shadow: 0px 5px 16px rgba($black, 0.25);; + box-shadow: 0 5px 16px rgba($black, 0.25);; } /* @@ -144,19 +144,19 @@ $Blue-100: #a7d9fe; $Blue-200: #75c4fd; $Blue-300: #43aefc; $Blue-400: #1098fc; -$Blue-500: #037DD6; +$Blue-500: #037dd6; $Blue-600: #0260a4; $Blue-700: #024272; $Blue-800: #01253f; $Blue-900: #00080d; $Grey-000: #f2f3f4; -$Grey-100: #D6D9DC; +$Grey-100: #d6d9dc; $Grey-200: #bbc0c5; $Grey-300: #9fa6ae; $Grey-400: #848c96; $Grey-200: #bbc0c5; -$Grey-500: #6A737D; +$Grey-500: #6a737d; $Grey-600: #535a61; $Grey-800: #24272a; @@ -165,7 +165,7 @@ $Red-100: #f7d5d8; $Red-200: #f1b9be; $Red-300: #e88f97; $Red-400: #e06470; -$Red-500: #D73A49; +$Red-500: #d73a49; $Red-600: #b92534; $Red-700: #8e1d28; $Red-800: #64141c; @@ -174,9 +174,9 @@ $Red-900: #3a0c10; $Orange-000: #fef5ef; $Orange-300: #faa66c; $Orange-600: #c65507; -$Orange-500: #F66A0A; +$Orange-500: #f66a0a; -$Black-100: #24292E; +$Black-100: #24292e; // Font Sizes %h3 { @@ -198,13 +198,13 @@ $Black-100: #24292E; } %h6 { - font-size: .875rem; + font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; } %h8 { - font-size: .75rem; + font-size: 0.75rem; line-height: 1.0625rem; font-weight: 400; } @@ -213,7 +213,7 @@ $Black-100: #24292E; /* Spacing Variables */ -$no-spacing: 0px; +$no-spacing: 0; $xxs-spacing: 4px; $xs-spacing: 8px; $s-spacing: 16px; @@ -229,7 +229,7 @@ $xxlarge-spacing: 64px; border: 1px solid $Grey-100; box-sizing: border-box; border-radius: 8px; - padding: .625rem .75rem; + padding: 0.625rem 0.75rem; font-size: 1.25rem; } // Input mixin @@ -257,20 +257,24 @@ $xxlarge-spacing: 64px; %font--bold { @extend %font; + font-weight: bold; } %header--18 { @extend %font; + font-size: 18px; } %header--24 { @extend %font; + font-size: 24px; } %content-text { @extend %font; + font-size: 14px; } diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index d4ef92fb9..1d0d1c463 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -135,7 +135,7 @@ } .cursor-pointer:active { - transform: scale(.97); + transform: scale(0.97); } .cursor-disabled { @@ -278,7 +278,7 @@ hr.horizontal-line { // TODO: move into component-level contextual 'active' state .letter-spacey { - letter-spacing: .1em; + letter-spacing: 0.1em; } .active { diff --git a/ui/app/pages/add-token/index.scss b/ui/app/pages/add-token/index.scss index ef6802f96..51a80aab2 100644 --- a/ui/app/pages/add-token/index.scss +++ b/ui/app/pages/add-token/index.scss @@ -24,7 +24,6 @@ } &__custom-symbol { - &__label-wrapper { display: flex; flex-flow: row nowrap; diff --git a/ui/app/pages/add-token/token-list/index.scss b/ui/app/pages/add-token/token-list/index.scss index bad4ec30f..165b175f3 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: .75rem; + font-size: 0.75rem; } &__tokens-container { @@ -24,7 +24,7 @@ position: relative; &:hover { - border: 2px solid rgba($malibu-blue, .5); + border: 2px solid rgba($malibu-blue, 0.5); } &--selected { @@ -32,7 +32,7 @@ } &--disabled { - opacity: .4; + opacity: 0.4; pointer-events: none; } } @@ -45,7 +45,7 @@ background-position: center; border-radius: 50%; background-color: $white; - box-shadow: 0 2px 4px 0 rgba($black, .24); + box-shadow: 0 2px 4px 0 rgba($black, 0.24); margin-right: 12px; flex: 0 0 auto; } diff --git a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss index a363c77c5..a823b6aae 100644 --- a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss +++ b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss @@ -4,7 +4,7 @@ padding-top: 36px; flex-direction: column; line-height: 22px; - opacity: .5; + opacity: 0.5; &__text { color: $silver-chalice; @@ -19,6 +19,7 @@ &__link { @extend %link; - margin-top: .5rem; + + margin-top: 0.5rem; } } diff --git a/ui/app/pages/asset/asset.scss b/ui/app/pages/asset/asset.scss index f44a42b69..4445cb67e 100644 --- a/ui/app/pages/asset/asset.scss +++ b/ui/app/pages/asset/asset.scss @@ -4,7 +4,7 @@ } &__overview { - box-shadow: 0px 3px 4px rgba(135, 134, 134, 0.16); + box-shadow: 0 3px 4px rgba(135, 134, 134, 0.16); } } diff --git a/ui/app/pages/confirm-add-token/index.scss b/ui/app/pages/confirm-add-token/index.scss index 66146cf78..f1f021ddb 100644 --- a/ui/app/pages/confirm-add-token/index.scss +++ b/ui/app/pages/confirm-add-token/index.scss @@ -2,7 +2,7 @@ padding: 16px; &__header { - font-size: .75rem; + font-size: 0.75rem; display: flex; } 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 7d3018f6e..8449ca73d 100644 --- a/ui/app/pages/confirm-approve/confirm-approve-content/index.scss +++ b/ui/app/pages/confirm-approve/confirm-approve-content/index.scss @@ -4,7 +4,6 @@ align-items: center; width: 100%; height: 100%; - font-family: Roboto; font-style: normal; @@ -51,7 +50,7 @@ line-height: 20px; margin-top: 16px; margin-bottom: 16px; - color: #6A737D; + color: #6a737d; text-align: center; padding-left: 24px; padding-right: 24px; @@ -61,7 +60,7 @@ &__card--no-border { display: flex; flex-flow: column; - border-bottom: 1px solid #D2D8DD; + border-bottom: 1px solid #d2d8dd; position: relative; padding-left: 24px; padding-right: 24px; @@ -76,9 +75,9 @@ font-weight: normal; font-size: 12px; line-height: 17px; - color: #6A737D; + color: #6a737d; } - } + } &__card--no-border { border-bottom: none; @@ -99,7 +98,8 @@ width: 100%; } - &__title, &__title-value { + &__title, + &__title-value { font-weight: bold; font-size: 14px; line-height: 20px; @@ -141,7 +141,7 @@ div { width: 22px; height: 2px; - background: #037DD6; + background: #037dd6; position: absolute; } @@ -157,7 +157,7 @@ &__circle { width: 14px; height: 14px; - border: 2px solid #037DD6; + border: 2px solid #037dd6; border-radius: 50%; background: white; position: absolute; @@ -184,14 +184,14 @@ font-weight: bold; font-size: 18px; line-height: 25px; - color: #000000; + color: #000; } &__secondary-fee { font-weight: normal; font-size: 14px; line-height: 20px; - color: #8C8E94; + color: #8c8e94; } } @@ -219,7 +219,7 @@ flex-flow: row; padding-top: 15px; padding-bottom: 30px; - border-bottom: 1px solid #D2D8DD; + border-bottom: 1px solid #d2d8dd; width: 100%; justify-content: center; padding-left: 24px; @@ -229,14 +229,14 @@ &__large-text { font-size: 18px; line-height: 25px; - color: #24292E; + color: #24292e; } &__medium-link-text { font-size: 14px; line-height: 20px; font-weight: 500; - color: #037DD6; + color: #037dd6; } &__medium-text, @@ -244,7 +244,7 @@ font-weight: normal; font-size: 14px; line-height: 20px; - color: #24292E; + color: #24292e; } &__label { @@ -252,15 +252,17 @@ margin-right: 4px; } - &__small-text, &__small-blue-text, &__info-row { + &__small-text, + &__small-blue-text, + &__info-row { font-weight: normal; font-size: 12px; line-height: 17px; - color: #6A737D; + color: #6a737d; } &__small-blue-text { - color: #037DD6; + color: #037dd6; } &__info-row { diff --git a/ui/app/pages/connected-accounts/index.scss b/ui/app/pages/connected-accounts/index.scss index 1ac7f3a58..a320b2111 100644 --- a/ui/app/pages/connected-accounts/index.scss +++ b/ui/app/pages/connected-accounts/index.scss @@ -1,7 +1,8 @@ .connected-accounts { &__footer { - a, a:hover { - color: #037DD6; + a, + a:hover { + color: #037dd6; cursor: pointer; font-size: 14px; } diff --git a/ui/app/pages/connected-sites/index.scss b/ui/app/pages/connected-sites/index.scss index 85de05700..652df5a28 100644 --- a/ui/app/pages/connected-sites/index.scss +++ b/ui/app/pages/connected-sites/index.scss @@ -6,6 +6,7 @@ &__confirmation { flex-direction: column; + button:first-child { margin-right: 24px; } @@ -18,15 +19,16 @@ justify-content: space-between; align-items: center; } - + &__footer-row + &__footer-row { margin-top: 15px; } - a, a:hover { + a, + a:hover { font-size: 14px; line-height: 20px; - color: #037DD6; + color: #037dd6; cursor: pointer; } } diff --git a/ui/app/pages/error/index.scss b/ui/app/pages/error/index.scss index 6784b374f..cf0c2aeb4 100644 --- a/ui/app/pages/error/index.scss +++ b/ui/app/pages/error/index.scss @@ -2,11 +2,9 @@ display: flex; flex-flow: column nowrap; align-items: center; - font-family: Roboto; font-style: normal; font-weight: normal; - padding: 35px 10px 10px 10px; height: 100%; 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 de603fce4..f085ea99e 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 @@ -12,7 +12,8 @@ } } - &__text-1, &__text-3 { + &__text-1, + &__text-3 { font-weight: normal; font-size: 16px; margin-top: 18px; @@ -24,13 +25,13 @@ margin-top: 26px; } - &__text-3 { + &__text-3 { margin-top: 2px; margin-bottom: 2px; @media screen and (max-width: $break-small) { margin-bottom: 16px; - font-size: .875rem; + 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 19b13e6cf..8481139f5 100644 --- a/ui/app/pages/first-time-flow/index.scss +++ b/ui/app/pages/first-time-flow/index.scss @@ -1,11 +1,7 @@ @import 'welcome/index'; - @import 'select-action/index'; - @import 'seed-phrase/index'; - @import 'end-of-flow/index'; - @import 'metametrics-opt-in/index'; @@ -28,7 +24,7 @@ margin-bottom: 40px; @media screen and (max-width: $break-small) { - margin-bottom: 0px; + margin-bottom: 0; } } } @@ -68,7 +64,7 @@ &__textarea-label { margin-bottom: 9px; - color: #1B344D; + color: #1b344d; font-size: 18px; } @@ -77,9 +73,9 @@ direction: ltr; font-size: 1rem; font-family: Roboto; - border: 1px solid #CDCDCD; + border: 1px solid #cdcdcd; border-radius: 6px; - background-color: #FFFFFF; + background-color: #fff; padding: 16px; margin-top: 8px; } @@ -103,7 +99,7 @@ height: 200px; overflow-y: auto; color: #757575; - font-size: .75rem; + font-size: 0.75rem; line-height: 15px; text-align: justify; margin: 0; @@ -117,7 +113,7 @@ @media screen and (max-width: $break-small) { margin-bottom: 16px; - font-size: .875rem; + font-size: 0.875rem; } } @@ -134,8 +130,8 @@ } &__checkbox { - background: #FFFFFF; - border: 1px solid #CDCDCD; + background: #fff; + border: 1px solid #cdcdcd; box-sizing: border-box; height: 34px; width: 34px; @@ -148,7 +144,7 @@ } .fa-check { - color: #2f9ae0 + color: #2f9ae0; } } 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 afded8345..a5cb6e1da 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 @@ -27,7 +27,6 @@ &__title { position: relative; margin-top: 20px; - font-family: Roboto; font-style: normal; font-weight: normal; @@ -39,7 +38,7 @@ margin-top: 25px; .fa-bar-chart { - color: #C4C4C4; + color: #c4c4c4; } } @@ -68,12 +67,12 @@ .fa-check { margin-right: 12px; - color: #1ACC56; + color: #1acc56; } .fa-times { margin-right: 12px; - color: #D0021B; + color: #d0021b; } } @@ -129,7 +128,7 @@ } footer { - padding: 0px; + padding: 0; } } } 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 93bd02d53..eb63c5805 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,7 @@ } @media screen and (max-width: 575px) { - font-size: .875rem; + font-size: 0.875rem; padding: 6px 18px; } } @@ -70,7 +70,7 @@ flex-flow: row wrap; min-height: 161px; max-width: 575px; - border: 1px solid #CDCDCD; + border: 1px solid #cdcdcd; border-radius: 6px; background-color: $white; margin: 24px 0 36px; diff --git a/ui/app/pages/first-time-flow/seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/index.scss index 24da45ded..b4a57912d 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/index.scss +++ b/ui/app/pages/first-time-flow/seed-phrase/index.scss @@ -1,9 +1,7 @@ @import 'confirm-seed-phrase/index'; - @import 'reveal-seed-phrase/index'; .seed-phrase { - &__sections { display: flex; @@ -34,7 +32,7 @@ } .first-time-flow__text-block { - color: #5A5A5A; + color: #5a5a5a; } } } 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 583d92a0b..a6f3c88a2 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 @@ -11,7 +11,7 @@ position: relative; display: flex; justify-content: center; - border: 1px solid #CDCDCD; + border: 1px solid #cdcdcd; border-radius: 6px; background-color: $white; padding: 18px; @@ -35,7 +35,7 @@ bottom: 0; height: 100%; width: 100%; - background-color: rgba(0,0,0,0.6); + background-color: rgba(0, 0, 0, 0.6); display: flex; flex-flow: column nowrap; align-items: center; @@ -46,7 +46,7 @@ &__reveal-button { color: $white; - font-size: .75rem; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; margin-top: 8px; @@ -60,7 +60,7 @@ } button { - margin-top: 0px; + margin-top: 0; } &__buttons { 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 e1b22d05b..34a72a10c 100644 --- a/ui/app/pages/first-time-flow/select-action/index.scss +++ b/ui/app/pages/first-time-flow/select-action/index.scss @@ -34,8 +34,7 @@ justify-content: space-evenly; width: 388px; height: 278px; - - border: 1px solid #D8D8D8; + border: 1px solid #d8d8d8; box-sizing: border-box; border-radius: 10px; margin-left: 22px; @@ -47,7 +46,7 @@ } &__button-symbol { - color: #C4C4C4; + color: #c4c4c4; margin-top: 41px; } @@ -55,7 +54,7 @@ display: flex; flex-direction: column; justify-content: center; - align-items: center; + align-items: center; height: 144px; } @@ -65,7 +64,7 @@ font-weight: normal; line-height: 28px; font-size: 20px; - color: #000000; + color: #000; margin-top: 12px; text-align: center; } @@ -76,7 +75,7 @@ font-weight: normal; line-height: 20px; font-size: 14px; - color: #7A7A7B; + color: #7a7a7b; margin-top: 10px; text-align: center; } @@ -85,4 +84,4 @@ font-weight: 500; width: 221px; } -} \ No newline at end of file +} diff --git a/ui/app/pages/first-time-flow/welcome/index.scss b/ui/app/pages/first-time-flow/welcome/index.scss index b3d51580d..c3e1688bb 100644 --- a/ui/app/pages/first-time-flow/welcome/index.scss +++ b/ui/app/pages/first-time-flow/welcome/index.scss @@ -31,7 +31,7 @@ } @media screen and (max-width: 575px) { - font-size: .9rem; + font-size: 0.9rem; } } diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss index bb2ece13b..814223bf3 100644 --- a/ui/app/pages/home/index.scss +++ b/ui/app/pages/home/index.scss @@ -23,7 +23,7 @@ // TODO: fix style import order so this isn't required to override specificity of `tab` class &__main-view &__tabs { border: none; - box-shadow: 0px 3px 4px rgba(135, 134, 134, 0.16); + box-shadow: 0 3px 4px rgba(135, 134, 134, 0.16); } &__main-view &__tab { @@ -42,7 +42,9 @@ &__connect-status-text { display: flex; flex-direction: column; + @extend %content-text; + padding-left: 24px; padding-right: 24px; @@ -50,7 +52,7 @@ margin-bottom: 20px; &:last-child { - margin-bottom: 0px; + margin-bottom: 0; } } } @@ -94,7 +96,8 @@ padding: 0; } - a, a:hover { + a, + a:hover { color: $dodger-blue; cursor: pointer; } diff --git a/ui/app/pages/index.scss b/ui/app/pages/index.scss index 9bd1a928f..95bdc7489 100644 --- a/ui/app/pages/index.scss +++ b/ui/app/pages/index.scss @@ -1,27 +1,14 @@ @import 'unlock-page/index'; - @import 'add-token/index'; - @import 'error/index'; - @import 'home/index'; - @import 'send/send'; - @import 'confirm-add-token/index'; - @import 'connected-sites/index'; - @import 'connected-accounts/index'; - @import 'settings/index'; - @import 'first-time-flow/index'; - @import 'keychains/index'; - @import 'confirm-approve/index'; - @import 'permissions-connect/index'; - @import 'asset/asset'; diff --git a/ui/app/pages/keychains/index.scss b/ui/app/pages/keychains/index.scss index 868185419..a70255d0d 100644 --- a/ui/app/pages/keychains/index.scss +++ b/ui/app/pages/keychains/index.scss @@ -27,7 +27,7 @@ } @media only screen and (max-width: 575px) { - .import-account{ + .import-account { margin: 24px; display: flex; flex-flow: column nowrap; @@ -62,7 +62,7 @@ } .import-account__title { - color: #1B344D; + color: #1b344d; font-size: 40px; line-height: 51px; margin-bottom: 10px; @@ -80,15 +80,15 @@ .import-account__secret-phrase { height: 190px; width: 495px; - border: 1px solid #CDCDCD; + border: 1px solid #cdcdcd; border-radius: 6px; - background-color: #FFFFFF; + background-color: #fff; padding: 17px; font-size: 16px; } .import-account__secret-phrase::placeholder { - color: #9B9B9B; + color: #9b9b9b; font-weight: 200; } @@ -99,17 +99,17 @@ } .import-account__selector-label { - color: #1B344D; + color: #1b344d; font-size: 16px; } .import-account__dropdown { width: 325px; - border: 1px solid #CDCDCD; + border: 1px solid #cdcdcd; border-radius: 4px; - background-color: #FFFFFF; + background-color: #fff; margin-top: 14px; - color: #5B5D67; + color: #5b5d67; font-family: Roboto; font-size: 18px; line-height: 23px; @@ -137,14 +137,14 @@ .import-account__input-error-message { margin-top: 10px; width: 422px; - color: #FF001F; + color: #ff001f; font-size: 16px; line-height: 21px; } .import-account__input-label { margin-bottom: 9px; - color: #1B344D; + color: #1b344d; font-size: 18px; line-height: 23px; } @@ -170,9 +170,9 @@ .import-account__file-input-label { height: 53px; width: 148px; - border: 1px solid #1B344D; + border: 1px solid #1b344d; border-radius: 4px; - color: #1B344D; + color: #1b344d; font-family: Roboto; font-size: 18px; display: flex; @@ -189,7 +189,7 @@ } .import-account__file-name { - color: #000000; + color: #000; font-family: Roboto; font-size: 18px; line-height: 23px; diff --git a/ui/app/pages/permissions-connect/choose-account/index.scss b/ui/app/pages/permissions-connect/choose-account/index.scss index 09fd5148b..9bcdd89ef 100644 --- a/ui/app/pages/permissions-connect/choose-account/index.scss +++ b/ui/app/pages/permissions-connect/choose-account/index.scss @@ -27,7 +27,9 @@ @extend %header--18; } - &__text, &__text-blue, &__text-grey { + &__text, + &__text-blue, + &__text-grey { @extend %content-text; } @@ -44,7 +46,7 @@ flex: 2 1 0; width: 92%; max-height: max-content; - border: 1px solid #D0D5DA; + border: 1px solid #d0d5da; box-sizing: border-box; border-radius: 8px; margin-top: 8px; @@ -73,7 +75,7 @@ display: flex; justify-content: flex-start; align-items: center; - min-width:0; + min-width: 0; } &__list-check-box { @@ -98,7 +100,7 @@ display: flex; align-items: center; padding: 16px; - border-bottom: 1px solid #D2D8DD; + border-bottom: 1px solid #d2d8dd; justify-content: space-between; &:last-of-type { @@ -119,6 +121,7 @@ &__label { @extend %content-text; + color: $Black-100; text-overflow: ellipsis; overflow: hidden; @@ -127,18 +130,20 @@ &__balance { @extend %content-text; + font-size: 12px; color: $Grey-500; } &__last-connected { @extend %content-text; + font-size: 10px; line-height: 140.62%; display: flex; flex-direction: column; align-items: flex-end; - color: #037DD6; + color: #037dd6; } } @@ -167,7 +172,7 @@ padding-top: 16px; padding-bottom: 16px; margin-top: 8px; - border-top: 1px solid #D6D9DC; + border-top: 1px solid #d6d9dc; @media screen and (min-width: 576px) { border-top: none; @@ -186,5 +191,4 @@ margin-right: 16px; } } - } diff --git a/ui/app/pages/permissions-connect/index.scss b/ui/app/pages/permissions-connect/index.scss index 9f7701075..a5f9f1d2d 100644 --- a/ui/app/pages/permissions-connect/index.scss +++ b/ui/app/pages/permissions-connect/index.scss @@ -19,12 +19,13 @@ &__top-bar { display: grid; grid-template-columns: 1fr 1fr; - padding: 16px 16px 0px 16px; + padding: 16px 16px 0 16px; align-items: center; } &__back { @extend %content-text; + color: $Grey-600; cursor: pointer; @@ -35,8 +36,9 @@ &__page-count { @extend %content-text; + font-size: 12px; - color: #6A737D; + color: #6a737d; grid-column: 2; justify-self: end; font-weight: bold; diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss index a0c36bdac..e9b8cd265 100644 --- a/ui/app/pages/send/send.scss +++ b/ui/app/pages/send/send.scss @@ -7,11 +7,13 @@ .page-container__title { @extend %h4; + text-align: center; } .page-container__header-close-text { @extend %link; + font-size: 1rem; line-height: 1.1875rem; position: absolute; @@ -30,7 +32,7 @@ &__to-row { margin: 0; - padding: .5rem; + padding: 0.5rem; flex: 0 0 auto; background-color: $Grey-000; border-bottom: 1px solid $alto; @@ -38,6 +40,7 @@ &__select-recipient-wrapper { @extend %col-nowrap; + flex: 1 1 auto; height: 0; @@ -47,6 +50,7 @@ &__link { @extend %link; @extend %row-nowrap; + padding: 1rem; font-size: 1rem; border-bottom: 1px solid $alto; @@ -55,11 +59,12 @@ &__back-caret { @extend %bg-contain; + display: block; background-image: url('/images/caret-left.svg'); width: 18px; height: 18px; - margin-right: .5rem; + margin-right: 0.5rem; [dir='rtl'] & { transform: rotate(180deg); @@ -72,9 +77,10 @@ &__load-more { @extend %link; - font-size: .75rem; + + font-size: 0.75rem; line-height: 1.0625rem; - padding: .5rem; + padding: 0.5rem; text-align: center; border-bottom: 1px solid $alto; } @@ -86,10 +92,11 @@ &__group-label { @extend %h8; + background-color: $Grey-000; color: $Grey-600; - line-height: .875rem; - padding: .5rem 1rem; + line-height: 0.875rem; + padding: 0.5rem 1rem; border-bottom: 1px solid $alto; &:first-of-type { @@ -97,9 +104,11 @@ } } - &__group-item, &__group-item--selected { + &__group-item, + &__group-item--selected { @extend %row-nowrap; - padding: .75rem 1rem; + + padding: 0.75rem 1rem; align-items: center; border-bottom: 1px solid $alto; cursor: pointer; @@ -115,18 +124,20 @@ &__content { @extend %col-nowrap; + flex: 1 1 auto; width: 0; } &__title { - font-size: .875rem; + font-size: 0.875rem; line-height: 1.25rem; color: $black; } &__subtitle { @extend %h8; + color: $Grey-500; } } @@ -143,12 +154,13 @@ &__wrapper { @extend %row-nowrap; + flex: 1 1 auto; width: 0; align-items: center; background: $white; - border-radius: .5rem; - padding: .75rem .5rem; + border-radius: 0.5rem; + padding: 0.75rem 0.5rem; border: 1px solid $Grey-100; transition: border-color 150ms ease-in-out; @@ -158,10 +170,11 @@ &__status-icon { @extend %bg-contain; + background-image: url("/images/search-black.svg"); width: 1.125rem; height: 1.125rem; - margin: .25rem .5rem .25rem .25rem; + margin: 0.25rem 0.5rem 0.25rem 0.25rem; &--error { @@ -174,6 +187,7 @@ &__input { @extend %h6; + flex: 1 1 auto; width: 0; border: 0; @@ -186,20 +200,21 @@ &__action-icon { @extend %bg-contain; + cursor: pointer; &--erase { background-image: url("/images/close-gray.svg"); - width: .75rem; - height: .75rem; - margin: 0 .25rem; + width: 0.75rem; + height: 0.75rem; + margin: 0 0.25rem; } &--qrcode { background-image: url("/images/qr-blue.svg"); width: 1.5rem; height: 1.5rem; - margin: 0 .25rem; + margin: 0 0.25rem; } } @@ -213,8 +228,9 @@ &__input { @extend %col-nowrap; - font-size: .75rem; - line-height: .75rem; + + font-size: 0.75rem; + line-height: 0.75rem; font-weight: 400; color: $Blue-500; } @@ -225,13 +241,14 @@ &__selected-input { &__title { @extend %ellipsify; - font-size: .875rem; + + font-size: 0.875rem; } &__subtitle { font-size: 0.75rem; color: $Grey-500; - margin-top: .25rem; + margin-top: 0.25rem; } } } diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss index 6a750c604..0a18ff54b 100644 --- a/ui/app/pages/settings/contact-list-tab/index.scss +++ b/ui/app/pages/settings/contact-list-tab/index.scss @@ -21,7 +21,7 @@ border-bottom: 1px solid #dedede; &:hover { - border: 1px solid #037DD6; + border: 1px solid #037dd6; cursor: pointer; } } @@ -30,7 +30,8 @@ padding: 3px; } - &__header, &__header--edit { + &__header, + &__header--edit { &__name { font-family: Roboto; font-style: normal; @@ -47,14 +48,15 @@ .button { justify-content: flex-end; - color: #D73A49; + color: #d73a49; font-size: 14px; } } &__input { @extend %input-2; - margin-top: .25rem; + + margin-top: 0.25rem; &--address { font-size: 0.875rem; @@ -75,17 +77,19 @@ flex-flow: column nowrap; padding: 1.5rem 1.5rem 0 1.5rem; - &__label, &__label--capitalized { - font-size: .75rem; + &__label, + &__label--capitalized { + font-size: 0.75rem; color: $Grey-500; - margin-bottom: .25rem; + margin-bottom: 0.25rem; } &__label--capitalized { text-transform: capitalize; } - &__value, &__static-address { + &__value, + &__static-address { display: flex; flex-flow: row nowrap; font-size: 1.125rem; @@ -108,6 +112,7 @@ &__static-address { font-size: 0.875rem; + &--copy-icon { cursor: pointer; @@ -136,7 +141,6 @@ > div { padding-top: 0; } - } .page-container__footer { @@ -179,7 +183,7 @@ font-weight: normal; font-size: 18px; line-height: 25px; - color: #000000; + color: #000; } &__content { @@ -193,14 +197,14 @@ font-weight: normal; font-size: 14px; line-height: 20px; - color: #6A737D; + color: #6a737d; } &__caret { display: block; background-image: url(/images/caret-right.svg); width: 30px; - opacity: .5; + opacity: 0.5; background-repeat: no-repeat; [dir='rtl'] & { @@ -223,10 +227,10 @@ align-items: center; border-radius: 50%; border-width: 2px; - background: #037DD6; + background: #037dd6; margin-right: 5px; cursor: pointer; - box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.25); + box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); } } @@ -238,6 +242,6 @@ flex: 0.4 1 40%; @media screen and (max-width: 576px) { - flex: 1 + flex: 1; } } diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index f12117599..5cf2d4a88 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -1,11 +1,7 @@ @import 'info-tab/index'; - @import 'alerts-tab/alerts-tab'; - @import 'networks-tab/index'; - @import 'settings-tab/index'; - @import 'contact-list-tab/index'; .settings-page { @@ -27,7 +23,8 @@ } } - &__subheader, &__subheader--link { + &__subheader, + &__subheader--link { padding: 16px 4px; font-size: 20px; border-bottom: 1px solid $alto; @@ -49,7 +46,7 @@ &__subheader--link:hover { cursor: pointer; - color: #037DD6; + color: #037dd6; } &__subheader--break { @@ -59,7 +56,7 @@ &__sub-header { height: 72px; - border-bottom: 1px solid #D8D8D8; + border-bottom: 1px solid #d8d8d8; display: flex; justify-content: space-between; align-items: center; @@ -92,7 +89,7 @@ background-image: url('/images/caret-left-black.svg'); width: 18px; height: 18px; - opacity: .5; + opacity: 0.5; background-size: contain; background-repeat: no-repeat; background-position: center; @@ -117,7 +114,7 @@ flex-flow: row nowrap; height: 100%; overflow: auto; - border-top: 1px solid #D8D8D8; + border-top: 1px solid #d8d8d8; &__tabs { display: flex; @@ -181,7 +178,7 @@ &--disabled { cursor: not-allowed; - opacity: .5; + opacity: 0.5; } } @@ -211,7 +208,7 @@ } &__button-group { - display:flex; + display: flex; margin-left: auto; } @@ -219,7 +216,6 @@ font-size: 1rem; line-height: 1.1875rem; padding: 0; - } &__address-book-button + &__address-book-button { @@ -247,6 +243,7 @@ .toggle-button { /*rtl:ignore*/ direction: ltr; + [dir='rtl'] & { justify-content: flex-end; } diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss index 5780be17f..92504f641 100644 --- a/ui/app/pages/settings/networks-tab/index.scss +++ b/ui/app/pages/settings/networks-tab/index.scss @@ -7,7 +7,7 @@ justify-content: space-between; @media screen and (max-width: 575px) { - margin-top: 0px; + margin-top: 0; } } @@ -30,7 +30,7 @@ background-image: url('/images/caret-left-black.svg'); width: 18px; height: 18px; - opacity: .5; + opacity: 0.5; background-size: contain; background-repeat: no-repeat; background-position: center; @@ -61,7 +61,7 @@ } footer { - padding: 10px 0px; + padding: 10px 0; } } @@ -84,8 +84,8 @@ } &--warning { - background-color: #FEFAE8; - border: 1px solid #FFD33D; + background-color: #fefae8; + border: 1px solid #ffd33d; width: 93%; border-radius: 5px; box-sizing: border-box; @@ -101,7 +101,7 @@ font-weight: normal; font-size: 14px; line-height: 20px; - color: #000000; + color: #000; } &__networks-list { @@ -124,7 +124,7 @@ padding-bottom: 23px; justify-content: center; align-items: center; - border-top: 1px solid #D8D8D8; + border-top: 1px solid #d8d8d8; .button { width: 178px; @@ -154,7 +154,7 @@ &__networks-list-item { display: flex; - padding: 13px 0px 13px 17px; + padding: 13px 0 13px 17px; position: relative; .menu-icon-circle { @@ -165,7 +165,7 @@ @media screen and (max-width: 575px) { padding: 20px 23px 21px 17px; - border-bottom: 1px solid #D8D8D8; + border-bottom: 1px solid #d8d8d8; } } @@ -182,7 +182,7 @@ font-weight: normal; font-size: 16px; line-height: 23px; - color: #6A737D; + color: #6a737d; &:hover { cursor: pointer; @@ -214,7 +214,7 @@ &__networks-list-name--selected { font-weight: bold; - color: #000000; + color: #000; } } @@ -222,14 +222,14 @@ &__footer { display: flex; flex-flow: row nowrap; - margin: .75rem 0; + margin: 0.75rem 0; .btn-default { - margin-right: .375rem; + margin-right: 0.375rem; } .btn-secondary { - margin-left: .375rem; + margin-left: 0.375rem; } .btn-danger { diff --git a/ui/app/pages/settings/settings-tab/index.scss b/ui/app/pages/settings/settings-tab/index.scss index c1750af2c..5d9864984 100644 --- a/ui/app/pages/settings/settings-tab/index.scss +++ b/ui/app/pages/settings/settings-tab/index.scss @@ -7,6 +7,7 @@ &__advanced-link { @extend %small-link; + padding-left: 5px; }