feat: improve style

satellytes · Nov 27, 2024 · 0eb8072 · 0eb8072
1 parent a0e7442
commit 0eb8072
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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
@@ -7,22 +7,32 @@ 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 => {
   const { t } = useTranslation();
   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}
         />