Make camera and video icon the same colour as the caption

Author: ioannakok

dotcom-rendering/src/components/Caption.tsx

@@ -35,6 +35,7 @@ type Props = {
 
 type IconProps = {
 	format: ArticleFormat;
+	isMainMedia?: boolean;
 };
 
 const captionStyle = (isMainMedia: boolean) => css`
@@ -169,8 +170,10 @@ const hideIconBelowLeftCol = css`
 const pictureRatio = (13 / 18) * 100;
 const videoRatio = (23 / 36) * 100;
 
-const iconStyle = css`
-	fill: ${palette('--caption-text')};
+const iconStyle = (isMainMedia?: boolean) => css`
+	fill: ${isMainMedia
+		? palette('--caption-main-media-text')
+		: palette('--caption-text')};
 	margin-right: ${space[1]}px;
 	display: inline-block;
 	position: relative;
@@ -248,11 +251,11 @@ const galleryStyles = css`
 	}
 `;
 
-const CameraIcon = ({ format }: IconProps) => {
+const CameraIcon = ({ format, isMainMedia }: IconProps) => {
 	return (
 		<span
 			css={[
-				iconStyle,
+				iconStyle(isMainMedia),
 				format.display === ArticleDisplay.Immersive &&
 					hideIconBelowLeftCol,
 			]}
@@ -262,11 +265,11 @@ const CameraIcon = ({ format }: IconProps) => {
 	);
 };
 
-const VideoIcon = ({ format }: IconProps) => {
+const VideoIcon = ({ format, isMainMedia }: IconProps) => {
 	return (
 		<span
 			css={[
-				iconStyle,
+				iconStyle(isMainMedia),
 				format.display === ArticleDisplay.Immersive &&
 					hideIconBelowLeftCol,
 				videoIconStyle,
@@ -320,9 +323,9 @@ export const Caption = ({
 			data-spacefinder-role="inline"
 		>
 			{mediaType === 'YoutubeVideo' || mediaType === 'SelfHostedVideo' ? (
-				<VideoIcon format={format} />
+				<VideoIcon format={format} isMainMedia={isMainMedia} />
 			) : (
-				<CameraIcon format={format} />
+				<CameraIcon format={format} isMainMedia={isMainMedia} />
 			)}
 			{!!captionText && (
 				<span