From 4c3f6e1e896b6f5ddf06c9e6df20258d8beeb740 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Wed, 29 Oct 2025 21:50:45 -0400
Subject: [PATCH 1/5] feat(onboarding): added responsive full page gradient
 background on mobile

---
 src/pages/Onboarding.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx
index b295bed..7dce60c 100644
--- a/src/pages/Onboarding.jsx
+++ b/src/pages/Onboarding.jsx
@@ -2,7 +2,7 @@ import Button from '../components/Button';
 
 export default function Onboarding() {
   return (
-    <div className="flex justify-center items-center h-screen bg-gradient-to-b from-nyanza via-celeste via-50% to-white to-50%">
+    <div className="flex justify-center items-center h-screen w-screen bg-gradient-to-b from-nyanza to-celeste sm:via-celeste sm:via-50% sm:to-white sm:to-50%">
       {/* quiz card */}
       <div className="flex flex-col justify-center items-center gap-10 bg-white rounded-[10px] h-[80vh] w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
         {/* title and subtitle */}

From 12662d6d109042269a3e92a4b66c422da27d8e6c Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 2 Nov 2025 10:19:19 -0500
Subject: [PATCH 2/5] feat(onboarding): added responsive vw and vh sizes on
 quiz card container with breakpoints

---
 src/pages/Onboarding.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx
index 7dce60c..a8ebb7e 100644
--- a/src/pages/Onboarding.jsx
+++ b/src/pages/Onboarding.jsx
@@ -4,7 +4,7 @@ export default function Onboarding() {
   return (
     <div className="flex justify-center items-center h-screen w-screen bg-gradient-to-b from-nyanza to-celeste sm:via-celeste sm:via-50% sm:to-white sm:to-50%">
       {/* quiz card */}
-      <div className="flex flex-col justify-center items-center gap-10 bg-white rounded-[10px] h-[80vh] w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
+      <div className="flex flex-col justify-center items-center gap-10 bg-white rounded-[10px] h-[80vh] w-full sm:w-[90vw] md:w-[80vw] lg:w-[70vw] xl:w-[65vw] 2xl:w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
         {/* title and subtitle */}
         <div className="flex flex-col gap-3">
           <h1 className="text-3xl font-medium">

From 939ba157272d652b5e51ed2bf53dcdae9ac8f721 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 2 Nov 2025 11:09:13 -0500
Subject: [PATCH 3/5] feat(onboarding): added responsive font sizes to quiz
 card

---
 src/pages/Onboarding.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx
index a8ebb7e..07f53a9 100644
--- a/src/pages/Onboarding.jsx
+++ b/src/pages/Onboarding.jsx
@@ -6,11 +6,11 @@ export default function Onboarding() {
       {/* quiz card */}
       <div className="flex flex-col justify-center items-center gap-10 bg-white rounded-[10px] h-[80vh] w-full sm:w-[90vw] md:w-[80vw] lg:w-[70vw] xl:w-[65vw] 2xl:w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
         {/* title and subtitle */}
-        <div className="flex flex-col gap-3">
-          <h1 className="text-3xl font-medium">
+        <div className="flex flex-col gap-3 text-center">
+          <h1 className="text-xl sm:text-2xl lg:text-3xl font-medium">
             What are some of your concerns today?
           </h1>
-          <p className="text-2xl font-normal">
+          <p className="text-base sm:text-lg lg:text-2xl font-normal">
             Your selections help us customize your dashboard
           </p>
         </div>

From 94ff88947c446201530c341937a53b0a36e4d3f0 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 2 Nov 2025 11:35:48 -0500
Subject: [PATCH 4/5] feat(onboarding): added responsive column layout for
 buttons grid, and included reverse properties for next button to sit on top
 in mobile screens

---
 src/pages/Onboarding.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx
index 07f53a9..85c4907 100644
--- a/src/pages/Onboarding.jsx
+++ b/src/pages/Onboarding.jsx
@@ -15,7 +15,7 @@ export default function Onboarding() {
           </p>
         </div>
         {/* button quiz grid */}
-        <div className="grid grid-cols-2 grid-rows-3 gap-y-10 gap-x-14">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:grid-rows-3 md:gap-y-10 md:gap-x-14">
           <Button size="md" color="secondary" label="Sleep" />
           <Button size="md" color="secondary" label="Postpartum Anxiety" />
           <Button size="md" color="secondary" label="Self-Doubt" />
@@ -24,7 +24,7 @@ export default function Onboarding() {
           <Button size="md" color="secondary" label="Gender Bias" />
         </div>
         {/* next and skip buttons */}
-        <div className="flex flex-row gap-8">
+        <div className="flex flex-col-reverse gap-5 md:flex-row md:gap-8">
           <Button size="sm" color="secondary" label="Skip" />
           <Button size="sm" color="primary" label="Next" />
         </div>

From 35e0997f19d4f0c8a5c6c9e4f0c0fd70bd787cb2 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 2 Nov 2025 16:38:02 -0500
Subject: [PATCH 5/5] fix(onboarding): added more responsive gaps between
 elements, added more font size responsiveness for xs screens at 320px and
 small height screens to avoid overflow

---
 src/pages/Onboarding.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx
index 85c4907..b6c4ff4 100644
--- a/src/pages/Onboarding.jsx
+++ b/src/pages/Onboarding.jsx
@@ -4,10 +4,10 @@ export default function Onboarding() {
   return (
     <div className="flex justify-center items-center h-screen w-screen bg-gradient-to-b from-nyanza to-celeste sm:via-celeste sm:via-50% sm:to-white sm:to-50%">
       {/* quiz card */}
-      <div className="flex flex-col justify-center items-center gap-10 bg-white rounded-[10px] h-[80vh] w-full sm:w-[90vw] md:w-[80vw] lg:w-[70vw] xl:w-[65vw] 2xl:w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
+      <div className="flex flex-col justify-center items-center gap-6 sm:gap-8 md:gap-10 bg-white rounded-[10px] h-[90vh] sm:h-[80vh] w-full sm:w-[90vw] md:w-[80vw] lg:w-[70vw] xl:w-[65vw] 2xl:w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
         {/* title and subtitle */}
-        <div className="flex flex-col gap-3 text-center">
-          <h1 className="text-xl sm:text-2xl lg:text-3xl font-medium">
+        <div className="flex flex-col gap-2 md:gap-3 text-center">
+          <h1 className="text-base sm:text-xl md:text-2xl lg:text-3xl font-medium">
             What are some of your concerns today?
           </h1>
           <p className="text-base sm:text-lg lg:text-2xl font-normal">
@@ -15,7 +15,7 @@ export default function Onboarding() {
           </p>
         </div>
         {/* button quiz grid */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:grid-rows-3 md:gap-y-10 md:gap-x-14">
+        <div className="grid grid-cols-1 gap-4 sm:gap-5 sm:grid-cols-2 md:grid-rows-3 md:gap-y-10 md:gap-x-14">
           <Button size="md" color="secondary" label="Sleep" />
           <Button size="md" color="secondary" label="Postpartum Anxiety" />
           <Button size="md" color="secondary" label="Self-Doubt" />
@@ -24,7 +24,7 @@ export default function Onboarding() {
           <Button size="md" color="secondary" label="Gender Bias" />
         </div>
         {/* next and skip buttons */}
-        <div className="flex flex-col-reverse gap-5 md:flex-row md:gap-8">
+        <div className="flex flex-col-reverse gap-4 sm:gap-5 sm:flex-row md:gap-8">
           <Button size="sm" color="secondary" label="Skip" />
           <Button size="sm" color="primary" label="Next" />
         </div>