From baaed44fdd8285808db40e3e53df7d5e17b4e2c6 Mon Sep 17 00:00:00 2001
From: AngelaZQ1 <zheng.ang@northeastern.edu>
Date: Wed, 7 Feb 2024 16:36:19 -0500
Subject: [PATCH] use placeholder, change select border color

---
 packages/frontend/components/Form/Select.tsx  | 28 ++++++++++---------
 .../frontend/components/Plan/AddPlanModal.tsx |  4 +--
 .../components/Plan/EditPlanModal.tsx         |  4 +--
 .../Plan/PlanConcentrationsSelect.tsx         |  4 +--
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/components/Form/Select.tsx b/packages/frontend/components/Form/Select.tsx
index cb9806404..6aeefa3d4 100644
--- a/packages/frontend/components/Form/Select.tsx
+++ b/packages/frontend/components/Form/Select.tsx
@@ -25,8 +25,8 @@ type PlanSelectProps = {
   /** Are the field values numbers. */
   isNumeric?: boolean;
   isSearchable?: boolean;
-  /** An option in the select dropdown that indicates "no selection". */
-  noValueOptionLabel?: string;
+  /** The default text shown in the input box. */
+  placeholder?: string;
   /** Fuzzy options to use */
   useFuzzySearch?: boolean;
 };
@@ -41,7 +41,7 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
   rules,
   isNumeric,
   isSearchable,
-  noValueOptionLabel,
+  placeholder,
   useFuzzySearch,
 }) => {
   const filterOptions = useFuzzySearch
@@ -73,12 +73,6 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
     label: val,
   }));
 
-  let noValueOption;
-  if (noValueOptionLabel) {
-    noValueOption = { value: null, label: noValueOptionLabel };
-    selectOptions.unshift(noValueOption);
-  }
-
   const onChange = (option: any) => {
     let val = option ? option.value : null;
     onChangeSideEffect && onChangeSideEffect(val);
@@ -94,9 +88,16 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
   if (isNumeric) {
     selectedValue = value ? value.toString() : null;
   }
-  const selectedOption =
-    selectOptions.find((option: any) => option.value === selectedValue) ??
-    noValueOption;
+  const selectedOption = selectOptions.find(
+    (option: any) => option.value === selectedValue
+  );
+
+  const styles = {
+    control: (baseStyles: any, state: { isFocused: any }) => ({
+      ...baseStyles,
+      borderColor: state.isFocused ? "neutral.200" : "neutral.100",
+    }),
+  };
 
   return (
     <FormControl isInvalid={error != null}>
@@ -109,11 +110,12 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
         {label}
       </FormLabel>
       <Select
+        styles={styles}
         options={selectOptions}
         onChange={onChange}
         value={selectedOption}
         isSearchable={isSearchable}
-        defaultValue={noValueOption}
+        placeholder={placeholder}
         filterOption={filterOptions}
         {...fieldRest}
       />
diff --git a/packages/frontend/components/Plan/AddPlanModal.tsx b/packages/frontend/components/Plan/AddPlanModal.tsx
index be612eed9..7f6163847 100644
--- a/packages/frontend/components/Plan/AddPlanModal.tsx
+++ b/packages/frontend/components/Plan/AddPlanModal.tsx
@@ -199,7 +199,7 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                   <>
                     <PlanSelect
                       label="Catalog Year"
-                      noValueOptionLabel="Select a Catalog Year"
+                      placeholder="Select a Catalog Year"
                       name="catalogYear"
                       control={control}
                       options={extractSupportedMajorYears(supportedMajorsData)}
@@ -232,7 +232,7 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                     />
                     <PlanSelect
                       label="Major"
-                      noValueOptionLabel="Select a Major"
+                      placeholder="Select a Major"
                       name="major"
                       control={control}
                       options={extractSupportedMajorNames(
diff --git a/packages/frontend/components/Plan/EditPlanModal.tsx b/packages/frontend/components/Plan/EditPlanModal.tsx
index 5cd524e38..9a6189aa5 100644
--- a/packages/frontend/components/Plan/EditPlanModal.tsx
+++ b/packages/frontend/components/Plan/EditPlanModal.tsx
@@ -225,7 +225,7 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                   <>
                     <PlanSelect
                       label="Catalog Year"
-                      noValueOptionLabel="Select a Catalog Year"
+                      placeholder="Select a Catalog Year"
                       name="catalogYear"
                       control={control}
                       options={extractSupportedMajorYears(supportedMajorsData)}
@@ -256,7 +256,7 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                     />
                     <PlanSelect
                       label="Major"
-                      noValueOptionLabel="Select a Major"
+                      placeholder="Select a Major"
                       name="major"
                       control={control}
                       options={extractSupportedMajorNames(
diff --git a/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx b/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx
index df610b93b..3c6f5adf5 100644
--- a/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx
+++ b/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx
@@ -24,8 +24,8 @@ export const PlanConcentrationsSelect: React.FC<
 
   return (
     <PlanSelect
-      label="Concentrations"
-      noValueOptionLabel="Select a Concentration"
+      label="Concentration"
+      placeholder="Select a Concentration"
       name="concentration"
       options={supportedMajor.concentrations}
       control={control}