From 8396b27128d9a390394e9204e150984fe491be54 Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Thu, 31 Oct 2024 01:51:11 +0300 Subject: [PATCH] Introducing consistency in colors for deposits across pages (#8382) Co-authored-by: Jessy Pappachan <32092402+jessy-p@users.noreply.github.com> Co-authored-by: Shendy <73803630+shendy-a8c@users.noreply.github.com> Co-authored-by: Rua Haszard Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Co-authored-by: Nagesh Pai --- changelog/fix-7761-align-deposit-colors | 4 ++++ .../components/deposit-status-chip/index.tsx | 4 ++-- client/deposits/details/style.scss | 24 ++++++++++++------- 3 files changed, 21 insertions(+), 11 deletions(-) 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 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', }; /** diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss index b05e381fde0..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: $studio-green-50; - border-color: $studio-green-5; + 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: $studio-yellow-30; - border-color: $studio-yellow-5; + background: $wp-blue-30; + border-color: $wp-blue-5; } &.is-failed { - background: $studio-red-50; - border-color: $studio-red-5; + background: $wp-red-50; + border-color: $wp-red-10; } } @@ -34,11 +40,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 {