From 264b8a110b6ebbcc2f509611cce954701eb9fa3e Mon Sep 17 00:00:00 2001
From: Anthony Grullon <anthony.grullon@automattic.com>
Date: Mon, 6 Jan 2025 18:44:25 +0700
Subject: [PATCH] Help Center: Refactor Help Center styles to use blueberry
 blue for consistency (#97979)

---
 .../help-center/src/components/help-center-chat.scss |  2 +-
 .../src/components/help-center-header.scss           |  4 ++--
 .../src/components/help-center-search.scss           |  6 ++++++
 .../components/help-center-support-chat-message.scss |  8 +++++---
 packages/help-center/src/styles.scss                 | 12 +++++++++---
 .../src/components/message/style_redesign.scss       |  4 ++--
 packages/odie-client/src/style.scss                  |  6 ++++++
 7 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/packages/help-center/src/components/help-center-chat.scss b/packages/help-center/src/components/help-center-chat.scss
index b38096607f283..aa1f407177e0a 100644
--- a/packages/help-center/src/components/help-center-chat.scss
+++ b/packages/help-center/src/components/help-center-chat.scss
@@ -44,7 +44,7 @@
 			button {
 				padding: 7px;
 				&:focus {
-					outline: 2px solid #3858e9;
+					outline: 2px solid $help-center-blue;
 					outline-offset: 1px;
 				}
 			}
diff --git a/packages/help-center/src/components/help-center-header.scss b/packages/help-center/src/components/help-center-header.scss
index 8074e3c5e2806..7c14d83a3ec79 100644
--- a/packages/help-center/src/components/help-center-header.scss
+++ b/packages/help-center/src/components/help-center-header.scss
@@ -14,7 +14,7 @@
 		padding: 16px;
 
 		&.has-unread {
-			background: #3858E9;
+			background: $help-center-blue;
 			color: var(--studio-white);
 			border-radius: 0;
 
@@ -80,7 +80,7 @@
 				background: var(--studio-white);
 				border-radius: 45%;
 				font-size: $font-body-extra-small;
-				color: #3858E9;
+				color: $help-center-blue;
 			}
 		}
 
diff --git a/packages/help-center/src/components/help-center-search.scss b/packages/help-center/src/components/help-center-search.scss
index 89ebc61c13141..fb73105e9bd09 100644
--- a/packages/help-center/src/components/help-center-search.scss
+++ b/packages/help-center/src/components/help-center-search.scss
@@ -24,6 +24,12 @@
 				min-height: 40px;
 			}
 
+			.search__icon-navigation {
+				&:focus {
+					box-shadow: 0 0 0 3px $help-center-blue;
+				}
+			}
+
 			&.has-focus {
 				outline: $help-center-blue solid 2px;
 				transition: none;
diff --git a/packages/help-center/src/components/help-center-support-chat-message.scss b/packages/help-center/src/components/help-center-support-chat-message.scss
index 446c6a5112e81..6c8f9f3b65b4d 100644
--- a/packages/help-center/src/components/help-center-support-chat-message.scss
+++ b/packages/help-center/src/components/help-center-support-chat-message.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 .help-center-support-chat__conversation-container {
 	display: flex;
 	flex-direction: row;
@@ -17,14 +19,14 @@
 		border-color: rgba(0, 0, 0, 0.2) !important;
 
 		.help-center-support-chat__open-conversation {
-			fill: var(--color-primary);
+			fill: $help-center-blue;
 		}
 	}
 
 	&.is-unread-message {
 		background-color: #EBF2FC;
 		.help-center-support-chat__open-conversation {
-			fill: var(--color-primary);
+			fill: $help-center-blue;
 		}
 	}
 
@@ -59,7 +61,7 @@
 			min-width: 26px;
 			height: 20px;
 			font-size: 12px; /* stylelint-disable-line declaration-property-unit-allowed-list */
-			background-color: #3858E9;
+			background-color: $help-center-blue;
 			color: #FFF;
 		}
 	}
diff --git a/packages/help-center/src/styles.scss b/packages/help-center/src/styles.scss
index b25df142ac235..0d0f9aef40810 100644
--- a/packages/help-center/src/styles.scss
+++ b/packages/help-center/src/styles.scss
@@ -84,12 +84,12 @@
 		height: 100%;
 
 		.spinner__outer {
-			border-top-color: var(--wp-admin-theme-color);
+			border-top-color: $help-center-blue;
 		}
 
 		.spinner__inner {
-			border-top-color: var(--wp-admin-theme-color);
-			border-right-color: var(--wp-admin-theme-color);
+			border-top-color: $help-center-blue;
+			border-right-color: $help-center-blue;
 		}
 	}
 
@@ -178,6 +178,12 @@
 			transform: scale(1);
 		}
 	}
+
+	// Text highlight color
+	::selection {
+		background: rgba($help-center-blue, 0.7);
+		color: var(--color-text);
+	}
 }
 
 /**
diff --git a/packages/odie-client/src/components/message/style_redesign.scss b/packages/odie-client/src/components/message/style_redesign.scss
index 3016177dac8b2..e5b9e095452d4 100644
--- a/packages/odie-client/src/components/message/style_redesign.scss
+++ b/packages/odie-client/src/components/message/style_redesign.scss
@@ -400,7 +400,7 @@
 
 			.odie-feedback-component-button-liked-pressed,
 			.odie-feedback-component-button-disliked-pressed {
-				background-color: var(--color-primary);
+				background-color: $blueberry-color;
 				cursor: default;
 				pointer-events: none;
 			}
@@ -420,7 +420,7 @@
 	}
 
 	.odie-feedback-component-button-icon-pressed {
-		background-color: var(--color-primary);
+		background-color: $blueberry-color;
 		fill: var(--color-text-inverted);
 	}
 
diff --git a/packages/odie-client/src/style.scss b/packages/odie-client/src/style.scss
index c2fe95a7a8a3d..72a1d7d396e6c 100644
--- a/packages/odie-client/src/style.scss
+++ b/packages/odie-client/src/style.scss
@@ -1,3 +1,5 @@
+$blueberry-blue: #3858e9;
+
 .chatbox {
 	width: 100%;
 	height: calc(100% - 138px);
@@ -56,6 +58,10 @@
 		width: 100%;
 		justify-content: center;
 		padding: 16px 0;
+
+		.components-spinner {
+			color: $blueberry-blue;
+		}
 	}
 
 	.odie-chat__date {