Change the chart colours to the accent colour. (#97002)

Automattic · Dec 3, 2024 · 34720fc · 34720fc
1 parent 373fbb0
commit 34720fc
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/...mote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx b/...mote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx
@@ -27,10 +27,10 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => {
 	const [ width, setWidth ] = useState( DEFAULT_DIMENSIONS.width );
 	const hourly = resolution === ChartResolution.Hour;
 
-	const primaryColor = getComputedStyle( document.body )
-		.getPropertyValue( '--color-primary' )
+	const accentColour = getComputedStyle( document.body )
+		.getPropertyValue( '--color-accent' )
 		.trim();
-	const primaryRGB = hexToRgb( primaryColor );
+	const primaryRGB = hexToRgb( accentColour );
 
 	const updateWidth = () => {
 		const wrapperElement = document.querySelector(
@@ -124,7 +124,7 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => {
 				},
 				{
 					label: _.capitalize( source ),
-					stroke: primaryColor,
+					stroke: accentColour,
 					width: 3,
 					fill: ( self: uPlot ) => {
 						const { r, g, b } = primaryRGB;
@@ -162,7 +162,7 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => {
 				},
 			],
 		};
-	}, [ width, source, primaryColor, formatDate, hourly, primaryRGB ] );
+	}, [ width, source, accentColour, formatDate, hourly, primaryRGB ] );
 
 	return (
 		<div style={ { position: 'relative' } }>

diff --git a/client/my-sites/promote-post-i2/components/location-charts/style.scss b/client/my-sites/promote-post-i2/components/location-charts/style.scss
@@ -34,7 +34,7 @@
 
 		&__progress-bar-filled {
 			height: 100%;
-			background-color: var(--color-primary);
+			background-color: var(--color-accent);
 			border-radius: 4px;
 		}
 
@@ -46,7 +46,7 @@
 		}
 
 		&__show-more-button {
-			color: var(--color-primary);
+			color: var(--color-accent);
 			font-weight: 500;
 			text-align: center;
 			margin-top: 12px;