💄 improve styles

antistatique · Jun 27, 2023 · 7e72810 · 7e72810
1 parent d87f38f
commit 7e72810
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -5,11 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>🍪 Leckerli</title>
   </head>
-  <body style="background: #cbd5e1;">
-    Your Website here
+  <body style="background: #cbd5e1; display: grid; place-content: center; font-family: sans-serif; min-height: 100vh;">
+    <h1>Your website here 🤗</h1>
+
+
     <script defer type="module" src="/src/index.tsx"></script>
 
     <script>
+      /*
       window.leckerliSettings = {
         baseData: {
           consentid: 'b638a4a9-a846-475a-a29b-d2bb596cb735',
@@ -36,17 +39,20 @@
           }
         ],
       }
+     */
     </script>
 
     <style>
+      /*
       :root {
-        /*
+        --leckerli-foreground: #fff;
+        --leckerli-background: #000;
         --leckerli-primary: #ff0099;
         --leckerli-primary-hover: #d1007e;
         --leckerli-primary-active: #9D005F;
         --leckerli-font: sans-serif;
-        */
       }
+     */
     </style>
   </body>
 </html>
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,15 +5,14 @@ import Settings from './Settings';
 import useSettings from '../hooks/useSettings';
 
 const App = () => {
-  const { choiceMade, init, cookie, settingsOpen }  = useSettings();
+  const { choiceMade, init, settingsOpen }  = useSettings();
 
   useEffect(() => {
     init();
   }, []);
 
   return (
     <>
-      <pre>{JSON.stringify(cookie, null, 2)}</pre>
       {!choiceMade && !settingsOpen && <Banner/>}
       {settingsOpen && <Settings/>}
     </>

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -4,7 +4,7 @@ const Banner = () => {
   const { banner, acceptAll, rejectAll, setModal }  = useSettings();
 
   return (
-    <div class="absolute z-[9998] bottom-0 left-0 max-w-md bg-white m-2 px-5 py-4 space-y-4 font-primary text-black rounded-md">
+    <div class="fixed z-[9998] bottom-0 left-0 max-w-md bg-background m-2 px-5 py-4 space-y-4 font-primary text-foreground rounded-md">
       <h3 class="m-0 font-primary font-semibold text-lg md:text-xl">
         {banner.title}
       </h3>
@@ -16,21 +16,21 @@ const Banner = () => {
       <div class="pt-2 space-y-2">
         <button
           type="button"
-          class="rounded mr-2 bg-white font-primary font-semibold text-primary px-2 md:px-3.5 py-1.5 md:py-2.5 text-sm border-2 border-solid border-primary hover:-border-primary-hover hover:-text-primary-hover active:-border-primary-active active:-text-primary-active transition-colors"
+          class="rounded mr-2 bg-background font-primary font-semibold text-primary px-2 md:px-3.5 py-1.5 md:py-2.5 text-sm border-2 border-solid border-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active transition-colors"
           onClick={() => setModal(true)}
         >
           {banner.customise}
         </button>
         <button
           type="button"
-          class="rounded mr-2 bg-white font-primary font-semibold text-primary px-2 md:px-3.5 py-1.5 md:py-2.5 text-sm border-2 border-solid border-primary hover:-border-primary-hover hover:-text-primary-hover active:-border-primary-active active:-text-primary-active transition-colors"
+          class="rounded mr-2 bg-background font-primary font-semibold text-primary px-2 md:px-3.5 py-1.5 md:py-2.5 text-sm border-2 border-solid border-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active transition-colors"
           onClick={rejectAll}
         >
           {banner.reject}
         </button>
         <button
           type="button"
-          class="rounded mr-2 bg-primary font-primary font-semibold text-white px-2 md:px-3.5 py-1.5 md:py-2.5 text-sm border-2 border-solid border-primary hover:-bg-primary-hover hover:-border-primary-hover active:-bg-primary-active active:-border-primary-active transition-colors"
+          class="rounded mr-2 bg-primary font-primary font-semibold text-background px-2 md:px-3.5 py-1.5 md:py-2.5 text-sm border-2 border-solid border-primary hover:bg-primary-hover hover:border-primary-hover active:bg-primary-active active:border-primary-active transition-colors"
           onClick={acceptAll}
         >
           {banner.accept}

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -4,8 +4,7 @@ const Settings = () => {
   const { permissions, cookie, togglePermission, banner, setModal }  = useSettings();
 
   return (
-    <div class="absolute z-[9999] inset-0 grid place-content-center">
-      <div class="relative max-w-md bg-white m-2 px-5 py-4 font-primary text-black rounded-md max-h-full">
+      <div class="fixed z-[9999] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-background text-foreground m-2 px-5 py-4 font-primary text-black rounded-md max-h-full">
         <div class="space-y-6">
           <h3 class="w-10/12 m-0 font-primary font-semibold text-xl md:text-2xl">
             {banner.customise}
@@ -26,7 +25,7 @@ const Settings = () => {
                 >
                   <span class="sr-only">Toggle</span>
                   <span aria-hidden="true"
-                    class={`${cookie[slug] ? 'translate-x-5' : 'translate-x-0'} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`}></span>
+                    class={`${cookie[slug] ? 'translate-x-5' : 'translate-x-0'} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow ring-0 transition duration-200 ease-in-out`}></span>
                 </button>
               </div>
 
@@ -37,13 +36,12 @@ const Settings = () => {
           ))}
         </div>
         <button
-          class="absolute top-0 right-0 w-8 h-8 bg-white mt-0 text-xl rounded-full"
+          class="absolute top-0 right-0 w-8 h-8 mt-0 text-xl rounded-full"
           onClick={() => setModal(false)}
         >
           &times;
         </button>
       </div>
-    </div>
   );
 };
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,7 +13,9 @@ export default {
           DEFAULT: `var(--leckerli-primary, ${colors.emerald['600']})`,
           hover: `var(--leckerli-primary-hover, ${colors.emerald['700']})`,
           active: `var(--leckerli-primary-active, ${colors.emerald['900']})`,
-        }
+        },
+        foreground: `var(--leckerli-foreground, ${colors.black})`,
+        background: `var(--leckerli-background, ${colors.white})`,
       },
       fontFamily: {
         primary: `var(--leckerli-font, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")`