From f246955b621a15bb974a60bbf0806db6f3f16e9b Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Thu, 14 Mar 2024 18:30:23 +0530 Subject: [PATCH 1/6] Introducing consistency in deposits across pages --- client/deposits/details/index.tsx | 2 +- client/deposits/details/style.scss | 28 ++++++++++++++++++++-------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 87e46859cfe..f2b3ed9d72c 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -114,7 +114,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { true // TODO Change call to gmdateI18n and remove this deprecated param once WP 5.4 support ends. ) } - value={ } + value={ } detail={ deposit.bankAccount } /> ); diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss index b05e381fde0..71c8c7b6900 100644 --- a/client/deposits/details/style.scss +++ b/client/deposits/details/style.scss @@ -8,17 +8,19 @@ height: 0.85em; &.is-paid { - background: $studio-green-50; - border-color: $studio-green-5; + background: $wp-green-70; + border-color: $wp-green-0; } + &.is-pending, &.is-in_transit { - background: $studio-yellow-30; - border-color: $studio-yellow-5; + background: $wp-yellow-70; + border-color: $wp-yellow-0; } + &.is-failed { - background: $studio-red-50; - border-color: $studio-red-5; + background: $wp-red-70; + border-color: $wp-red-0; } } @@ -27,6 +29,7 @@ font-size: 14px; line-height: 20px; } + .woocommerce-summary__item-value { font-size: 20px; line-height: 28px; @@ -34,11 +37,11 @@ } .wcpay-deposit-fee { - color: $studio-red-50; + color: $wp-red-70; } .wcpay-deposit-net { - color: $studio-green-30; + color: $wp-green-70; } .wcpay-deposit-automatic ul { @@ -50,6 +53,7 @@ border-bottom: 0; background-color: inherit; color: inherit; + .woocommerce-summary__item-label:hover { color: inherit; } @@ -75,31 +79,39 @@ .woocommerce-summary__item-label { margin-bottom: 12px; } + .woocommerce-summary__item-data { margin-top: 0; margin-bottom: 8px; } + .wcpay-summary__item-detail { color: $dark-gray-500; } + /* Hide unused SummaryNumber fields */ .woocommerce-summary__item-prev-value, .woocommerce-summary__item-delta { display: none; } + .woocommerce-summary__item { background: $studio-white; + &:hover .woocommerce-summary__item-label { color: $gray-700; } } + a.woocommerce-summary__item { &:hover { background-color: $studio-gray-0; + &:hover .woocommerce-summary__item-label { color: var( --wp-admin-theme-color ); } } + &:active { background-color: $studio-gray-5; } From 2593bcb4bc3ccda4c6195851be1be49000c9eb83 Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Thu, 14 Mar 2024 18:36:27 +0530 Subject: [PATCH 2/6] removed unwanted changes --- client/deposits/details/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index f2b3ed9d72c..87e46859cfe 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -114,7 +114,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { true // TODO Change call to gmdateI18n and remove this deprecated param once WP 5.4 support ends. ) } - value={ } + value={ } detail={ deposit.bankAccount } /> ); From ed43d85d34dde14a3c087bc2e7c2fc0a9216b657 Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Thu, 14 Mar 2024 18:38:04 +0530 Subject: [PATCH 3/6] added changelog --- changelog/fix-7761-align-deposit-colors | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-7761-align-deposit-colors diff --git a/changelog/fix-7761-align-deposit-colors b/changelog/fix-7761-align-deposit-colors new file mode 100644 index 00000000000..b9ae9ac792c --- /dev/null +++ b/changelog/fix-7761-align-deposit-colors @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Introducing consistency in colors for deposits across pages From a47287206618d6d95040ac3ca5de395a20f7299e Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Wed, 30 Oct 2024 08:09:05 +1100 Subject: [PATCH 4/6] Remove whitespace changes to keep PR changes focused --- client/deposits/details/style.scss | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss index 71c8c7b6900..58a4935ce3c 100644 --- a/client/deposits/details/style.scss +++ b/client/deposits/details/style.scss @@ -11,13 +11,11 @@ background: $wp-green-70; border-color: $wp-green-0; } - &.is-pending, &.is-in_transit { background: $wp-yellow-70; border-color: $wp-yellow-0; } - &.is-failed { background: $wp-red-70; border-color: $wp-red-0; @@ -29,7 +27,6 @@ font-size: 14px; line-height: 20px; } - .woocommerce-summary__item-value { font-size: 20px; line-height: 28px; @@ -53,7 +50,6 @@ border-bottom: 0; background-color: inherit; color: inherit; - .woocommerce-summary__item-label:hover { color: inherit; } @@ -79,39 +75,31 @@ .woocommerce-summary__item-label { margin-bottom: 12px; } - .woocommerce-summary__item-data { margin-top: 0; margin-bottom: 8px; } - .wcpay-summary__item-detail { color: $dark-gray-500; } - /* Hide unused SummaryNumber fields */ .woocommerce-summary__item-prev-value, .woocommerce-summary__item-delta { display: none; } - .woocommerce-summary__item { background: $studio-white; - &:hover .woocommerce-summary__item-label { color: $gray-700; } } - a.woocommerce-summary__item { &:hover { background-color: $studio-gray-0; - &:hover .woocommerce-summary__item-label { color: var( --wp-admin-theme-color ); } } - &:active { background-color: $studio-gray-5; } From cf2d2894cff9d2dab96aa2da1a3bd6199c9cd662 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Wed, 30 Oct 2024 08:28:20 +1100 Subject: [PATCH 5/6] Update colors to match design --- client/deposits/details/style.scss | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss index 58a4935ce3c..0031184d4cf 100644 --- a/client/deposits/details/style.scss +++ b/client/deposits/details/style.scss @@ -1,24 +1,30 @@ .wcpay-deposit-overview { .woocommerce-order-status { margin-bottom: 4px; + white-space: nowrap; } .woocommerce-order-status__indicator { width: 0.85em; height: 0.85em; + // is-canceled uses the default gray color. + &.is-paid { - background: $wp-green-70; - border-color: $wp-green-0; + background: $wp-green-30; + border-color: $wp-green-5; + } + &.is-pending { + background: $wp-yellow-20; + border-color: $wp-yellow-5; } - &.is-pending, &.is-in_transit { - background: $wp-yellow-70; - border-color: $wp-yellow-0; + background: $wp-blue-30; + border-color: $wp-blue-5; } &.is-failed { - background: $wp-red-70; - border-color: $wp-red-0; + background: $wp-red-50; + border-color: $wp-red-10; } } From c8352f4cbfa680f2983823c503c806306c92f1ac Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Wed, 30 Oct 2024 08:48:02 +1100 Subject: [PATCH 6/6] Update deposit status chip colors to match design --- client/components/deposit-status-chip/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/deposit-status-chip/index.tsx b/client/components/deposit-status-chip/index.tsx index f6b456d2f24..9d70fdfbe7a 100644 --- a/client/components/deposit-status-chip/index.tsx +++ b/client/components/deposit-status-chip/index.tsx @@ -15,10 +15,10 @@ import type { DepositStatus } from 'wcpay/types/deposits'; */ const mappings: Record< DepositStatus, ChipType > = { pending: 'warning', - in_transit: 'success', + in_transit: 'primary', paid: 'success', failed: 'alert', - canceled: 'alert', + canceled: 'light', }; /**