From 59f88e8611ff592ccd9e6f955b5699edaa9ea3d7 Mon Sep 17 00:00:00 2001
From: iLevyTate <78818969+iLevyTate@users.noreply.github.com>
Date: Thu, 3 Aug 2023 10:34:36 -0400
Subject: [PATCH] Updaded layout

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

diff --git a/frontend/src/routes/create-goals/+page.svelte b/frontend/src/routes/create-goals/+page.svelte
index d941f6cf..8af347c1 100644
--- a/frontend/src/routes/create-goals/+page.svelte
+++ b/frontend/src/routes/create-goals/+page.svelte
@@ -52,16 +52,14 @@
 </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>
+      <label class="block text-xl rounded-xl font-bold mb-2" for="goal">Goal</label>
       <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.q. Exercise"
         bind:value={goal.goal}
       />
       <ErrorMessage
@@ -71,7 +69,7 @@
       />
 
       <div class="mt-3 flex flex-col items-left">
-        <button id="generate" class="btn btn-primary">Generate</button>
+        <button id="generate" class="btn rounded-xl btn-primary">Generate</button>
         {#if loadingGenerate}
           <div class="mt-3 flex justify-center items-center">
             <span class="loading loading-infinity loading-md" />
@@ -90,7 +88,7 @@
               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"
+              placeholder="AchievAIm's Specific suggestion. e.g. 15 min daily exercise."
               bind:value={goal.specific}
             />
             <label
@@ -113,9 +111,10 @@
                     />
                   </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-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>
                 </button>
@@ -136,7 +135,7 @@
               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"
+              placeholder="AchievAIm's Measurable suggestion. e.q. Track consecutive days."
               bind:value={goal.measurable}
             />
             <label
@@ -159,11 +158,12 @@
                     />
                   </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>
+                    <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
+                  >
                 </button>
               </div>
             </label>
@@ -182,7 +182,7 @@
               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"
+              placeholder="AchievAIm's Attainable suggestion. e.g. Find enjoyable activities."
               bind:value={goal.attainable}
             />
             <label
@@ -205,9 +205,10 @@
                     />
                   </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-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>
                 </button>
@@ -228,7 +229,7 @@
               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"
+              placeholder="AchievAIm's Relevant suggestion. e.g. Improve fitness."
               bind:value={goal.relevant}
             />
             <label
@@ -251,9 +252,10 @@
                     />
                   </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-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>
                 </button>
@@ -274,7 +276,7 @@
               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"
+              placeholder="AchievAIm's Time-Bound suggestion. e.g. 30 consecutive days."
               bind:value={goal.time_bound}
             />
             <label
@@ -297,9 +299,10 @@
                     />
                   </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-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>
                 </button>
@@ -327,30 +330,36 @@
                       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"
-                      >
-                        <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>
+                    <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
+                        >
                       </div>
-                    </div>
-                  </div>
+                    </label></label
+                  >
                 </div>
               </div>
               <DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
@@ -393,9 +402,8 @@
                     />
                   </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-body text-left">
+                      <p>Set the alert time for your SMART goals for selected days above.</p>
                     </div>
                   </button>
                 </button>
@@ -438,9 +446,8 @@
                     />
                   </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-body text-left">
+                      <p>Choose the Date for Completing Your SMART Goal.</p>
                     </div>
                   </button>
                 </button>