test prod build with styles

website/src/components/searchInput/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styles from './styles.module.css';
 
 const SearchInput = ({ value, onChange, placeholder = "Search...", ...props }) => {
   return (
@@ -8,6 +9,7 @@ const SearchInput = ({ value, onChange, placeholder = "Search...", ...props }) =
       onChange={(e) => onChange && onChange(e.target.value)}
       placeholder={placeholder}
       {...props}
+      className={styles.inputContainer}
     />
   );
 };

website/src/components/selectDropdown/index.js

@@ -3,16 +3,23 @@ import Select from "react-select";
 import styles from "./styles.module.css";
 
 export const SelectDropdown = ({ options, value, onChange, isMulti, placeHolder }) => {
+
+
   return (
     <Select
       isMulti={isMulti}
       name="multi-select-dropdown"
       options={options}
       className={styles.selectContainer}
+      classNamePrefix={styles.select}
       value={value}
       onChange={onChange}
       placeholder={placeHolder}
       aria-label="Multi Select Dropdown"
+      unstyled
+      menuIsOpen
+
     />
   );
 };
+

website/src/components/selectDropdown/styles.module.css

@@ -1,3 +1,24 @@
 .selectContainer {
     min-width: 25rem;
+    padding-left: 0 !important;
+    border-radius: 0.3125rem;
+    border: 2px solid var(--navy-200-c-6-ccd-4, #C6CCD4);
+}
+
+.selectContainer .select__menu {
+    background: purple;
+} 
+
+.selectContainer [class$="-control"]  {
+
+}
+
+.selectContainer [class$="-MenuList"] {
+    background: red;
+    margin-top: .275rem;
+    border-radius: 0.3125rem;
+}
+
+.selectContainer [class$="-option"]:hover {
+    background: blue;
 }