Fixed dark mode in location modal

COS301-SE-2024 · Sep 27, 2024 · 033cbce · 033cbce
1 parent 18b9549
commit 033cbce
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/frontend/components/LocationAutocomplete/LocationAutocomplete.tsx b/frontend/components/LocationAutocomplete/LocationAutocomplete.tsx
@@ -96,23 +96,45 @@ const LocationAutocomplete: React.FC<LocationAutocompleteProps> = ({
           styles: {
             control: (provided) => ({
               ...provided,
-              backgroundColor: "var(--background)",
-              borderColor: "var(--border)",
+              backgroundColor: "hsl(var(--background))",
+              borderColor: "hsl(var(--border))",
+            }),
+            loadingMessage: (provided) => ({
+              ...provided,
+              backgroundColor: "hsl(var(--background))",
+              borderColor: "hsl(var(--border))",
+            }),
+            noOptionsMessage: (provided) => ({
+              ...provided,
+              backgroundColor: "hsl(var(--background))",
+              borderColor: "hsl(var(--border))",
+            }),
+            menu: (provided) => ({
+              ...provided,
+              backgroundColor: "hsl(var(--background))",
+              borderColor: "hsl(var(--border))",
             }),
             input: (provided) => ({
               ...provided,
-              color: "var(--foreground)",
+              color: "hsl(var(--foreground))",
             }),
             option: (provided, state) => ({
               ...provided,
-              backgroundColor: state.isFocused ? "var(--accent)" : "var(--background)",
-              color: "var(--foreground)",
+              backgroundColor: state.isFocused ? "hsl(var(--accent))" : "hsl(var(--background))",
+              color: "hsl(var(--foreground))",
             }),
             singleValue: (provided) => ({
               ...provided,
-              color: "var(--foreground)",
+              color: "hsl(var(--foreground))",
             }),
           },
+          theme: (theme) => ({
+            ...theme,
+            colors: {
+              ...theme.colors,
+              primary50: '', // Removing the blue flash when clicking 
+            },
+          })
         }}
         autocompletionRequest={{
           componentRestrictions: { country: "za" },
@@ -122,4 +144,4 @@ const LocationAutocomplete: React.FC<LocationAutocompleteProps> = ({
   );
 };
 
-export default LocationAutocomplete;
+export default LocationAutocomplete;