diff --git a/src/App.tsx b/src/App.tsx index 5f973df..7575d3b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -58,6 +58,14 @@ function App() { setCookie("theme", newTheme); }; + if (getCookie("cookieconsent_status") === "accepted") { + // @ts-ignore + window["ga-disable-G-P9YFFF08LN"] = false; + } else { + // @ts-ignore + window["ga-disable-G-P9YFFF08LN"] = true; + } + return ( diff --git a/src/components/button/sass/Button.module.sass b/src/components/button/sass/Button.module.sass index 704286f..cabdcc8 100644 --- a/src/components/button/sass/Button.module.sass +++ b/src/components/button/sass/Button.module.sass @@ -1,8 +1,7 @@ @import '../../../sass/variables.omega.library' .button - background-color: #e0e0e0 - color: #303030 + color: $color-secondary-text font-size: 12px cursor: pointer font-weight: 700 @@ -18,7 +17,7 @@ white-space: nowrap &:hover - background-color: #c0c0c0 + background-color: $color-third-background animation: hover-feedback 0.2s box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.08) diff --git a/src/components/cookiesconsent/CookiesConsent.tsx b/src/components/cookiesconsent/CookiesConsent.tsx index 15b2e22..f88f0de 100644 --- a/src/components/cookiesconsent/CookiesConsent.tsx +++ b/src/components/cookiesconsent/CookiesConsent.tsx @@ -16,15 +16,24 @@ type CookiesConsentProps = { export default function CookiesConsent(props: CookiesConsentProps) { let _show = false; const cookie = getCookie("cookieconsent_status"); - if (cookie !== "dismiss" && cookie !== "allow") { + if (cookie !== "refused" && cookie !== "accepted") { _show = true; } const [show, setShow] = useState(_show); const agree = () => { - setCookie("cookieconsent_status", "dismiss"); + setCookie("cookieconsent_status", "accepted"); setShow(false); + // @ts-ignore + window["ga-disable-G-P9YFFF08LN"] = false; + }; + + const refuse = () => { + setCookie("cookieconsent_status", "refused"); + setShow(false); + // @ts-ignore + window["ga-disable-G-P9YFFF08LN"] = true; }; const messages = { @@ -32,7 +41,8 @@ export default function CookiesConsent(props: CookiesConsentProps) { props.message || "This website uses cookies to ensure you get the best experience on our website.", learnMore: props.messageLearnMore || "Learn more", - gotIt: props.messageGotIt || "Got it!", + accept: "Accept", + refuse: "Refuse", }; return ( @@ -46,9 +56,27 @@ export default function CookiesConsent(props: CookiesConsentProps) { {messages.learnMore} - +
+ + +
); } diff --git a/src/components/cookiesconsent/sass/CookiesConsent.module.sass b/src/components/cookiesconsent/sass/CookiesConsent.module.sass index 6803cb8..0179d26 100644 --- a/src/components/cookiesconsent/sass/CookiesConsent.module.sass +++ b/src/components/cookiesconsent/sass/CookiesConsent.module.sass @@ -1,24 +1,33 @@ @import '../../../sass/variables.omega.library' .cookiesConsent + display: flex + flex-direction: column + align-items: flex-start + gap: 16px z-index: 10000000 - width: 100% + width: calc(100% - 96px) box-sizing: border-box - background-color: $color-third-background + background-color: $color-secondary-background + border: 1px solid $color-third-background color: $color-primary-text - padding: 12px 48px + margin: 24px 48px + margin-top: 48px + padding: 24px 32px vertical-align: middle font-size: 14px overflow: hidden box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.08) + position: relative + border-radius: 16px .text + font-size: 15px display: inline-block line-height: 20px - margin-top: 8px display: inline-block vertical-align: middle - margin-right: 100px + margin-bottom: 16px .link padding: 2px 4px @@ -31,13 +40,16 @@ .button margin-top: 2px - float: right vertical-align: middle + padding: 12px 24px @media screen and ( min-width: 1400px ) .cookiesConsent - padding: 12px calc(15% - 16px) + margin: 48px calc(15% - 16px) + width: calc(100% - 30% + 32px) @media screen and ( max-width: 700px ) .cookiesConsent - padding: 12px 24px + margin: 24px + margin-top: 48px + width: calc(100% - 48px)