From a48eb3ecf80c558a2beada0103950d0940e3e550 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Mon, 22 Apr 2024 12:25:58 -0700
Subject: [PATCH] Implemented design review feedback: * Required field (Name)
 now shows a red asterisk indicating its required * Made error messages less
 round.

---
 frontend/src/components/ScheduleCreation.vue | 3 ++-
 frontend/src/elements/AlertBox.vue           | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index 83dcc527d..1408100b9 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -13,7 +13,7 @@
       </alert-box>
 
       <div class="px-4">
-        <label for="scheduleName">
+        <label for="scheduleName" class="flex-column flex">
           <input
             id="scheduleName"
             type="text"
@@ -23,6 +23,7 @@
             class="place-holder w-full rounded-none border-0 border-b bg-transparent px-0 dark:bg-transparent"
             required
           />
+          <div v-if="!scheduleInput.name" class="content-center text-red-500">*</div>
         </label>
       </div>
       <!-- step 1 -->
diff --git a/frontend/src/elements/AlertBox.vue b/frontend/src/elements/AlertBox.vue
index 50cafe58b..c17754933 100644
--- a/frontend/src/elements/AlertBox.vue
+++ b/frontend/src/elements/AlertBox.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-  class="flex items-center p-2 leading-none text-white shadow-md shadow-black/30 dark:shadow-lg lg:inline-flex lg:rounded-full"
+  class="flex items-center p-2 leading-none text-white shadow-md shadow-black/30 dark:shadow-lg lg:inline-flex lg:rounded-xl"
   role="alert"
   :class="{
     'bg-rose-600 dark:bg-rose-900': scheme === alertSchemes.error,