Adjust sizing of avatars

guardian · Jan 6, 2025 · 837b5cc · 837b5cc
1 parent d19bbff
commit 837b5cc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 49 deletions.
diff --git a/dotcom-rendering/src/components/Avatar.tsx b/dotcom-rendering/src/components/Avatar.tsx
@@ -56,14 +56,8 @@ type Props = {
 };
 
 const decideImageWidths = (
-	imageSize?: ImageSizeType,
+	imageSize: ImageSizeType,
 ): [ImageWidthType, ...ImageWidthType[]] => {
-	if (!imageSize) {
-		return [
-			{ breakpoint: breakpoints.mobile, width: 75 },
-			{ breakpoint: breakpoints.tablet, width: 140 },
-		];
-	}
 	switch (imageSize) {
 		case 'small':
 			return [{ breakpoint: breakpoints.mobile, width: 80 }];
@@ -72,8 +66,7 @@ const decideImageWidths = (
 		default:
 			return [
 				{ breakpoint: breakpoints.mobile, width: 80 },
-				{ breakpoint: breakpoints.tablet, width: 85 },
-				{ breakpoint: breakpoints.desktop, width: 95 },
+				{ breakpoint: breakpoints.desktop, width: 90 },
 			];
 
 		case 'large':
@@ -92,11 +85,17 @@ const decideImageWidths = (
 	}
 };
 
+const defaultImageSizes: [ImageWidthType, ...ImageWidthType[]] = [
+	{ breakpoint: breakpoints.mobile, width: 75 },
+	{ breakpoint: breakpoints.tablet, width: 140 },
+];
+
 export const Avatar = ({ src, alt, shape = 'round', imageSize }: Props) => {
-	const sources = generateSources(
-		getSourceImageUrl(src),
-		decideImageWidths(imageSize),
-	);
+	const imageWidths = imageSize
+		? decideImageWidths(imageSize)
+		: defaultImageSizes;
+
+	const sources = generateSources(getSourceImageUrl(src), imageWidths);
 
 	/**
 	 * The assumption here is readers on devices that do not support srcset

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -71,17 +71,6 @@ export const BETA_CONTAINERS = [
 	'static/medium/4',
 ];
 
-export const BETA_CONTAINERS = [
-	'scrollable/highlights',
-	'flexible/special',
-	'flexible/general',
-	'scrollable/small',
-	'scrollable/medium',
-	'scrollable/feature',
-	'static/feature/2',
-	'static/medium/4',
-];
-
 export type Props = {
 	linkTo: string;
 	format: ArticleFormat;
@@ -476,8 +465,6 @@ export const Card = ({
 
 	const isSmallCard = containerType === 'scrollable/small';
 
-	const isBetaContainer = BETA_CONTAINERS.includes(containerType ?? '');
-
 	const imageFixedSizeOptions = (): ImageFixedSizeOptions => {
 		if (isSmallCard) {
 			return {

diff --git a/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx b/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx
@@ -31,27 +31,23 @@ const fairgroundSizingStyles = (
 ) => {
 	if (isVerticalOnDesktop && isVerticalOnMobile) {
 		return css`
-			width: 95px;
-			height: 95px;
-			${between.tablet.and.desktop} {
-				height: 70px;
-				width: 70px;
+			width: 90px;
+			height: 90px;
+			${until.desktop} {
+				height: 80px;
+				width: 80px;
 			}
 		`;
 	}
 
 	if (isVerticalOnDesktop && !isVerticalOnMobile) {
 		return css`
-			width: 95px;
-			height: 95px;
-			${until.desktop} {
+			width: 90px;
+			height: 90px;
+			${between.tablet.and.desktop} {
 				height: 70px;
 				width: 70px;
 			}
-			${until.tablet} {
-				height: 90px;
-				width: 90px;
-			}
 		`;
 	}
 
@@ -65,14 +61,10 @@ const fairgroundSizingStyles = (
 			return css`
 				width: 150px;
 				height: 150px;
-				${until.desktop} {
+				${between.tablet.and.desktop} {
 					height: 130px;
 					width: 130px;
 				}
-				${until.tablet} {
-					height: 150px;
-					width: 150px;
-				}
 			`;
 		case 'jumbo':
 			return css`
@@ -90,12 +82,8 @@ const fairgroundSizingStyles = (
 		case 'medium':
 		default:
 			return css`
-				width: 95px;
-				height: 95px;
-				${until.desktop} {
-					height: 85px;
-					width: 85px;
-				}
+				width: 90px;
+				height: 90px;
 				${until.tablet} {
 					height: 80px;
 					width: 80px;