improving css

Author: oliverabrahams

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -19,7 +19,7 @@ export type ProductCarouselCardProps = {
 	format: ArticleFormat;
 };
 
-const productCarouselCardHeading = css`
+const headingFont = css`
 	${headlineBold20};
 	color: ${palette('--product-card-headline')};
 `;
@@ -31,7 +31,7 @@ const productCardRowFour = css`
 	grid-row: 4;
 `;
 
-const brandAndProductName = css`
+const brandNameFont = css`
 	${headlineMedium17};
 `;
 
@@ -44,7 +44,7 @@ const readMoreCta = css`
 	padding-bottom: ${space[2]}px;
 `;
 
-const priceStyle = css`
+const price = css`
 	${textSansBold17};
 	padding-top: ${space[1]}px;
 	padding-bottom: ${space[2]}px;
@@ -66,15 +66,15 @@ const imageArea = css`
 	}
 `;
 
-const brandAndProductNameRow = css`
-	line-height: 1.3;
+const readMoreArea = css`
+	grid-row: 2;
 `;
-
-const brandAndProductNameInline = css`
+const brandAndProductNameFont = css`
 	${headlineMedium17};
+	line-height: 1.3;
 `;
 
-const productNameStyle = css`
+const productNameFont = css`
 	${textSans17};
 `;
 
@@ -91,46 +91,44 @@ export const ProductCarouselCard = ({
 				{hasHeading && (
 					<>
 						<div
-							css={productCarouselCardHeading}
+							css={headingFont}
 							dangerouslySetInnerHTML={{
 								__html: product.primaryHeadingHtml,
 							}}
 						/>
-						<div css={brandAndProductNameRow}>
-							<span css={brandAndProductNameInline}>
-								{product.brandName}{' '}
-							</span>
-							<span css={brandAndProductNameInline}>
-								{product.productName}
-							</span>
+						<div css={brandAndProductNameFont}>
+							{`${product.brandName} ${product.productName}`}
 						</div>
 					</>
 				)}
 			</div>
-			{!isUndefined(h2Id) &&
-				product.displayType !== 'ProductCardOnly' && (
-					<a
-						href={`#${h2Id}`}
-						onFocus={(event) => event.stopPropagation()}
-						css={readMoreCta}
-					>
-						Read more
-					</a>
-				)}
+			<div css={readMoreArea}>
+				{!isUndefined(h2Id) &&
+					hasHeading &&
+					product.displayType !== 'ProductCardOnly' && (
+						<a
+							href={`#${h2Id}`}
+							onFocus={(event) => event.stopPropagation()}
+							css={readMoreCta}
+						>
+							Read more
+						</a>
+					)}
+			</div>
 			<div css={imageArea}>
 				<ProductCardImage format={format} image={product.image} />
 			</div>
 			<div css={productCardRowFour}>
 				{!hasHeading && (
 					<div>
-						<div css={brandAndProductName}>{product.brandName}</div>
-						<div css={productNameStyle}>{product.productName}</div>
+						<div css={brandNameFont}>{product.brandName}</div>
+						<div css={productNameFont}>{product.productName}</div>
 					</div>
 				)}
 
 				{firstCta && (
 					<>
-						<div css={priceStyle}>{firstCta.price}</div>
+						<div css={price}>{firstCta.price}</div>
 						<div css={buttonWrapper}>
 							<ProductLinkButton
 								label={`Buy at ${firstCta.retailer}`}