From 580846e18c74f8e4bf40132f1b3dfbc9f83a31f7 Mon Sep 17 00:00:00 2001
From: saboooooor <saboor547@gmail.com>
Date: Sun, 5 May 2024 19:49:15 -0600
Subject: [PATCH] add option to opt out of cookies

---
 src/components/util/SharedUtils.ts |  1 +
 src/routes/layout.tsx              | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/util/SharedUtils.ts b/src/components/util/SharedUtils.ts
index 93f6e84e..d87898ea 100644
--- a/src/components/util/SharedUtils.ts
+++ b/src/components/util/SharedUtils.ts
@@ -34,6 +34,7 @@ export const setCookies = function (json: { [key: string]: any; }) {
     const pairsplit = pair.split(/\s*=\s*/);
     cookie[pairsplit[0]] = pairsplit.splice(1).join('=');
   });
+  if (cookie.optout === 'true') return;
   Object.keys(json).forEach(key => {
     const existingCookie = cookie[key];
     if (excludedKeys.includes(key)) return;
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 0f9173bd..15b06ef6 100755
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -24,20 +24,23 @@ export default component$(() => {
     <Slot />
     {store.cookies != 'true' &&
       <div class={{
-        'fixed bottom-4 right-4 backdrop-blur-xl z-[1000] animate-in fade-in slide-in-from-bottom-8 anim-duration-1000': true,
+        'fixed bottom-0 sm:bottom-4 w-[100vw] sm:right-4 backdrop-blur-xl z-[1000] animate-in fade-in slide-in-from-bottom-8 anim-duration-1000': true,
       }}>
         <Card id="cookieprompt">
-          <Header>
+          <Header subheader="We use cookies to automatically save and load your preferences.">
             Cookies
           </Header>
-          <span class="text-gray-200 text-md mb-3 max-w-[17rem]">
-            We use cookies to automatically save and load your preferences.
-          </span>
-          <div class="flex items-center justify-end gap-2">
+          <div class="flex flex-wrap items-center justify-end gap-2">
+            <Button transparent onClick$={async () => {
+              document.cookie = 'optout=true; path=/';
+              document.getElementById('cookieprompt')!.remove();
+            }}>
+              Turn off cookies
+            </Button>
             <ButtonAnchor href="/privacy" transparent>
               Privacy Policy
             </ButtonAnchor>
-            <Button color="blue" onClick$={async () => {
+            <Button color="gray" onClick$={async () => {
               document.cookie = 'cookies=true; path=/';
               document.getElementById('cookieprompt')!.remove();
             }}>