From 81b564c59d82903bac800dbd2071d1afb233dc78 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Wed, 1 May 2024 12:21:19 +0100
Subject: [PATCH] Add additional styling

---
 .../src/components/card/recipe/RecipeCard.tsx | 39 ++++++++++++-------
 .../src/components/feed/ContentInfo.tsx       |  8 ++++
 2 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 fronts-client/src/components/feed/ContentInfo.tsx

diff --git a/fronts-client/src/components/card/recipe/RecipeCard.tsx b/fronts-client/src/components/card/recipe/RecipeCard.tsx
index 63276e8c0d4..f5955b7469f 100644
--- a/fronts-client/src/components/card/recipe/RecipeCard.tsx
+++ b/fronts-client/src/components/card/recipe/RecipeCard.tsx
@@ -11,6 +11,10 @@ import { connect } from 'react-redux';
 import { State } from 'types/State';
 import { selectors as recipeSelectors } from 'bundles/recipesBundle';
 import { Recipe } from 'types/Recipe';
+import CardBody from '../CardBody';
+import CardMetaContainer from '../CardMetaContainer';
+import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper';
+import { ThumbnailSmall } from 'components/image/Thumbnail';
 
 interface ContainerProps {
   onDragStart?: (d: React.DragEvent<HTMLElement>) => void;
@@ -51,21 +55,28 @@ const RecipeCardComponent = ({
 }: RecipeProps) => {
   return (
     <CardContainer {...rest}>
-      <CardContent textSize={textSize}>
-        <CardSettingsDisplay
-          isBreaking={card.meta?.isBreaking}
-          showByline={card.meta?.showByline}
-          showQuotedHeadline={card.meta?.showQuotedHeadline}
-          showLargeHeadline={card.meta?.showLargeHeadline}
-          isBoosted={card.meta?.isBoosted}
-        />
-        <CardHeadingContainer size={size}>
+      <CardBody data-testid="snap" size={size} fade={fade}>
+        <CardMetaContainer size={size}>
           <CardMetaHeading>Recipe</CardMetaHeading>
-          <CardHeading data-testid="headline" html>
-            {recipe.title}
-          </CardHeading>
-        </CardHeadingContainer>
-      </CardContent>
+        </CardMetaContainer>
+        <CardContent textSize={textSize}>
+          <CardSettingsDisplay
+            isBreaking={card.meta?.isBreaking}
+            showByline={card.meta?.showByline}
+            showQuotedHeadline={card.meta?.showQuotedHeadline}
+            showLargeHeadline={card.meta?.showLargeHeadline}
+            isBoosted={card.meta?.isBoosted}
+          />
+          <CardHeadingContainer size={size}>
+            <CardHeading data-testid="headline" html>
+              {recipe.title}
+            </CardHeading>
+          </CardHeadingContainer>
+        </CardContent>
+        <ImageAndGraphWrapper size={size}>
+          <ThumbnailSmall url={recipe.featuredImage.url} />
+        </ImageAndGraphWrapper>
+      </CardBody>
     </CardContainer>
   );
 };
diff --git a/fronts-client/src/components/feed/ContentInfo.tsx b/fronts-client/src/components/feed/ContentInfo.tsx
new file mode 100644
index 00000000000..88e021191d5
--- /dev/null
+++ b/fronts-client/src/components/feed/ContentInfo.tsx
@@ -0,0 +1,8 @@
+import { styled } from 'constants/theme';
+
+export const ContentInfo = styled.div`
+  padding-top: 2px;
+  font-size: 12px;
+  font-family: TS3TextSans;
+  font-weight: bold;
+`;