Update stylings on my data page

Author: webstackdev

_TODO.md

@@ -127,7 +127,6 @@ https://mermaid.js.org/config/directives.html
 - /
 - /404
 - /about
-- /consent
 - /contact
 - /downloads/[slug]
 - /newsletter

src/components/Pages/MyData/index.astro

@@ -1,18 +1,38 @@
 ---
-// import List from '@components/List/index.astro'
 import Icon from '@components/Icon/index.astro'
-// import HeadingAnchor from '@components/Layout/HeadingAnchor/index.astro'
+import List from '@components/List/index.astro'
 
 export type Props = {
   content: {
     header: {
       title: string
       description: string
     }
+    intro: string
     introLinks: {
       privacyPolicyText: string
       consentPreferencesText: string
     }
+    accessData: {
+      heading: string
+      description: string
+      label: string
+      buttonText: string
+    },
+     deleteData: {
+      heading: string
+      description: string
+      label: string
+      buttonText: string
+      confirmText: string
+    },
+    next: {
+      heading: string
+      items: {
+        lead: string
+        text: string
+      }[]
+    }
   }
 }
 
@@ -44,12 +64,15 @@ const { content } = Astro.props
       class="hidden rounded-xl border px-4 py-3 text-sm"
     ></div>
 
-    <section class="bg-page-offset border border-trim rounded-2xl p-6" aria-labelledby="my-data-intro-title">
+    <section
+      class="flex flex-col items-center bg-page-offset border border-trim rounded-2xl p-6"
+      aria-labelledby="my-data-intro-title"
+    >
       <h2 class="sr-only" id="my-data-intro-title">Overview</h2>
       <p class="text-content-active">
-        Use the forms below to request a copy of your data or request its deletion.
+        {content.intro}
       </p>
-      <div class="mt-4 flex justify-evenly">
+      <div class="mt-4 flex justify-evenly gap-8">
         <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"
@@ -66,32 +89,37 @@ const { content } = Astro.props
     </section>
 
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <section class="bg-content-inverse border border-trim rounded-2xl p-6 md:p-8" aria-labelledby="my-data-access-title">
-        <h2 id="my-data-access-title" class="text-xl font-semibold mb-3">
-          <span aria-hidden="true">📥</span> Access My Data
+      <sectionclass
+        class="bg-content-inverse border border-trim rounded-2xl p-2 md:p-4"
+        aria-labelledby="my-data-access-title"
+      >
+        <h2 id="my-data-access-title" class="text-page-inverse text-xl font-semibold mb-3">
+          {content.accessData.heading}
         </h2>
         <p class="text-content-active">
-          Request a copy of personal data we have about you, including consent records and newsletter subscriptions.
+          {content.accessData.description}
         </p>
 
         <form id="access-form" class="mt-6 space-y-4" novalidate>
           <div class="space-y-2">
-            <label for="access-email" class="block text-content-active text-sm font-medium">Email Address</label>
+            <label for="access-email" class="block text-content-active text-sm font-medium">
+              {content.accessData.label}
+            </label>
             <input
               type="email"
               id="access-email"
               name="email"
               required
               placeholder="your@email.com"
-              class="w-full rounded-md border border-trim bg-content-inverse px-3 py-2 placeholder:text-content-active focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+              class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active focus:border-primary transition-colors duration-200"
             />
           </div>
 
           <button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-spotlight hover:bg-spotlight-offset text-white font-semibold transition-colors"
+            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-spotlight-offset hover:bg-spotlight text-white font-semibold transition-colors mt-8"
           >
-            Request My Data
+            {content.accessData.buttonText}
           </button>
 
           <div
@@ -103,41 +131,52 @@ const { content } = Astro.props
             tabindex="-1"
           ></div>
         </form>
-      </section>
-
-      <section class="bg-content-inverse border border-trim rounded-2xl p-6 md:p-8" aria-labelledby="my-data-delete-title">
-        <h2 id="my-data-delete-title" class="text-xl font-semibold mb-3">
-          <span aria-hidden="true">🗑️</span> Delete My Data
+      </sectionclass>
+
+      <section
+        class="bg-content-inverse border border-trim rounded-2xl p-2 md:p-4"
+        aria-labelledby="my-data-delete-title"
+      >
+        <h2 id="my-data-delete-title" class="text-page-inverse text-xl font-semibold mb-3">
+          {content.deleteData.heading}
         </h2>
 
-        <div class="rounded-xl border border-warning bg-warning-inverse text-warning px-4 py-3 text-sm mb-4">
-          <strong><span aria-hidden="true">⚠️</span> Warning:</strong> This will permanently delete all your data from our systems.
-          This action cannot be undone.
+        <div class="flex rounded-xl border border-warning bg-warning-inverse text-warning px-4 py-3 text-sm mb-4">
+          <span class="mt-2">
+            <Icon
+              icon="warning"
+              color="warning-offset"
+              size={6}
+            />
+          </span>
+          <span class="ml-3">{content.deleteData.description}</span>
         </div>
 
-        <form id="delete-form" class="mt-6 space-y-4" novalidate>
+        <form id="delete-form" class="mt-11 space-y-4" novalidate>
           <div class="space-y-2">
-            <label for="delete-email" class="block text-content-active text-sm font-medium">Email Address</label>
+            <label for="delete-email" class="block text-content-active text-sm font-medium">
+              {content.deleteData.label}
+            </label>
             <input
               type="email"
               id="delete-email"
               name="email"
               required
               placeholder="your@email.com"
-              class="w-full rounded-md border border-trim bg-content-inverse px-3 py-2 placeholder:text-content-active focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+              class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active transition-colors duration-200"
             />
           </div>
 
           <label class="flex items-start gap-3 text-sm">
             <input type="checkbox" id="confirm-delete" required class="mt-1" />
-            <span>I understand this will permanently delete all my data</span>
+            <span class="mt-0.5">{content.deleteData.confirmText}</span>
           </label>
 
           <button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-danger text-white font-semibold hover:opacity-90 transition-colors"
+            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-danger-offset text-white font-semibold hover:bg-danger transition-colors"
           >
-            Delete My Data
+            {content.deleteData.buttonText}
           </button>
 
           <div
@@ -152,22 +191,9 @@ const { content } = Astro.props
       </section>
     </div>
 
-    <section class="bg-page-offset border border-trim rounded-2xl p-6" aria-labelledby="my-data-next-title">
-      <h2 id="my-data-next-title" class="text-xl font-semibold">What Happens Next?</h2>
-      <ol class="mt-4 list-decimal ml-6 space-y-3 text-content-active">
-        <li>
-          <strong>Verification Email:</strong> We'll send a verification link to your email address.
-        </li>
-        <li>
-          <strong>Click the Link:</strong> Click the link in the email to verify your request (expires in 24 hours).
-        </li>
-        <li>
-          <strong>For Access Requests:</strong> Your data will be automatically downloaded as a JSON file.
-        </li>
-        <li>
-          <strong>For Deletion Requests:</strong> Your data will be permanently removed and you'll see a confirmation.
-        </li>
-      </ol>
+    <section class="border border-trim rounded-2xl p-6" aria-labelledby="my-data-next-title">
+      <h2 id="my-data-next-title" class="text-page-inverse text-xl font-semibold mb-4">{content.next.heading}</h2>
+      <List variant="numbered-with-background-list" items={content.next.items} />
     </section>
   </div>
 </privacy-form>

src/pages/privacy/my-data.astro

@@ -10,13 +10,48 @@ const description =
 <BaseLayout pageTitle={pageTitle} path={path} description={description}>
   <PrivacyForm content={{
     header: {
-      title: "My Data &amp; Privacy Rights",
+      title: "My Data & Privacy Rights",
       description: "Under GDPR, you have the right to access and control your personal data.",
     },
+    intro: "Use the forms below to request a copy of your data or request its deletion.",
     introLinks: {
       privacyPolicyText: 'Privacy Policy',
       consentPreferencesText: 'Consent Preferences',
     },
+    accessData: {
+      heading: "Access My Data",
+      description: "Request a copy of personal data we have about you, including consent records and newsletter subscriptions.",
+      label: "Email Address",
+      buttonText: "Request My Data",
+    },
+     deleteData: {
+      heading: "Delete My Data",
+      description: "Request deletion of your personal data. We will process your request in accordance with GDPR guidelines.",
+      label: "Email Address",
+      buttonText: "Delete My Data",
+      confirmText: "I understand this will permanently delete all my data",
+    },
+    next: {
+      heading: "What Happens Next?",
+      items: [
+        {
+          lead: "Verification Email:",
+          text: "We'll send a verification link to your email address.",
+        },
+        {
+          lead: "Click the Link:",
+          text: "Click the link in the email to verify your request (expires in 24 hours).",
+        },
+        {
+          lead: "For Access Requests:",
+          text: "Your data will be automatically downloaded as a JSON file.",
+        },
+        {
+          lead: "For Deletion Requests:",
+          text: "Your data will be permanently removed and you'll see a confirmation.",
+        },
+      ]
+    }
   }} />
 </BaseLayout>