From 0eb8072adabc47244c6d70a77f354b49465a9c2c Mon Sep 17 00:00:00 2001
From: Noa Santo <72336443+virus-rpi@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:10:10 +0000
Subject: [PATCH] feat: improve style

---
 src/assets/locales/de/translations.json |  3 ++-
 src/assets/locales/en/translations.json |  3 ++-
 src/pages/data-privacy.tsx              | 16 +++++++++++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/assets/locales/de/translations.json b/src/assets/locales/de/translations.json
index 51885a37..d3af707a 100644
--- a/src/assets/locales/de/translations.json
+++ b/src/assets/locales/de/translations.json
@@ -91,5 +91,6 @@
   "iframemanager.youtube.notice": "Dieser Inhalt wird von einer externen Quelle gehostet. Durch das Laden des Inhalts akzeptieren Sie die <a rel=\"noreferrer noopener\" href=\"https://www.youtube.com/t/terms\" target=\"_blank\">Nutzungsbedingungen</a> von youtube.com und stimmen einer möglichen Übertragung Ihrer Daten in Drittländer zu.",
   "iframemanager.youtube.load-button": "Inhalt laden",
   "iframemanager.youtube.load-all-button": "Inhalt laden und nicht mehr fragen",
-  "dataprivacy.reopen-cookie-consent": "Cookie-Einstellungen erneut öffnen"
+  "dataprivacy.reopen-cookie-consent": "Cookie-Einstellungen erneut öffnen",
+  "dataprivacy.cookie-consent-notice": "Wir sammeln Cookies für bestimmte Zwecke, aber nur, wenn Sie zustimmen. Diese Zustimmung kann jederzeit widerrufen werden."
 }
diff --git a/src/assets/locales/en/translations.json b/src/assets/locales/en/translations.json
index 2a3b7388..e1c7a297 100644
--- a/src/assets/locales/en/translations.json
+++ b/src/assets/locales/en/translations.json
@@ -91,5 +91,6 @@
   "iframemanager.youtube.notice": "This content is hosted by a third party. By showing the external content you accept the <a rel=\"noreferrer noopener\" href=\"https://www.youtube.com/t/terms\" target=\"_blank\">terms and conditions</a> of youtube.com and agree to a possible transfer of your data to third countries.",
   "iframemanager.youtube.load-button": "Load content",
   "iframemanager.youtube.load-all-button": "Load content and don't ask again",
-  "dataprivacy.reopen-cookie-consent": "Reopen cookie consent preferences"
+  "dataprivacy.reopen-cookie-consent": "Reopen cookie consent preferences",
+  "dataprivacy.cookie-consent-notice": "We collect cookies for certain purposes, but only if you agree. This consent can be withdrawn at any time."
 }
diff --git a/src/pages/data-privacy.tsx b/src/pages/data-privacy.tsx
index 81960d2a..826b647e 100644
--- a/src/pages/data-privacy.tsx
+++ b/src/pages/data-privacy.tsx
@@ -7,12 +7,19 @@ import { ContentfulRichText } from '../components/content/rich-text/rich-text';
 import { ContentfulPage, ContentfulRichTextType } from '../types';
 import { Button } from '../components/ui/buttons/button';
 import { useTranslation } from 'react-i18next';
+import Callout from '../components/ui/callout/callout';
+import styled from 'styled-components';
 
 interface DataPrivacyPageQueryProps {
   contentfulPage: ContentfulPage;
   locales: LocalesQueryProps;
 }
 
+const StyledText = styled.p`
+  margin: 0;
+  margin-bottom: 1rem;
+`;
+
 const DataPrivacyPage = ({
   data,
 }: PageProps<DataPrivacyPageQueryProps>): JSX.Element => {
@@ -20,9 +27,12 @@ const DataPrivacyPage = ({
   return (
     <Layout light={true}>
       <ContentBlockContainer>
-        <Button type="button" data-cc="show-preferencesModal">
-          {t('dataprivacy.reopen-cookie-consent')}
-        </Button>
+        <Callout>
+          <StyledText>{t('dataprivacy.cookie-consent-notice')}</StyledText>
+          <Button type="button" data-cc="show-preferencesModal">
+            {t('dataprivacy.reopen-cookie-consent')}
+          </Button>
+        </Callout>
         <ContentfulRichText
           data={data.contentfulPage.content as ContentfulRichTextType}
         />