Add additional styling

guardian · May 1, 2024 · 81b564c · 81b564c
1 parent e662b21
commit 81b564c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git 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
@@ -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;
+`;