Update styling of search bar dropdown

src/components/molecules/SearchBox/index.tsx

@@ -16,7 +16,7 @@ export interface SearchBoxProps {
 
 const SearchBox: React.FC<SearchBoxProps> = ({
   searchText,
-  onSearchTextChange,
+  onSearchTextChange
 }: SearchBoxProps) => {
   return (
     <Dropdown alignRight>
@@ -33,33 +33,40 @@ const SearchBox: React.FC<SearchBoxProps> = ({
         <InputGroup.Append>
           <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />
 
-          <Dropdown.Menu alignRight>
-            <Dropdown.Header>Search types: </Dropdown.Header>
+          <Dropdown.Menu alignRight className={styles.dropdownMenu}>
+            <Dropdown.Header className={styles.dropdownHeader}>
+              Types:{" "}
+            </Dropdown.Header>
             <Dropdown.Item
+              className={styles.dropdownItem}
               onClick={() => onSearchTextChange(`${searchText} type(pdf) `)}
             >
-              type(pdf)
+              PDF
             </Dropdown.Item>
             <Dropdown.Item
+              className={styles.dropdownItem}
               onClick={() => onSearchTextChange(`${searchText} type(video) `)}
             >
-              type(video)
+              Video
             </Dropdown.Item>
             <Dropdown.Item
+              className={styles.dropdownItem}
               onClick={() => onSearchTextChange(`${searchText} type(file) `)}
             >
-              type(file)
+              File
             </Dropdown.Item>
-            <Dropdown.Header>Search tags: </Dropdown.Header>
+            <Dropdown.Header className={styles.dropdownHeader}>Tags: </Dropdown.Header>
             <Dropdown.Item
+              className={styles.dropdownItem}
               onClick={() => onSearchTextChange(`${searchText} tag(new) `)}
             >
-              tag(new)
+              New
             </Dropdown.Item>
             <Dropdown.Item
+              className={styles.dropdownItem}
               onClick={() => onSearchTextChange(`${searchText} tag(my tag) `)}
             >
-              tag(my tag)
+              My Tag
             </Dropdown.Item>
           </Dropdown.Menu>
         </InputGroup.Append>
@@ -73,7 +80,7 @@ const CustomToggle = React.forwardRef(({ onClick }: any, ref: any) => (
     variant="secondary"
     className={styles.searchBarIcon}
     ref={ref}
-    onClick={(e) => {
+    onClick={e => {
       e.preventDefault();
       onClick(e);
     }}

src/components/molecules/SearchBox/style.module.scss

@@ -10,6 +10,7 @@ $button-border: transparentize($gray-300, 1);
   transition: 0.2s background-color;
   -webkit-transition: 0.2s background-color;
   -moz-transition: 0.2s back-ground-color;
+  margin-top: 0.875rem;
 }
 
 .searchBar::placeholder {
@@ -41,6 +42,7 @@ $button-border: transparentize($gray-300, 1);
   transition: 0.2s background-color !important;
   -webkit-transition: 0.2s background-color !important;
   -moz-transition: 0.2s back-ground-color !important;
+  margin-top: 0.875rem;
 }
 
 
@@ -54,3 +56,48 @@ $button-border: transparentize($gray-300, 1);
 	box-shadow: none !important;
 }
 
+.dropdownMenu {
+  border-radius: 0.5rem;
+  margin-top: 0.5rem;
+  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid $gray-300;
+  padding: 0.75rem;
+}
+
+.dropdownHeader {
+  font-weight: 500;
+  font-size: 1rem;
+  color: $black;
+  padding: 0px;
+  margin-bottom: 0.75rem;
+}
+
+.dropdownHeader:not(:first-child) {
+  margin-top: 1rem;
+}
+
+.dropdownItem {
+  border-radius: 0.5rem;
+  background: $gray-100;
+  font-size: 1rem;
+  text-align: center;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+}
+
+.dropdownItem:not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+.dropdownItem:hover {
+  background: $gray-200;
+}
+
+.dropdownItem:active,
+.dropdown:global(.active) {
+  color: $white;
+  font-weight: 500;
+  background: $black;
+}
+