From ce443d88df1dd07a1036fe80fbca8b3404fb5fbe Mon Sep 17 00:00:00 2001
From: iLevyTate <78818969+iLevyTate@users.noreply.github.com>
Date: Thu, 3 Aug 2023 15:39:10 -0400
Subject: [PATCH 1/5] Added UX hints plus directions

---
 frontend/src/routes/create-goals/+page.svelte | 135 +++++++++---------
 1 file changed, 64 insertions(+), 71 deletions(-)

diff --git a/frontend/src/routes/create-goals/+page.svelte b/frontend/src/routes/create-goals/+page.svelte
index 8af347c1..1ec3732f 100644
--- a/frontend/src/routes/create-goals/+page.svelte
+++ b/frontend/src/routes/create-goals/+page.svelte
@@ -52,14 +52,16 @@
 </script>
 
 <div class="page-fade-in">
+  <div class="divider" />
+
   <div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">
     <div class="mb-5">
-      <label class="block text-xl rounded-xl font-bold mb-2" for="goal">Goal</label>
+      <label class="block text-xl font-bold mb-2" for="goal">Goal</label>
       <input
-        class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+        class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
         id="goal"
         type="text"
-        placeholder="What's your SMART Goal? e.q. Exercise"
+        placeholder="What's your SMART Goal?"
         bind:value={goal.goal}
       />
       <ErrorMessage
@@ -69,7 +71,7 @@
       />
 
       <div class="mt-3 flex flex-col items-left">
