From 114dae995ee7ee6135322772857d07bc7be3fadf Mon Sep 17 00:00:00 2001
From: SebiVPS <42858722+SebiVPS@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:29:09 +0100
Subject: [PATCH] Demo Site: fix teaser item style (#3091)

---
 .../pages/blocks/TeaserItemBlock.tsx          | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/demo/site/src/documents/pages/blocks/TeaserItemBlock.tsx b/demo/site/src/documents/pages/blocks/TeaserItemBlock.tsx
index a5f5a1e530..bb07977cd0 100644
--- a/demo/site/src/documents/pages/blocks/TeaserItemBlock.tsx
+++ b/demo/site/src/documents/pages/blocks/TeaserItemBlock.tsx
@@ -14,37 +14,36 @@ const descriptionRenderers: Renderers = {
 
 export const TeaserItemBlock = withPreview(
     ({ data: { media, title, description, link } }: PropsWithData<TeaserItemBlockData>) => (
-        <LinkBlock data={link.link}>
-            <ItemContent>
-                <MediaMobile>
-                    <MediaBlock data={media} aspectRatio="1x1" sizes="20vw" />
-                </MediaMobile>
-                <MediaDesktop>
-                    <MediaBlock data={media} aspectRatio="16x9" sizes="20vw" />
-                </MediaDesktop>
-                <ContentContainer>
-                    <TitleTypography variant="h350">{title}</TitleTypography>
-                    <Typography variant="p200">
-                        <RichTextBlock data={description} renderers={descriptionRenderers} />
-                    </Typography>
-                    <TextLinkContainer>
-                        <SvgUse href="/assets/icons/arrow-right.svg#arrow-right" width={16} height={16} />
-                        <LinkText>{link.text}</LinkText>
-                    </TextLinkContainer>
-                </ContentContainer>
-            </ItemContent>
-        </LinkBlock>
+        <Link data={link.link}>
+            <MediaMobile>
+                <MediaBlock data={media} aspectRatio="1x1" sizes="20vw" />
+            </MediaMobile>
+            <MediaDesktop>
+                <MediaBlock data={media} aspectRatio="16x9" sizes="20vw" />
+            </MediaDesktop>
+            <ContentContainer>
+                <TitleTypography variant="h350">{title}</TitleTypography>
+                <Typography variant="p200">
+                    <RichTextBlock data={description} renderers={descriptionRenderers} />
+                </Typography>
+                <TextLinkContainer>
+                    <SvgUse href="/assets/icons/arrow-right.svg#arrow-right" width={16} height={16} />
+                    <LinkText>{link.text}</LinkText>
+                </TextLinkContainer>
+            </ContentContainer>
+        </Link>
     ),
     { label: "Teaser Item" },
 );
 
-const ItemContent = styled.a`
+const Link = styled(LinkBlock)`
     text-decoration: none;
     cursor: pointer;
     display: flex;
     flex: 1;
     flex-direction: row;
     gap: ${({ theme }) => theme.spacing.S300};
+    color: ${({ theme }) => theme.palette.text.primary};
 
     ${({ theme }) => theme.breakpoints.sm.mediaQuery} {
         flex: unset;