style: styling branch selector with mui

Author: xxxjinn

packages/view/src/components/BranchSelector/BranchSelector.scss

@@ -1,28 +1,12 @@
 .branch-selector {
   display: flex;
+  flex-direction: row;
+  gap: 1rem;
   align-items: center;
-  font-weight: 600;
-  font-size: 0.825rem;
-  max-width: 315px;
-  width: 100%;
-  user-select: none;
-  margin-right: 12px;
-  position: relative;
+  font-weight: bold;
+  font-size: 1rem;
 
   .select-box {
-    text-align: center;
-    margin-left: 8px;
-    width: 100%;
-    padding: 4px;
-    border: solid 1px rgba(255, 255, 255, 0.22);
-    border-radius: 3px;
-    color: white;
-    background: rgba(255, 255, 255, 0.09);
-    font-weight: 300;
-    font-size: 0.825rem;
-
-    option {
-      background: #212121;
-    }
+    background-color: white;
   }
 }

packages/view/src/components/BranchSelector/BranchSelector.tsx

@@ -1,36 +1,52 @@
-import { type ChangeEventHandler } from "react";
-import "./BranchSelector.scss";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import type { SelectChangeEvent } from "@mui/material/Select";
+import Select from "@mui/material/Select";
 
 import { useGlobalData } from "hooks";
 import { sendFetchAnalyzedDataCommand } from "services";
+import "./BranchSelector.scss";
 
 const BranchSelector = () => {
   const { branchList, selectedBranch, setSelectedBranch, setLoading } = useGlobalData();
 
-  const handleChangeSelect: ChangeEventHandler<HTMLSelectElement> = (e) => {
-    setSelectedBranch(e.target.value);
+  const handleChangeSelect = (event: SelectChangeEvent) => {
+    setSelectedBranch(event.target.value);
     setLoading(true);
-    sendFetchAnalyzedDataCommand(e.target.value);
+    sendFetchAnalyzedDataCommand(event.target.value);
   };
 
   return (
-    <section className="branch-selector">
-      <span>Branches:</span>
-      <select
-        className="select-box"
-        onChange={handleChangeSelect}
-        value={selectedBranch}
+    <div className="branch-selector">
+      <p>Branches: </p>
+      <FormControl
+        sx={{ m: 1, minWidth: 120 }}
+        size="small"
       >
-        {branchList?.map((option) => (
-          <option
-            key={option}
-            value={option}
-          >
-            {option}
-          </option>
-        ))}
-      </select>
-    </section>
+        <InputLabel id="branch-select-small-label">Branches</InputLabel>
+        <Select
+          labelId="branch-select-small-label"
+          id="branch-select-small"
+          value={selectedBranch}
+          label="Branches"
+          onChange={handleChangeSelect}
+          className="select-box"
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          {branchList?.map((option) => (
+            <MenuItem
+              key={option}
+              value={option}
+            >
+              {option}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
   );
 };