Introducing consistency in colors for deposits across pages (#8382)

Co-authored-by: Jessy Pappachan <[email protected]> Co-authored-by: Shendy <[email protected]> Co-authored-by: Rua Haszard <[email protected]> Co-authored-by: Eric Jinks <[email protected]> Co-authored-by: Nagesh Pai <[email protected]>
Automattic · Oct 30, 2024 · 8396b27 · 8396b27
1 parent e1adde6
commit 8396b27
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/changelog/fix-7761-align-deposit-colors 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
@@ -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
@@ -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 {