From 57818fabbe0d82b9fac7284017ea2f16732c44d9 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Fri, 25 Mar 2022 16:07:47 +0100 Subject: [PATCH] Dark Mode: Remove ui colors (#14184) --- .../app/cancel-speedup-popover/index.scss | 2 +- .../app/collectible-details/index.scss | 2 +- .../app/flask/experimental-area/index.scss | 2 +- .../app/transaction-detail-item/index.scss | 6 +++--- .../ui/definition-list/definition-list.scss | 2 +- ui/css/design-system/colors.scss | 6 ------ ui/css/utilities/colors.scss | 6 ------ .../flask/snap-install/index.scss | 2 +- ui/pages/settings/flask/view-snap/index.scss | 2 +- .../loading-swap-quotes.stories.js | 21 +++++++++++++++++++ .../swaps/smart-transaction-status/index.scss | 4 ++-- 11 files changed, 32 insertions(+), 23 deletions(-) create mode 100644 ui/pages/swaps/loading-swaps-quotes/loading-swap-quotes.stories.js diff --git a/ui/components/app/cancel-speedup-popover/index.scss b/ui/components/app/cancel-speedup-popover/index.scss index 331e486eb..cd7886982 100644 --- a/ui/components/app/cancel-speedup-popover/index.scss +++ b/ui/components/app/cancel-speedup-popover/index.scss @@ -21,7 +21,7 @@ } &__separator { - border-bottom: 1px solid var(--ui-grey); + border-bottom: 1px solid var(--color-border-default); width: 100%; } } diff --git a/ui/components/app/collectible-details/index.scss b/ui/components/app/collectible-details/index.scss index e3e83ec9b..c368c63ff 100644 --- a/ui/components/app/collectible-details/index.scss +++ b/ui/components/app/collectible-details/index.scss @@ -66,7 +66,7 @@ $spacer-break-small: 16px; justify-content: center; background-color: transparent; cursor: pointer; - color: var(--ui-4); + color: var(--color-text-alternative); border: 0; &:active { diff --git a/ui/components/app/flask/experimental-area/index.scss b/ui/components/app/flask/experimental-area/index.scss index 292922755..44a348240 100644 --- a/ui/components/app/flask/experimental-area/index.scss +++ b/ui/components/app/flask/experimental-area/index.scss @@ -52,7 +52,7 @@ button { background-color: var(--flask-purple) !important; border: 0 !important; - color: var(--ui-1); + color: var(--color-primary-inverse); //@TODO: We don't have a generic inverse color, using this one for now width: 200px; } } diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss index d09c1ae46..c7a39c250 100644 --- a/ui/components/app/transaction-detail-item/index.scss +++ b/ui/components/app/transaction-detail-item/index.scss @@ -1,7 +1,7 @@ .transaction-detail-item { - color: var(--ui-4); + color: var(--color-text-alternative); padding: 20px 0; - border-bottom: 1px solid var(--ui-3); + border-bottom: 1px solid var(--color-border-default); &__row { display: flex; @@ -34,7 +34,7 @@ margin-inline-start: 4px; path { - fill: var(--ui-3); + fill: var(--color-icon-default); } } diff --git a/ui/components/ui/definition-list/definition-list.scss b/ui/components/ui/definition-list/definition-list.scss index 6443ca97e..1517d46b7 100644 --- a/ui/components/ui/definition-list/definition-list.scss +++ b/ui/components/ui/definition-list/definition-list.scss @@ -6,7 +6,7 @@ align-items: center; & i { - color: var(--ui-3); + color: var(--color-icon-default); margin-left: 6px; font-size: $font-size-h8; } diff --git a/ui/css/design-system/colors.scss b/ui/css/design-system/colors.scss index f30b4fba2..d089f25fc 100644 --- a/ui/css/design-system/colors.scss +++ b/ui/css/design-system/colors.scss @@ -51,12 +51,6 @@ $color-map: ( /** * !!! DEPRECATED DO NOT USE!!! */ - 'ui-1': --ui-1, - 'ui-2': --ui-2, - 'ui-3': --ui-3, - 'ui-4': --ui-4, - 'ui-5': --ui-5, - 'grey': --ui-grey, 'neutral-grey': --neutral-grey, 'primary-3': --primary-3, 'alert-1': --alert-1, diff --git a/ui/css/utilities/colors.scss b/ui/css/utilities/colors.scss index 039c436ef..76d65da82 100644 --- a/ui/css/utilities/colors.scss +++ b/ui/css/utilities/colors.scss @@ -4,12 +4,6 @@ --alert-1: #ffd33d; --success-1: #4cd964; --success-3: #219e37; - --ui-grey: #d6d9dc; - --ui-1: #f2f3f4; - --ui-2: #d6d9dc; - --ui-3: #bbc0c5; - --ui-4: #6a737d; - --ui-5: #c4c4c4; --mainnet: #29b6af; --ropsten: #ff4a8d; --kovan: #9064ff; diff --git a/ui/pages/permissions-connect/flask/snap-install/index.scss b/ui/pages/permissions-connect/flask/snap-install/index.scss index c754c9f04..53e525acb 100644 --- a/ui/pages/permissions-connect/flask/snap-install/index.scss +++ b/ui/pages/permissions-connect/flask/snap-install/index.scss @@ -13,7 +13,7 @@ @include H7; display: flex; - color: var(--ui-4); + color: var(--color-text-alternative); .link { color: var(--color-primary-default); diff --git a/ui/pages/settings/flask/view-snap/index.scss b/ui/pages/settings/flask/view-snap/index.scss index 172bb7114..41fc04deb 100644 --- a/ui/pages/settings/flask/view-snap/index.scss +++ b/ui/pages/settings/flask/view-snap/index.scss @@ -83,7 +83,7 @@ .connected-sites-list__content-row { border-top: none; - border-bottom: 1px solid var(--ui-2); + border-bottom: 1px solid var(--color-border-muted); &:last-child { border-bottom: none; diff --git a/ui/pages/swaps/loading-swaps-quotes/loading-swap-quotes.stories.js b/ui/pages/swaps/loading-swaps-quotes/loading-swap-quotes.stories.js new file mode 100644 index 000000000..d33eebb0c --- /dev/null +++ b/ui/pages/swaps/loading-swaps-quotes/loading-swap-quotes.stories.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; +import LoadingSwapsQuotes from './loading-swaps-quotes'; +import { storiesMetadata } from './loading-swaps-quotes-stories-metadata'; + +export default { + title: 'Pages/Swaps/LoadingSwapQuotes', + id: __filename, +}; + +export const DefaultStory = () => ( +
+
+ +
+
+); diff --git a/ui/pages/swaps/smart-transaction-status/index.scss b/ui/pages/swaps/smart-transaction-status/index.scss index d077f0d24..826289a18 100644 --- a/ui/pages/swaps/smart-transaction-status/index.scss +++ b/ui/pages/swaps/smart-transaction-status/index.scss @@ -73,8 +73,8 @@ &__swaps-footer { .btn-secondary { - color: var(--ui-4); - border: 1px solid var(--ui-4); + color: var(--color-text-alternative); + border: 1px solid var(--color-border-default); } }