Help Center: Refactor Help Center styles to use blueberry blue for co…

…nsistency (#97979)
Automattic · Jan 6, 2025 · 264b8a1 · 264b8a1
1 parent c408977
commit 264b8a1
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {