Add camera and video icon to galleries 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 = (format: ArticleFormat, isMainMedia: boolean) => css`
+	fill: ${format.design === ArticleDesign.Gallery && isMainMedia
+		? palette('--caption-main-media-text')
+		: palette('--caption-text')};
 	margin-right: ${space[1]}px;
 	display: inline-block;
 	position: relative;
@@ -236,13 +239,12 @@ const galleryStyles = css`
 	}
 `;
 
-const CameraIcon = ({ format }: IconProps) => {
+const CameraIcon = ({ format, isMainMedia }: IconProps) => {
 	return (
 		<span
 			css={[
-				iconStyle,
-				(format.display === ArticleDisplay.Immersive ||
-					format.design === ArticleDesign.Gallery) &&
+				iconStyle(format, isMainMedia),
+				format.display === ArticleDisplay.Immersive &&
 					hideIconBelowLeftCol,
 			]}
 		>
@@ -251,11 +253,11 @@ const CameraIcon = ({ format }: IconProps) => {
 	);
 };
 
-const VideoIcon = ({ format }: IconProps) => {
+const VideoIcon = ({ format, isMainMedia }: IconProps) => {
 	return (
 		<span
 			css={[
-				iconStyle,
+				iconStyle(format, isMainMedia),
 				format.display === ArticleDisplay.Immersive &&
 					hideIconBelowLeftCol,
 				videoIconStyle,
@@ -307,9 +309,9 @@ export const Caption = ({
 			data-spacefinder-role="inline"
 		>
 			{mediaType === 'Video' ? (
-				<VideoIcon format={format} />
+				<VideoIcon format={format} isMainMedia={isMainMedia} />
 			) : (
-				<CameraIcon format={format} />
+				<CameraIcon format={format} isMainMedia={isMainMedia} />
 			)}
 			{!!captionText && (
 				<span