feat(calendar/search-bar): style display select

Author: nicholaschiang

components/calendar/search-bar.module.scss

@@ -22,6 +22,26 @@
     .filterChips {
       flex-wrap: nowrap;
     }
+
+    .select {
+      :global(.mdc-select) {
+        background-color: transparent;
+        border-radius: 0;
+
+        :global(.mdc-select__anchor) {
+          border-radius: 0;
+          width: 90px;
+
+          :global(.mdc-line-ripple::before) {
+            border: none;
+          }
+        }
+      }
+
+      :global(.mdc-select:not(.mdc-select--disabled) .mdc-select__anchor) {
+        background-color: transparent;
+      }
+    }
   }
 
   .right {

components/calendar/search-bar.tsx

@@ -49,8 +49,6 @@ function SearchBar({
             icon={<DownloadIcon />}
           />
         )}
-      </div>
-      <div className={styles.right}>
         <div className={styles.select}>
           <Select
             enhanced
@@ -59,6 +57,8 @@ function SearchBar({
             onChange={(evt) => setDisplay(evt.currentTarget.value as CalendarDisplay)}
           />
         </div>
+      </div>
+      <div className={styles.right}>
         <TextField
           outlined
           placeholder='Search by description'