-        <button id="generate" class="btn rounded-xl btn-primary">Generate</button>
+        <button id="generate" class="btn btn-primary">Generate</button>
         {#if loadingGenerate}
           <div class="mt-3 flex justify-center items-center">
             <span class="loading loading-infinity loading-md" />
@@ -88,13 +90,13 @@
               id="specific"
               class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
               type="text"
-              placeholder="AchievAIm's Specific suggestion. e.g. 15 min daily exercise."
+              placeholder="AchievAIm's Specific suggestion"
               bind:value={goal.specific}
             />
             <label
               class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
+              <input type="checkbox" class="toggle toggle-primary" />
               <div class="dropdown dropdown-end">
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
@@ -111,10 +113,9 @@
                     />
                   </svg>
                   <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
+                    <div class="card-body">
+                      <h2 class="card-title">You needed more info?</h2>
+                      <p>Here is a description!</p>
                     </div>
                   </button>
                 </button>
@@ -135,13 +136,13 @@
               id="measurable"
               class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
               type="text"
-              placeholder="AchievAIm's Measurable suggestion. e.q. Track consecutive days."
+              placeholder="AchievAIm's Measurable suggestion"
               bind:value={goal.measurable}
             />
             <label
               class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
+              <input type="checkbox" class="toggle toggle-primary" />
               <div class="dropdown dropdown-end">
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
@@ -158,12 +159,11 @@
                     />
                   </svg>
                   <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
-                    </div></button
-                  >
+                    <div class="card-body">
+                      <h2 class="card-title">You needed more info?</h2>
+                      <p>Here is a description!</p>
+                    </div>
+                  </button>
                 </button>
               </div>
             </label>
@@ -182,13 +182,13 @@
               id="attainable"
               class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
               type="text"
-              placeholder="AchievAIm's Attainable suggestion. e.g. Find enjoyable activities."
+              placeholder="AchievAIm's Attainable suggestion"
               bind:value={goal.attainable}
             />
             <label
               class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
+              <input type="checkbox" class="toggle toggle-primary" />
               <div class="dropdown dropdown-end">
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
@@ -205,10 +205,9 @@
                     />
                   </svg>
                   <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
+                    <div class="card-body">
+                      <h2 class="card-title">You needed more info?</h2>
+                      <p>Here is a description!</p>
                     </div>
                   </button>
                 </button>
@@ -229,13 +228,13 @@
               id="relevant"
               class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
               type="text"
-              placeholder="AchievAIm's Relevant suggestion. e.g. Improve fitness."
+              placeholder="AchievAIm's Relevant suggestion"
               bind:value={goal.relevant}
             />
             <label
               class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
+              <input type="checkbox" class="toggle toggle-primary" />
               <div class="dropdown dropdown-end">
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
@@ -252,10 +251,9 @@
                     />
                   </svg>
                   <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
+                    <div class="card-body">
+                      <h2 class="card-title">You needed more info?</h2>
+                      <p>Here is a description!</p>
                     </div>
                   </button>
                 </button>
@@ -276,13 +274,13 @@
               id="time-bound"
               class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
               type="text"
-              placeholder="AchievAIm's Time-Bound suggestion. e.g. 30 consecutive days."
+              placeholder="AchievAIm's Time-Bound suggestion"
               bind:value={goal.time_bound}
             />
             <label
               class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
+              <input type="checkbox" class="toggle toggle-primary" />
               <div class="dropdown dropdown-end">
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
@@ -299,10 +297,9 @@
                     />
                   </svg>
                   <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Toggle left to unsave.</p>
-                      <p>Generate Button above to give you another suggestion.</p>
-                      <p>Toggle Right to Save.</p>
+                    <div class="card-body">
+                      <h2 class="card-title">You needed more info?</h2>
+                      <p>Here is a description!</p>
                     </div>
                   </button>
                 </button>
@@ -330,36 +327,30 @@
                       bind:checked={selectAll}
                       on:click={toggleAll}
                     />
-                    <label
-                      class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-                    >
-                      <div class="dropdown dropdown-end">
-                        <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            class="w-4 h-4 stroke-current"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                            />
-                          </svg>
-                          <button
-                            class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64"
-                          >
-                            <div class="card-body text-left">
-                              <p>These are the days of the week your goals repeat</p>
-                              <p>Toggle right to select all</p>
-                            </div>
-                          </button></button
-                        >
+                  </label>
+                  <div class="dropdown dropdown-end">
+                    <button tabindex="-1" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        class="w-4 h-4 stroke-current"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                    </button>
+                    <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                      <div class="card-body">
+                        <h2 class="card-title">You needed more info?</h2>
+                        <p>Here is a description!</p>
                       </div>
-                    </label></label
-                  >
+                    </div>
+                  </div>
                 </div>
               </div>
               <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
@@ -385,7 +376,7 @@
             <label
               class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
+              <input type="checkbox" class="toggle toggle-primary" />
               <div class="dropdown dropdown-end">
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
@@ -402,8 +393,9 @@
                     />
                   </svg>
                   <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Set the alert time for your SMART goals for selected days above.</p>
+                    <div class="card-body">
+                      <h2 class="card-title">You needed more info?</h2>
+                      <p>Here is a description!</p>
                     </div>
                   </button>
                 </button>
@@ -429,7 +421,7 @@
             <label
               class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
             >
-              <input type="checkbox" class="toggle toggle-primary" checked />
+              <input type="checkbox" class="toggle toggle-primary" />
               <div class="dropdown dropdown-end">
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
@@ -446,8 +438,9 @@
                     />
                   </svg>
                   <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body text-left">
-                      <p>Choose the Date for Completing Your SMART Goal.</p>
+                    <div class="card-body">
+                      <h2 class="card-title">You needed more info?</h2>
+                      <p>Here is a description!</p>
                     </div>
                   </button>
                 </button>

From 5f3a65d34a29a78afde30a27171bc8c5ced55143 Mon Sep 17 00:00:00 2001
From: iLevyTate <78818969+iLevyTate@users.noreply.github.com>
Date: Thu, 3 Aug 2023 15:39:57 -0400
Subject: [PATCH 2/5] Replicated layout for display page

---
 .../src/routes/testingcomponents/+page.svelte | 254 +++++++++++++-----
 1 file changed, 180 insertions(+), 74 deletions(-)

diff --git a/frontend/src/routes/testingcomponents/+page.svelte b/frontend/src/routes/testingcomponents/+page.svelte
index 2934920c..840bef0e 100644
--- a/frontend/src/routes/testingcomponents/+page.svelte
+++ b/frontend/src/routes/testingcomponents/+page.svelte
@@ -1,85 +1,191 @@
 <script lang="ts">
-  import type { Goals } from '$lib/types';
-  import { goto } from '$app/navigation';
+  import DaysOfWeekSelector from '$lib/components/DaysOfWeekSelector.svelte';
 
-  let goals: Goals = {
-    active: [
-      {
-        name: 'Goal 1',
-        details: 'S.M.A.R.T details here',
-        date: new Date('2024-01-01T10:00:00'),
-        days: [10],
-        editing: false
-      }
-    ],
-    completed: [
-      {
-        name: 'Goal 2',
-        details: 'S.M.A.R.T details here',
-        date: new Date('2024-01-02T14:00:00'),
-        days: [15],
-        editing: false
-      }
-    ]
+  import { page } from '$app/stores';
+  let goal: GoalCreate = {
+    days_of_week: {
+      monday: false,
+      tuesday: false,
+      wednesday: false,
+      thursday: false,
+      friday: false,
+      saturday: false,
+      sunday: false
+    }
   };
-
-  function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-  }
 </script>
 
-<div class="flex flex-col items-center justify-center h-screen">
-  <div
-    class="flex flex-wrap -mx-2 overflow-hidden sm:-mx-3 md:-mx-3 lg:-mx-4 xl:-mx-4 justify-center"
-  >
-    {#each Object.entries(goals) as [category, value]}
-      <div
-        class="my-2 px-2 w-full overflow-hidden sm:my-2 sm:px-2 sm:w-1/2 md:my-3 md:px-3 md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3 xl:my-4 xl:px-4 xl:w-1/3"
-      >
-        <div class="text-lg font-bold mb-4">{capitalizeFirstLetter(category)}</div>
-        {#each value as goal (goal.name)}
-          <div class="rounded-lg p-6 mb-4 bg-white shadow-sm border border-gray-200 space-y-4">
-            <button
-              class="text-neutral font-bold text-xl mb-2 cursor-pointer"
-              on:click={() => goto(`/creategoals/${goal.name}`)}
+<div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">
+  <div class="mb-5">
+    <div class="card w-full">
+      <figure>
+        <figcaption class="p-4 card-body flex flex-col">
+          <div class="flex items-center mb-2">
+            <a
+              href="/edit-goal"
+              aria-label="edit-goal"
+              title="Edit Goal"
+              class="{$page.url.pathname === '/edit-goal'
+                ? 'rounded bg-white'
+                : ''} block text-xl font-bold mr-2"
             >
-              {goal.name}
-            </button>
-            <div class="text-base text-gray-900 font-bold my-2">S.M.A.R.T</div>
-            <p class="text-gray-900"><strong>Specific:</strong> {goal.specific}</p>
-            <p class="text-gray-900"><strong>Measurable:</strong> {goal.measurable}</p>
-            <p class="text-gray-900"><strong>Attainable:</strong> {goal.attainable}</p>
-            <p class="text-gray-900"><strong>Relevant:</strong> {goal.relevant}</p>
-            <p class="text-gray-900"><strong>Time-Bound:</strong> {goal.timeBound}</p>
-            <div class="grid grid-cols-2 gap-2 text-sm text-gray-500 mt-4">
-              <div><strong>Date:</strong></div>
-              <div>{goal.date}</div>
-              <div><strong>Days:</strong></div>
-              <div>
-                <div class="flex flex-row">
-                  {#each goal.days as day}<span class="mx-1">{day}</span>{/each}
-                </div>
-              </div>
-              <div><strong>Time:</strong></div>
-              <div>{goal.time}</div>
+              Goal
+            </a>
+            <div class="flex items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                class="w-4 h-4 stroke-current text-info mr-1"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+                />
+              </svg>
+              <span class="text-xs text-gray-500 italic">Click Goal to edit</span>
             </div>
           </div>
-        {/each}
-      </div>
-    {/each}
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          >
+            What's your SMART Goal?
+          </div>
+        </figcaption>
+      </figure>
+    </div>
   </div>
-</div>
 
-<style>
-  @keyframes fade-in-down {
-    0% {
-      opacity: 0;
-      transform: translate3d(0, -50%, 0);
-    }
+  <!-- Specific card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Specific</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Specific suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
 
-    100% {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-    }
-  }
-</style>
+  <!-- Measurable card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Measurable</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Measurable suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <!-- Attainable card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Attainable</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Attainable suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <!-- Relevant card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Relevant</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Relevant suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <!-- Time-Bound card -->
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Time-Bound</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <div
+            class="border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          >
+            AchievAIm's Time-Bound suggestion
+          </div>
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <div class="mt-3 flex flex-col items-center">
+    <div class="card w-full">
+      <figure>
+        <figcaption class="p-4 card-body flex flex-col items-center">
+          {#if goal.days_of_week}
+            <div class="flex justify-between items-center w-full">
+              <h2 class="card-title mb-2">Days</h2>
+            </div>
+            <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
+          {/if}
+        </figcaption>
+      </figure>
+    </div>
+  </div>
+
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-row items-center">
+        <h2 class="card-title mb-2">Date</h2>
+        <div class="flex-grow flex items-center relative">
+          <input
+            class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            id="goal-date"
+            type="date"
+            bind:value={goal.date_for_achievement}
+            aria-describedby="date-description"
+            readonly
+          />
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <div class="card w-full">
+    <figure>
+      <figcaption class="p-4 card-body flex flex-row items-center">
+        <h2 class="card-title mb-2">Time</h2>
+        <div class="flex-grow flex items-center">
+          <input
+            class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            id="goal-time"
+            type="time"
+            bind:value={goal.time_of_day}
+            aria-describedby="time-description"
+            readonly
+          />
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+</div>

From 45cd7b78f480842f4dbf6c01d86ecf55302d4085 Mon Sep 17 00:00:00 2001
From: iLevyTate <78818969+iLevyTate@users.noreply.github.com>
Date: Fri, 4 Aug 2023 14:14:22 -0400
Subject: [PATCH 3/5] To fix temp error

---
 frontend/src/routes/create-goals/+page.svelte | 700 +++++++++---------
 1 file changed, 369 insertions(+), 331 deletions(-)

diff --git a/frontend/src/routes/create-goals/+page.svelte b/frontend/src/routes/create-goals/+page.svelte
index 1ec3732f..7f0353f8 100644
--- a/frontend/src/routes/create-goals/+page.svelte
+++ b/frontend/src/routes/create-goals/+page.svelte
@@ -17,7 +17,7 @@
   };
 
   let selectAll = false;
-  let loadingGenerate = false;
+
   let goalError = false;
 
   const toggleAll = () => {
@@ -49,19 +49,64 @@
       console.log(error);
     }
   }
+
+  let loadingGenerate = false;
+
+  function handleClick() {
+    loadingGenerate = true;
+
+    // Simulate an async operation
+    setTimeout(() => {
+      loadingGenerate = false;
+    }, 2000);
+  }
+
+  import { blur } from 'svelte/transition';
+  let isOpen = false;
+
+  function toggleDropdown() {
+    isOpen = !isOpen;
+  }
 </script>
 
 <div class="page-fade-in">
-  <div class="divider" />
-
   <div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">
-    <div class="mb-5">
-      <label class="block text-xl font-bold mb-2" for="goal">Goal</label>
+    <div class="card w-full">
+      <div class="mb-5 flex items-center">
+        <!-- Flex container for alignment -->
+        <label class="block text-xl rounded-xl font-bold mb-2" for="goal">Goal</label>
+        <div class="dropdown dropdown-right">
+          <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              class="w-4 h-4 stroke-primary"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </button>
+          <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+            <!-- Removed button tag wrapping div -->
+            <div class="card-body text-primary text-left">
+              <p>Toggle left to unsave.</p>
+              <p>Generate Button above to give you another suggestion.</p>
+              <p>Toggle Right to Save.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Flex container ends here -->
       <input
-        class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+        class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
         id="goal"
         type="text"
-        placeholder="What's your SMART Goal?"
+        placeholder="What's your SMART Goal? e.g. Exercise"
         bind:value={goal.goal}
       />
       <ErrorMessage
@@ -71,7 +116,7 @@
       />
 
       <div class="mt-3 flex flex-col items-left">
-        <button id="generate" class="btn btn-primary">Generate</button>
+        <button id="generate" class="btn btn-primary" on:click={handleClick}>Generate</button>
         {#if loadingGenerate}
           <div class="mt-3 flex justify-center items-center">
             <span class="loading loading-infinity loading-md" />
@@ -81,309 +126,307 @@
     </div>
 
     <!-- Specific card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Specific</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="specific"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Specific suggestion"
-              bind:value={goal.specific}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+    <div class="card w-full p-4 card-body flex flex-col">
+      <h2 class="card-title mb-2">Specific</h2>
+      <div class="flex flex-col md:flex-row w-full">
+        <input
+          id="specific"
+          class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          type="text"
+          placeholder="AchievAIm's Specific suggestion. e.g. 15 min daily exercise."
+          bind:value={goal.specific}
+        />
+        <label
+          class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+        >
+          <input type="checkbox" class="toggle toggle-primary" />
+          <div class="dropdown dropdown-end">
+            <button
+              tabindex="0"
+              class="btn btn-circle btn-ghost btn-xs text-info m-3"
+              on:click={toggleDropdown}
             >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <h2 class="card-title">You needed more info?</h2>
-                      <p>Here is a description!</p>
-                    </div>
-                  </button>
-                </button>
-              </div>
-            </label>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                class="w-4 h-4 stroke-primary"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              {#if isOpen}
+                <div
+                  transition:blur
+                  class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64 absolute"
+                >
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
+                </div>
+              {/if}
+            </button>
           </div>
-        </figcaption>
-      </figure>
+        </label>
+      </div>
     </div>
 
     <!-- Measurable card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Measurable</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="measurable"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Measurable suggestion"
-              bind:value={goal.measurable}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <h2 class="card-title">You needed more info?</h2>
-                      <p>Here is a description!</p>
-                    </div>
-                  </button>
-                </button>
-              </div>
-            </label>
+    <div class="card w-full p-4 card-body flex flex-col">
+      <h2 class="card-title mb-2">Measurable</h2>
+      <div class="flex flex-col md:flex-row w-full">
+        <input
+          id="measurable"
+          class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+          type="text"
+          placeholder="AchievAIm's Measurable suggestion. e.q. Track consecutive days."
+          bind:value={goal.measurable}
+        />
+        <label
+          class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+        >
+          <input type="checkbox" class="toggle toggle-primary" />
+          <div class="dropdown dropdown-end">
+            <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                class="w-4 h-4 stroke-primary"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                <div class="card-body text-primary text-left">
+                  <p>Toggle left to unsave.</p>
+                  <p>Generate Button above to give you another suggestion.</p>
+                  <p>Toggle Right to Save.</p>
+                </div>
+              </button>
+            </button>
           </div>
-        </figcaption>
-      </figure>
-    </div>
+        </label>
+      </div>
 
-    <!-- Attainable card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Attainable</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="attainable"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Attainable suggestion"
-              bind:value={goal.attainable}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <h2 class="card-title">You needed more info?</h2>
-                      <p>Here is a description!</p>
-                    </div>
-                  </button>
+      <!-- Attainable card -->
+      <div class="card w-full p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Attainable</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <input
+            id="attainable"
+            class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+            type="text"
+            placeholder="AchievAIm's Attainable suggestion. e.g. Find enjoyable activities."
+            bind:value={goal.attainable}
+          />
+          <label
+            class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+          >
+            <input type="checkbox" class="toggle toggle-primary" />
+            <div class="dropdown dropdown-end">
+              <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="w-4 h-4 stroke-primary"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
                 </button>
-              </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+              </button>
+            </div>
+          </label>
+        </div>
+      </div>
 
-    <!-- Relevant card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Relevant</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="relevant"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Relevant suggestion"
-              bind:value={goal.relevant}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <h2 class="card-title">You needed more info?</h2>
-                      <p>Here is a description!</p>
-                    </div>
-                  </button>
+      <!-- Relevant card -->
+      <div class="card w-full p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Relevant</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <input
+            id="relevant"
+            class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+            type="text"
+            placeholder="AchievAIm's Relevant suggestion. e.g. Improve fitness."
+            bind:value={goal.relevant}
+          />
+          <label
+            class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+          >
+            <input type="checkbox" class="toggle toggle-primary" />
+            <div class="dropdown dropdown-end">
+              <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="w-4 h-4 stroke-primary"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
                 </button>
-              </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+              </button>
+            </div>
+          </label>
+        </div>
+      </div>
 
-    <!-- Time-Bound card -->
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-col">
-          <h2 class="card-title mb-2">Time-Bound</h2>
-          <div class="flex flex-col md:flex-row w-full">
-            <input
-              id="time-bound"
-              class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
-              type="text"
-              placeholder="AchievAIm's Time-Bound suggestion"
-              bind:value={goal.time_bound}
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <h2 class="card-title">You needed more info?</h2>
-                      <p>Here is a description!</p>
-                    </div>
-                  </button>
+      <!-- Time-Bound card -->
+      <div class="card w-full p-4 card-body flex flex-col">
+        <h2 class="card-title mb-2">Time-Bound</h2>
+        <div class="flex flex-col md:flex-row w-full">
+          <input
+            id="time-bound"
+            class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
+            type="text"
+            placeholder="AchievAIm's Time-Bound suggestion. e.g. 30 consecutive days."
+            bind:value={goal.time_bound}
+          />
+          <label
+            class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
+          >
+            <input type="checkbox" class="toggle toggle-primary" />
+            <div class="dropdown dropdown-end">
+              <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="w-4 h-4 stroke-primary"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                  <div class="card-body text-primary text-left">
+                    <p>Toggle left to unsave.</p>
+                    <p>Generate Button above to give you another suggestion.</p>
+                    <p>Toggle Right to Save.</p>
+                  </div>
                 </button>
-              </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+              </button>
+            </div>
+          </label>
+        </div>
+      </div>
 
-    <div class="mt-3 flex flex-col items-center">
-      <div class="card w-full">
-        <figure>
-          <figcaption class="p-4 card-body flex flex-col items-center">
-            {#if goal.days_of_week}
-              <div class="flex justify-between items-center w-full">
-                <h2 class="card-title mb-2">Days</h2>
+      <div class="mt-3 flex flex-col items-center">
+        <div class="card w-full">
+          <figure>
+            <figcaption class="p-4 card-body flex flex-col items-center">
+              {#if goal.days_of_week}
+                <div class="flex justify-between items-center w-full">
+                  <h2 class="card-title mb-2">Days</h2>
 
-                <div class="flex items-center">
-                  <label for="selectAll" class="cursor-pointer label flex items-center">
-                    <input
-                      type="checkbox"
-                      class="toggle toggle-primary"
-                      id="selectAll"
-                      bind:checked={selectAll}
-                      on:click={toggleAll}
-                    />
-                  </label>
-                  <div class="dropdown dropdown-end">
-                    <button tabindex="-1" class="btn btn-circle btn-ghost btn-xs text-info m-3">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        class="w-4 h-4 stroke-current"
+                  <div class="flex items-center">
+                    <label for="selectAll" class="cursor-pointer label flex items-center">
+                      <input
+                        type="checkbox"
+                        class="toggle toggle-primary"
+                        id="selectAll"
+                        bind:checked={selectAll}
+                        on:click={toggleAll}
+                      />
+                      <label
+                        class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
                       >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                      </svg>
-                    </button>
-                    <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                      <div class="card-body">
-                        <h2 class="card-title">You needed more info?</h2>
-                        <p>Here is a description!</p>
-                      </div>
-                    </div>
+                        <div class="dropdown dropdown-end">
+                          <button
+                            tabindex="0"
+                            class="btn btn-circle btn-ghost btn-xs text-info m-3"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              class="w-4 h-4 stroke-primary"
+                            >
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                              />
+                            </svg>
+                            <button
+                              class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64"
+                            >
+                              <div class="card-body text-primary text-left">
+                                <p>These are the days of the week your goals repeat</p>
+                                <p>Toggle right to select all</p>
+                              </div>
+                            </button></button
+                          >
+                        </div>
+                      </label></label
+                    >
                   </div>
                 </div>
-              </div>
-              <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
-            {/if}
-          </figcaption>
-        </figure>
+                <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
+              {/if}
+            </figcaption>
+          </figure>
+        </div>
       </div>
-    </div>
 
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-row items-center">
-          <h2 class="card-title mb-2">Time</h2>
-
-          <div class="flex-grow flex items-center">
-            <input
-              class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="goal-time"
-              type="time"
-              bind:value={goal.time_of_day}
-              aria-describedby="time-description"
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
+      <div class="card w-full">
+        <figure>
+          <figcaption class="p-4 card-body flex flex-row items-center">
+            <h2 class="card-title mb-2">Time</h2>
+            <div class="flex-grow flex items-center">
+              <input
+                class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+                id="goal-time"
+                type="time"
+                bind:value={goal.time_of_day}
+                aria-describedby="time-description"
+              />
+              <div class="dropdown dropdown-end md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end">
+                <!-- Replaced label tag with div -->
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
+                    class="w-4 h-4 stroke-primary"
                   >
                     <path
                       stroke-linecap="round"
@@ -392,43 +435,39 @@
                       d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <h2 class="card-title">You needed more info?</h2>
-                      <p>Here is a description!</p>
+                  <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                    <!-- Removed button tag wrapping div -->
+                    <div class="card-body text-primary text-left">
+                      <p>Set the alert time for your SMART goals for selected days above.</p>
                     </div>
-                  </button>
+                  </div>
                 </button>
               </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
+            </div>
+          </figcaption>
+        </figure>
+      </div>
 
-    <div class="card w-full">
-      <figure>
-        <figcaption class="p-4 card-body flex flex-row items-center">
-          <h2 class="card-title mb-2">Date</h2>
-          <div class="flex-grow flex items-center relative">
-            <input
-              class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="goal-date"
-              type="date"
-              bind:value={goal.date_for_achievement}
-              aria-describedby="date-description"
-            />
-            <label
-              class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
-            >
-              <input type="checkbox" class="toggle toggle-primary" />
-              <div class="dropdown dropdown-end">
+      <div class="card w-full">
+        <figure>
+          <figcaption class="p-4 card-body flex flex-row items-center">
+            <h2 class="card-title mb-2">Date</h2>
+            <div class="flex-grow flex items-center relative">
+              <input
+                class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+                id="goal-date"
+                type="date"
+                bind:value={goal.date_for_achievement}
+                aria-describedby="date-description"
+              />
+              <div class="dropdown dropdown-end md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end">
+                <!-- Replaced label tag with div -->
                 <button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
-                    class="w-4 h-4 stroke-current"
+                    class="w-4 h-4 stroke-primary"
                   >
                     <path
                       stroke-linecap="round"
@@ -437,27 +476,26 @@
                       d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
-                  <button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <h2 class="card-title">You needed more info?</h2>
-                      <p>Here is a description!</p>
+                  <div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
+                    <!-- Removed button tag wrapping div -->
+                    <div class="card-body text-primary text-left">
+                      <p>Choose the Date for Completing Your SMART Goal.</p>
                     </div>
-                  </button>
+                  </div>
                 </button>
               </div>
-            </label>
-          </div>
-        </figcaption>
-      </figure>
-    </div>
-    <div class="mt-3 flex flex-col items-left">
-      <button class="btn btn-primary" on:click={handleSave}>Save Smart Goal</button>
+            </div>
+          </figcaption>
+        </figure>
+      </div>
+      <div class="mt-3 flex flex-col items-left">
+        <button class="btn btn-primary" on:click={handleSave}>Save Smart Goal</button>
+      </div>
     </div>
   </div>
-</div>
-
-<div class="flex">
-  <div class="divider" />
+  <div class="flex">
+    <div class="divider" />
+  </div>
 </div>
 
 <style>

From b0cd4b50898d398fabb900bfa7c8fa54a610fdc7 Mon Sep 17 00:00:00 2001
From: iLevyTate <78818969+iLevyTate@users.noreply.github.com>
Date: Fri, 4 Aug 2023 14:52:14 -0400
Subject: [PATCH 4/5] update fix script

---
 .../src/routes/testingcomponents/+page.svelte | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/testingcomponents/+page.svelte b/frontend/src/routes/testingcomponents/+page.svelte
index 840bef0e..57d6a778 100644
--- a/frontend/src/routes/testingcomponents/+page.svelte
+++ b/frontend/src/routes/testingcomponents/+page.svelte
@@ -1,8 +1,22 @@
 <script lang="ts">
-  import DaysOfWeekSelector from '$lib/components/DaysOfWeekSelector.svelte';
 
-  import { page } from '$app/stores';
-  let goal: GoalCreate = {
+  type DaysOfWeek = {
+    monday: boolean;
+    tuesday: boolean;
+    wednesday: boolean;
+    thursday: boolean;
+    friday: boolean;
+    saturday: boolean;
+    sunday: boolean;
+  };
+
+  type Goal = {
+    days_of_week: DaysOfWeek;
+    date_for_achievement?: string;
+    time_of_day?: string;
+  };
+
+  let goal: Goal = {
     days_of_week: {
       monday: false,
       tuesday: false,
@@ -13,6 +27,10 @@
       sunday: false
     }
   };
+
+  import DaysOfWeekSelector from '$lib/components/DaysOfWeekSelector.svelte';
+  import { page } from '$app/stores';
+
 </script>
 
 <div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">

From d57fd8712d7dfbf78addfa27837afb1c00919981 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Fri, 4 Aug 2023 18:52:35 +0000
Subject: [PATCH 5/5] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 frontend/src/routes/testingcomponents/+page.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/routes/testingcomponents/+page.svelte b/frontend/src/routes/testingcomponents/+page.svelte
index 57d6a778..34825bf8 100644
--- a/frontend/src/routes/testingcomponents/+page.svelte
+++ b/frontend/src/routes/testingcomponents/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
   type DaysOfWeek = {
     monday: boolean;
     tuesday: boolean;
@@ -30,7 +29,6 @@
 
   import DaysOfWeekSelector from '$lib/components/DaysOfWeekSelector.svelte';
   import { page } from '$app/stores';
-
 </script>
 
 <div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">