From e5cdf59d08ad9a37acd8bf94332e0e079d62cdda Mon Sep 17 00:00:00 2001
From: Scarlett <scarlett.truong307@gmail.com>
Date: Mon, 18 Nov 2024 13:23:26 -0800
Subject: [PATCH] feat: CE-1231 add * for required fields

---
 .../authorization-outcome/authorization-outcome.tsx  |  7 ++++++-
 .../outcomes/ceeb/ceeb-decision/decision-form.tsx    | 12 +++++++++---
 .../outcomes/oucome-by-animal/create-outcome.tsx     |  4 +++-
 .../outcomes/oucome-by-animal/edit-outcome.tsx       |  4 +++-
 frontend/src/assets/sass/complaint.scss              | 11 +++++++++++
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx
index 1f1ae89a6..6218dfbd9 100644
--- a/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx
+++ b/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx
@@ -70,7 +70,12 @@ export const AuthoizationOutcome: FC = () => {
       id="ceeb-authorization"
     >
       <div className="comp-details-section-header">
-        <h3>Authorization</h3>
+        <div id="ceeb-authorization-header">
+          <h3>
+            Authorization<span className="required-ind">*</span>
+          </h3>
+          <div className="legend">One of these is required</div>
+        </div>
         {!editable && (
           <div className="comp-details-section-header-actions">
             <Button
diff --git a/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx b/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx
index 3dad31d95..b62287edd 100644
--- a/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx
+++ b/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx
@@ -319,7 +319,9 @@ export const DecisionForm: FC<props> = ({
           className="comp-details-form-row"
           id="decision-schedule-sector-type"
         >
-          <label htmlFor="outcome-decision-schedule-secto">WDR schedule/IPM sector type</label>
+          <label htmlFor="outcome-decision-schedule-secto">
+            WDR schedule/IPM sector type<span className="required-ind">*</span>
+          </label>
           <div className="comp-details-input full-width">
             <CompSelect
               id="outcome-decision-schedule-sector"
@@ -342,7 +344,9 @@ export const DecisionForm: FC<props> = ({
           className="comp-details-form-row"
           id="decision-sector-category"
         >
-          <label htmlFor="outcome-decision-sector-category">Sector/Category</label>
+          <label htmlFor="outcome-decision-sector-category">
+            Sector/Category<span className="required-ind">*</span>
+          </label>
           <div className="comp-details-input full-width">
             <CompSelect
               id="outcome-decision-sector-category"
@@ -363,7 +367,9 @@ export const DecisionForm: FC<props> = ({
           className="comp-details-form-row"
           id="decision-discharge-type"
         >
-          <label htmlFor="outcome-decision-discharge">Discharge type</label>
+          <label htmlFor="outcome-decision-discharge">
+            Discharge type<span className="required-ind">*</span>
+          </label>
           <div className="comp-details-input full-width">
             <CompSelect
               id="outcome-decision-discharge"
diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx
index 5d4da770f..4f9b22510 100644
--- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx
+++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx
@@ -376,7 +376,9 @@ export const CreateAnimalOutcome: FC<props> = ({ index, assignedOfficer: officer
             </legend>
 
             <div className="comp-details-form-row">
-              <label htmlFor="select-species">Species</label>
+              <label htmlFor="select-species">
+                Species<span className="required-ind">*</span>
+              </label>
               <div className="comp-details-input full-width">
                 <CompSelect
                   id="select-species"
diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx
index 12fd45b8e..3597f53f0 100644
--- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx
+++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx
@@ -369,7 +369,9 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
                 Animal Information
               </legend>
               <div className="comp-details-form-row">
-                <label htmlFor="select-species">Species</label>
+                <label htmlFor="select-species">
+                  Species<span className="required-ind">*</span>
+                </label>
 
                 <CompSelect
                   id="select-species"
diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
index 113951495..641e9c8ae 100644
--- a/frontend/src/assets/sass/complaint.scss
+++ b/frontend/src/assets/sass/complaint.scss
@@ -666,6 +666,17 @@
   .btn {
     font-size: 0.875rem;
   }
+
+  #ceeb-authorization-header {
+    h3 {
+      margin-bottom: 3px;
+    }
+    .legend {
+      color: $gray-500;
+      margin-bottom: 16px;
+      font-size: 14px;
+    }
+  }
 }
 
 .comp-details-section-header-actions {