Only update avatar for web

guardian · Nov 21, 2024 · 777525c · 777525c
1 parent a83bb9e
commit 777525c
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 3 deletions.
diff --git a/dotcom-rendering/src/components/Avatar.tsx b/dotcom-rendering/src/components/Avatar.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { Fragment } from 'react';
 import { getSourceImageUrl } from '../lib/getSourceImageUrl_temp_fix';
 import { palette } from '../palette';
+import { useConfig } from './ConfigContext';
 import { generateSources, getFallbackSource } from './Picture';
 
 const picture = css`
@@ -68,10 +69,22 @@ export const Avatar = ({ src, alt, shape = 'round' }: Props) => {
 	 */
 	const fallbackSource = getFallbackSource(sources);
 
+	const { renderingTarget } = useConfig();
+	const isApps = renderingTarget === 'Apps';
 	return (
 		<picture
 			// data-size={imageSize}
-			css={[block, picture, shape === 'round' && round]}
+			css={[
+				block,
+				picture,
+				shape === 'round' && round,
+				isApps &&
+					css`
+						background-color: ${palette(
+							'--avatar-background-colour',
+						)};
+					`,
+			]}
 		>
 			{sources.map((source) => {
 				return (

diff --git a/dotcom-rendering/src/components/HeadlineByline.tsx b/dotcom-rendering/src/components/HeadlineByline.tsx
@@ -160,11 +160,11 @@ type Props = {
 };
 
 export const HeadlineByline = ({ format, byline, tags }: Props) => {
+	const { renderingTarget } = useConfig();
 	if (byline === '') {
 		return null;
 	}
 	/** This is required for a staggered design release between web and app. This will be removed changes are ready for release on ios/android   */
-	const { renderingTarget } = useConfig();
 	const isApps = renderingTarget === 'Apps';
 
 	const hasSingleContributor = !!getSoleContributor(tags, byline);

diff --git a/dotcom-rendering/src/components/LiveBlockContainer.tsx b/dotcom-rendering/src/components/LiveBlockContainer.tsx
@@ -7,6 +7,7 @@ import {
 	space,
 } from '@guardian/source/foundations';
 import { palette } from '../palette';
+import { useConfig } from './ConfigContext';
 import { FirstPublished } from './FirstPublished';
 
 type BlockContributor = {
@@ -67,6 +68,8 @@ const BlockByline = ({
 	name: string;
 	imageUrl?: string;
 }) => {
+	const { renderingTarget } = useConfig();
+	const isApps = renderingTarget === 'Apps';
 	return (
 		<div
 			css={css`
@@ -91,7 +94,9 @@ const BlockByline = ({
 							width: 100%;
 							height: 100%;
 							object-fit: cover;
-							background-color: ${palette('--avatar-background')};
+							background-color: ${isApps
+								? palette('--avatar-background-colour')
+								: palette('--avatar-background')};
 						`}
 					/>
 				</div>

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -1177,6 +1177,87 @@ const avatarLight: PaletteFunction = () => sourcePalette.neutral[93];
 
 const avatarDark: PaletteFunction = () => sourcePalette.neutral[93];
 
+const avatarColourLight: PaletteFunction = ({ design, theme }) => {
+	switch (design) {
+		case ArticleDesign.Standard:
+		case ArticleDesign.Review:
+		case ArticleDesign.Explainer:
+		case ArticleDesign.Feature:
+		case ArticleDesign.Interview:
+		case ArticleDesign.Interactive:
+		case ArticleDesign.PhotoEssay:
+		case ArticleDesign.FullPageInteractive:
+		case ArticleDesign.NewsletterSignup:
+		case ArticleDesign.Comment:
+		case ArticleDesign.Letter:
+		case ArticleDesign.Editorial:
+		case ArticleDesign.Analysis:
+			switch (theme) {
+				case ArticleSpecial.SpecialReport:
+					return sourcePalette.specialReport[800];
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.specialReportAlt[300];
+				case ArticleSpecial.Labs:
+					return sourcePalette.labs[400];
+				case Pillar.Opinion:
+					return sourcePalette.opinion[300];
+				case Pillar.Culture:
+					return sourcePalette.culture[500];
+				case Pillar.Lifestyle:
+					return sourcePalette.lifestyle[500];
+				case Pillar.Sport:
+					return sourcePalette.sport[500];
+				case Pillar.News:
+					return sourcePalette.news[500];
+			}
+		default:
+			switch (theme) {
+				case ArticleSpecial.SpecialReport:
+					return sourcePalette.specialReport[800];
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.news[500];
+				case ArticleSpecial.Labs:
+					return sourcePalette.labs[400];
+				case Pillar.Opinion:
+					return sourcePalette.opinion[300];
+				case Pillar.Culture:
+					return sourcePalette.culture[500];
+				case Pillar.Lifestyle:
+					return sourcePalette.lifestyle[500];
+				case Pillar.Sport:
+					return sourcePalette.sport[500];
+				case Pillar.News:
+					return sourcePalette.news[500];
+			}
+	}
+};
+
+const avatarColourDark: PaletteFunction = ({ design, theme }) => {
+	switch (design) {
+		case ArticleDesign.Standard:
+		case ArticleDesign.Review:
+		case ArticleDesign.Explainer:
+		case ArticleDesign.Feature:
+		case ArticleDesign.Interview:
+		case ArticleDesign.Interactive:
+		case ArticleDesign.PhotoEssay:
+		case ArticleDesign.FullPageInteractive:
+		case ArticleDesign.NewsletterSignup:
+		case ArticleDesign.Comment:
+		case ArticleDesign.Letter:
+		case ArticleDesign.Editorial:
+		case ArticleDesign.Analysis:
+			switch (theme) {
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.neutral[46];
+				default:
+					return sourcePalette.neutral[20];
+			}
+		default:
+			return sourcePalette.neutral[20];
+	}
+};
+
 const followTextLight: PaletteFunction = ({ design }) => {
 	switch (design) {
 		case ArticleDesign.Gallery:
@@ -5944,6 +6025,10 @@ const paletteColours = {
 		light: avatarLight,
 		dark: avatarDark,
 	},
+	'--avatar-background-colour': {
+		light: avatarColourLight,
+		dark: avatarColourDark,
+	},
 	'--block-quote-fill': {
 		light: blockQuoteFillLight,
 		dark: blockQuoteFillDark,