enhance: improved design of invoice creation page with optional/requi…

…red fields (#401) * enhance: improved design of invoice creation page with optional/required fields (#388) * refactor: reformatted create.html --------- Signed-off-by: Trey <[email protected]>
TreyWW · Jun 8, 2024 · a9de56c · a9de56c
1 parent 1a23a0b
commit a9de56c
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/frontend/templates/pages/invoices/create/create.html b/frontend/templates/pages/invoices/create/create.html
@@ -6,7 +6,9 @@
           class="card bg-base-100 p-6 group"
           enctype="multipart/form-data">
         {% csrf_token %}
-        <div class="divider">STEP 1 - DESTINATIONS</div>
+        <div class="divider">
+            STEP 1 - DESTINATIONS <span class="required_star">*</span>
+        </div>
         <div class="my-4 flex w-full flex-col">
             <div class="mb-2 grid grid-cols-2">
                 <h3 class="text-sm text-natural font-semibold ms-3">From</h3>
@@ -18,7 +20,9 @@ <h3 class="text-sm text-natural font-semibold hidden lg:block text-end me-6">To<
                 {% include 'pages/invoices/create/_to_destination.html' %}
             </div>
         </div>
-        <div class="divider my-4">STEP 2 - DATES</div>
+        <div class="divider my-4">
+            STEP 2 - DATES <span class="required_star">*</span>
+        </div>
         <div class="my-4 flex w-full flex-col">
             <div class="w-full gap-4 grid grid-cols-1 lg:grid-cols-2">
                 <div class="input_card">
@@ -61,10 +65,15 @@ <h3 class="text-sm text-natural font-semibold hidden lg:block text-end me-6">To<
                 </div>
             </div>
         </div>
-        <div class="divider my-4">STEP 3 - SERVICES</div>
+        <div class="divider my-4">
+            STEP 3 - SERVICES <span class="required_star">*</span>
+        </div>
         {% component_block "pages:invoices:create:services_table" %}
     {% endcomponent_block %}
-    <div class="divider my-4">STEP 4 - BANK DETAILS [OPTIONAL]</div>
+    <div class="divider my-4">
+        STEP 4 - BANK DETAILS
+        <i class="text-neutral-content">[OPTIONAL]</i>
+    </div>
     <div class="my-4 flex w-full flex-col">
         <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-2 lg:gap-4">
             <div class="input_card">
@@ -119,7 +128,10 @@ <h3 class="text-sm text-natural font-semibold hidden lg:block text-end me-6">To<
             </div>
         </div>
     </div>
-    <div class="divider my-4">STEP 5 - CUSTOM DESIGNS [OPTIONAL]</div>
+    <div class="divider my-4">
+        STEP 5 - CUSTOM DESIGNS
+        <i class="text-neutral-content">[OPTIONAL]</i>
+    </div>
     <div class="my-4 flex w-full flex-col">
         <div class="w-full gap-4 grid grid-cols-1 lg:grid-cols-2">
             <div class="input_card">