fixed cookie bar link and styling

This commit is contained in:
Rick van Lieshout 2022-09-10 09:31:27 +02:00
parent 4bb3f931f0
commit 5277f19ca6
11 changed files with 311 additions and 315 deletions

View File

@ -13,7 +13,9 @@ export const CookieBar = () => {
buttonClasses={styles.button} buttonClasses={styles.button}
> >
This website uses cookies to enhance the user experience.{" "} This website uses cookies to enhance the user experience.{" "}
<small>Click <Link to="/">here</Link> to learn more about cookies.</small> <small>
Click <Link to="/pages/legal/cookies">here</Link> to learn more about cookies.
</small>
</CookieConsent> </CookieConsent>
); );
}; };

View File

@ -1,7 +1,6 @@
import React from "react"; import React from "react";
import Helmet from "react-helmet"; import Helmet from "react-helmet";
import { CookieBar } from "../Cookiebar/CookieBar"; import { CookieBar } from "../Cookiebar/CookieBar";
import * as styles from "./Layout.module.scss"; import * as styles from "./Layout.module.scss";
import { useSiteMetadata } from "@/hooks"; import { useSiteMetadata } from "@/hooks";
@ -13,12 +12,7 @@ interface Props {
children: React.ReactNode; children: React.ReactNode;
} }
const Layout: React.FC<Props> = ({ const Layout: React.FC<Props> = ({ children, title, description, socialImage = "" }: Props) => {
children,
title,
description,
socialImage = "",
}: Props) => {
const { author, url } = useSiteMetadata(); const { author, url } = useSiteMetadata();
const metaImage = socialImage || author.photo; const metaImage = socialImage || author.photo;
const metaImageUrl = url + metaImage; const metaImageUrl = url + metaImage;
@ -36,8 +30,8 @@ const Layout: React.FC<Props> = ({
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} /> <meta name="twitter:image" content={metaImageUrl} />
</Helmet> </Helmet>
<CookieBar />
{children} {children}
<CookieBar />
</div> </div>
); );
}; };

View File

@ -2,6 +2,7 @@
exports[`Layout renders correctly 1`] = ` exports[`Layout renders correctly 1`] = `
<div> <div>
test
<div <div
className="CookieConsent" className="CookieConsent"
style={ style={
@ -19,7 +20,7 @@ exports[`Layout renders correctly 1`] = `
<small> <small>
Click Click
<a <a
href="/" href="/pages/legal/cookies"
> >
here here
</a> </a>
@ -40,6 +41,5 @@ exports[`Layout renders correctly 1`] = `
</button> </button>
</div> </div>
</div> </div>
test
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`CategoriesTemplate renders correctly 1`] = ` exports[`CategoriesTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<div> <div>
<div> <div>
@ -213,5 +175,43 @@ exports[`CategoriesTemplate renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`CategoryTemplate renders correctly 1`] = ` exports[`CategoryTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<div> <div>
<div> <div>
@ -277,5 +239,43 @@ exports[`CategoryTemplate renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`IndexTemplate renders correctly 1`] = ` exports[`IndexTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<div> <div>
<div> <div>
@ -274,5 +236,43 @@ exports[`IndexTemplate renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`NotFoundTemplate renders correctly 1`] = ` exports[`NotFoundTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<div> <div>
<div> <div>
@ -194,5 +156,43 @@ exports[`NotFoundTemplate renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`PageTemplate renders correctly 1`] = ` exports[`PageTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<div> <div>
<div> <div>
@ -198,5 +160,43 @@ exports[`PageTemplate renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`PostTemplate renders correctly 1`] = ` exports[`PostTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<a <a
href="/" href="/"
@ -83,5 +45,43 @@ exports[`PostTemplate renders correctly 1`] = `
</div> </div>
<div /> <div />
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`TagTemplate renders correctly 1`] = ` exports[`TagTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<div> <div>
<div> <div>
@ -277,5 +239,43 @@ exports[`TagTemplate renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;

View File

@ -2,44 +2,6 @@
exports[`TagsTemplate renders correctly 1`] = ` exports[`TagsTemplate renders correctly 1`] = `
<div> <div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
<div> <div>
<div> <div>
<div> <div>
@ -213,5 +175,43 @@ exports[`TagsTemplate renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="CookieConsent"
style={
Object {
"bottom": "0",
}
}
>
<div
className=""
style={Object {}}
>
This website uses cookies to enhance the user experience.
<small>
Click
<a
href="/pages/legal/cookies"
>
here
</a>
to learn more about cookies.
</small>
</div>
<div
className=""
>
<button
aria-label="Accept cookies"
className=""
id="rcc-confirm-button"
onClick={[Function]}
style={Object {}}
>
I understand
</button>
</div>
</div>
</div> </div>
`; `;