Styles for consent form

Author: webstackdev

src/components/Pages/Consent/index.astro

@@ -11,6 +11,10 @@ export type Props = {
       description: string
     }
     intro: string
+    introLinks: {
+      privacyPolicyText: string
+      myDataText: string
+    }
     essential: {
       heading: string
       subheading: string
@@ -75,49 +79,53 @@ export type Props = {
 const { content } = Astro.props
 ---
 
-<div class="mx-auto px-4 sm:px-6 lg:px-8 py-2 md:py-4">
-  <header class="text-center max-w-2xl mx-auto mb-8">
+<div class="max-w-4xl mx-auto w-full block py-2 md:py-4">
+  <header class="text-center max-w-2xl mx-auto mb-2">
     <div class="inline-flex items-center justify-center w-18 h-18 rounded-full bg-primary/10 mb-5">
       <Icon
-        icon="avatar"
+        icon="lock"
         color="page-inverse"
         size={12}
       />
     </div>
-    <h1 class="text-4xl md:text-5xl font-bold text-page-inverse mb-4">{content.header.title}</h1>
-    <p class="text-lg text-content-offset leading-relaxed mb-4">
+    <h1 class="font-bold text-page-inverse mb-4">{content.header.title}</h1>
+    <p class="text-lg text-content-offset leading-relaxed">
       {content.header.description}
     </p>
   </header>
 
-  <consent-preferences class="block w-full mb-12">
+  <consent-preferences class="mb-2">
     <section
-      class="bg-content-inverse rounded-2xl shadow-2xl max-w-4xl mx-auto w-full"
       aria-labelledby="consent-preferences__title"
       aria-describedby="consent-preferences__settings-desc"
     >
-      <div class="px-6 py-8">
+      <div class="px-6 pt-8 pb-2">
         {/* Introduction */}
-        <div class="mb-8">
-          <p id="consent-preferences__settings-desc" class="leading-relaxed">
-            {content.intro}
-          </p>
+        <div class="bg-page-offset rounded-xl p-6 mb-4">
+          <p class="leading-relaxed text-md">{content.intro}</p>
+          <div class="mt-4 flex justify-evenly">
+            <a
+              href="/privacy"
+              class="text-page-inverse underline decoration-page-inverse decoration-dotted underline-offset-4 hover:text-secondary hover:decoration-secondary focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2"
+            >
+              {content.introLinks.privacyPolicyText}
+            </a>
+            <a
+              href="/privacy/my-data"
+              class="text-page-inverse underline decoration-page-inverse decoration-dotted underline-offset-4 hover:text-secondary hover:decoration-secondary focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2"
+            >
+              {content.introLinks.myDataText}
+            </a>
+          </div>
         </div>
 
         {/* Data Storage Categories */}
         <div class="space-y-6">
           {/* Essential Data */}
-          <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-6">
-            <div class="flex items-center justify-between mb-4">
+          <div class="bg-page-offset rounded-xl p-6">
+            <div class="flex items-center justify-between mb-1">
               <div>
-                <h3
-                  class="text-lg font-semibold text-gray-900 dark:text-white"
-                  id="consent-preferences__essential-title"
-                >
-                  {content.essential.heading}
-                  <HeadingAnchor href={"#consent-preferences__essential-title"} />
-                </h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400">{content.essential.subheading}</p>
+                <h3 class="text-xl font-semibold text-primary-offset">{content.essential.heading}</h3>
               </div>
               <div class="flex items-center">
                 <span
@@ -127,28 +135,15 @@ const { content } = Astro.props
                 </span>
               </div>
             </div>
-            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-              {content.essential.description}
-            </p>
+            <p class="text-sm text-content-offset mb-3">{content.essential.subheading}</p>
+            <p class="text-content text-md leading-relaxed">{content.essential.description}</p>
           </div>
 
           {/* Performance and Analytics */}
-          <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-6">
-            <div class="flex items-center justify-between mb-4">
+          <div class="bg-page-offset rounded-xl p-6">
+            <div class="flex items-center justify-between mb-1">
               <div>
-                <h3
-                  id="consent-preferences__analytics-title"
-                  class="text-lg font-semibold text-gray-900 dark:text-white"
-                >
-                  {content.analytics.heading}
-                  <HeadingAnchor href={"#consent-preferences__analytics-title"} />
-                </h3>
-                <p
-                  id="consent-preferences__analytics-desc"
-                  class="text-sm text-gray-600 dark:text-gray-400"
-                >
-                  {content.analytics.subheading}
-                </p>
+                <h3 class="text-xl font-semibold text-primary-offset">{content.analytics.heading}</h3>
               </div>
               <label
                 class="relative inline-flex items-center cursor-pointer"
@@ -164,33 +159,20 @@ const { content } = Astro.props
                   checked
                 />
                 <div
-                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                  class="w-11 h-6 bg-content peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
                 >
                 </div>
               </label>
             </div>
-            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-              {content.analytics.description}
-            </p>
+            <p class="text-sm text-content-offset mb-3">{content.analytics.subheading}</p>
+            <p class="text-content text-md leading-relaxed">{content.analytics.description}</p>
           </div>
 
           {/* Functional */}
-          <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-6">
-            <div class="flex items-center justify-between mb-4">
+          <div class="bg-page-offset rounded-xl p-6">
+            <div class="flex items-center justify-between mb-1">
               <div>
-                <h3
-                  id="consent-preferences__functional-title"
-                  class="text-lg font-semibold text-gray-900 dark:text-white"
-                >
-                  {content.functional.heading}
-                  <HeadingAnchor href={"#consent-preferences__functional-title"} />
-                </h3>
-                <p
-                  id="consent-preferences__functional-desc"
-                  class="text-sm text-gray-600 dark:text-gray-400"
-                >
-                  {content.functional.subheading}
-                </p>
+                <h3 class="text-xl font-semibold text-primary-offset">{content.functional.heading}</h3>
               </div>
               <label
                 class="relative inline-flex items-center cursor-pointer"
@@ -205,38 +187,23 @@ const { content } = Astro.props
                   aria-describedby="consent-preferences__functional-desc"
                 />
                 <div
-                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                  class="w-11 h-6 bg-content peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
                 >
                 </div>
               </label>
             </div>
-            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-3">
-              {content.functional.description}
-            </p>
-            <div
-              class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4"
-            >
-              <p class="text-sm text-blue-800 dark:text-blue-200 leading-relaxed" set:html={content.functional.trailer}></p>
+            <p class="text-sm text-content-offset mb-3">{content.functional.subheading}</p>
+            <p class="text-content text-md leading-relaxed">{content.functional.description}</p>
+            <div class="bg-content-inverse-active rounded-lg p-4 mt-4 -mx-1">
+              <p class="text-sm text-secondary leading-relaxed" set:html={content.functional.trailer}></p>
             </div>
           </div>
 
           {/* Marketing */}
-          <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-6">
-            <div class="flex items-center justify-between mb-4">
+          <div class="bg-page-offset rounded-xl p-6">
+            <div class="flex items-center justify-between mb-1">
               <div>
-                <h3
-                  id="consent-preferences__marketing-title"
-                  class="text-lg font-semibold text-gray-900 dark:text-white"
-                >
-                  {content.marketing.heading}
-                  <HeadingAnchor href={"#consent-preferences__marketing-title"} />
-                </h3>
-                <p
-                  id="consent-preferences__marketing-desc"
-                  class="text-sm text-gray-600 dark:text-gray-400"
-                >
-                  {content.marketing.subheading}
-                </p>
+                <h3 class="text-xl font-semibold text-primary-offset">{content.marketing.heading}</h3>
               </div>
               <label
                 class="relative inline-flex items-center cursor-pointer"
@@ -251,19 +218,24 @@ const { content } = Astro.props
                   aria-describedby="consent-preferences__marketing-desc"
                 />
                 <div
-                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                  class="w-11 h-6 bg-content peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
                 >
                 </div>
               </label>
             </div>
-            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-              {content.marketing.description}
-            </p>
+            <p class="text-sm text-content-offset mb-3">{content.marketing.subheading}</p>
+            <p class="text-content text-md leading-relaxed">{content.marketing.description}</p>
           </div>
         </div>
       </div>
 
-      <div class="bg-content-inverse border-t border-page-offset px-6 py-4 flex gap-3 justify-end flex-wrap">
+      <div class="px-6 py-4 flex gap-3 justify-end flex-wrap">
+        <button
+          id="consent-allow-all"
+          class="px-6 py-2 bg-spotlight text-white rounded-lg hover:bg-spotlight-offset transition-colors duration-200 font-medium"
+        >
+          {content.buttons.acceptAll}
+        </button>
         <button
           id="consent-deny-all"
           class="px-6 py-2 bg-spotlight rounded-lg hover:bg-spotlight-offset transition-colors duration-200 font-medium"
@@ -278,12 +250,6 @@ const { content } = Astro.props
         >
           {content.buttons.save}
         </button>
-        <button
-          id="consent-allow-all"
-          class="px-6 py-2 bg-spotlight text-white rounded-lg hover:bg-spotlight-offset transition-colors duration-200 font-medium"
-        >
-          {content.buttons.acceptAll}
-        </button>
       </div>
     </section>
   </consent-preferences>

src/components/Pages/Privacy/index.astro

@@ -20,6 +20,10 @@ export type Props = {
     }
     nav: {
       title: string
+      links: {
+        consentPreferencesText: string
+        myDataText: string
+      }
       items: {
         label: string
         href: string
@@ -181,7 +185,23 @@ for (const [index, item] of content.nav.items.entries()) {
   </header>
 
   <nav aria-label="Privacy policy sections" class="bg-content-active rounded-xl p-6 mb-8">
-    <p class="text-md font-semibold text-content-inverse ml-2 mb-3">{content.nav.title}</p>
+    <div class="mb-3 flex flex-col items-start gap-3 pl-2 md:flex-row md:items-center md:justify-between">
+      <p class="text-md font-semibold text-content-inverse mb-0">{content.nav.title}</p>
+      <div class="flex w-full items-center justify-center gap-3 md:w-auto md:justify-end">
+        <a
+          href="/consent"
+          class="text-content-inverse underline decoration-content-inverse decoration-dotted underline-offset-4 hover:text-content-offset hover:decoration-content-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 md:mr-8"
+        >
+          {content.nav.links.consentPreferencesText}
+        </a>
+        <a
+          href="/privacy/my-data"
+          class="text-content-inverse underline decoration-content-inverse decoration-dotted underline-offset-4 hover:text-content-offset hover:decoration-content-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 md:mr-16"
+        >
+          {content.nav.links.myDataText}
+        </a>
+      </div>
+    </div>
     <div class="flex flex-wrap items-center gap-y-2 md:gap-x-2 text-md md:ml-6">
       {
         navItems.map(({ href, label, showSeparator }) => (

src/pages/consent/index.astro

@@ -15,6 +15,10 @@ const description =
       description: "Manage your cookie preferences and learn how we use cookies to improve your experience.",
     },
     intro: "When you visit our website, we may store information in your browser or device to make the site work and provide a better experience. This includes both cookies and local storage. The information we collect might relate to you, your preferences, or your device. You can choose which types of data storage to allow, though some choices may affect how the site works. Click on the different categories below to learn more and customize your preferences.",
+    introLinks: {
+      privacyPolicyText: "Privacy Policy",
+      myDataText: "My Data Rights",
+    },
     essential: {
       heading: "Essential Data",
       subheading: "Always Active - Required for the website to work",
@@ -38,13 +42,14 @@ const description =
       description: "These tools help identify unique browsing sessions to show generic ads. We don't collect information to show you targeted ads based on your behavior. However, advertising partners may use these tools to build a profile of your interests and show you relevant ads on other sites. They don't store personal information directly, but identify your browser and device. If you opt out, you may see less relevant advertising.",
     },
     buttons: {
-      save: "Save My Preferences",
+      save: "Save",
       acceptAll: "Accept All",
       rejectAll: "Decline All",
     },
     cookies: {
       heading: "What Are Cookies?",
       subheading: "Cookies are small text files that are stored on your computer or mobile device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.",
+      description: "Cookies are small text files that are stored on your computer or mobile device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.",
       types: [
         {
           title: "Session Cookies",

src/pages/privacy/index.astro

@@ -18,6 +18,10 @@ const description =
       },
       nav: {
         title: "Jump to:",
+        links: {
+          consentPreferencesText: "Consent Preferences",
+          myDataText: "My Data",
+        },
         items: [
           {
             label: "Collection",