From ea3c55454e4f6ab858e1b25975d595c9d05ffc48 Mon Sep 17 00:00:00 2001
From: HyunJin <102955516+xxxjinn@users.noreply.github.com>
Date: Tue, 10 Sep 2024 21:33:43 +0900
Subject: [PATCH] =?UTF-8?q?[view]=20Author=20Bar=20Chart=20select=20box=20?=
 =?UTF-8?q?mui=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20(#711)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: edit author bar chart width (200 to 250)

* style: edit select-box styling

* feat: change select box from select tag to mui select

* style: edit style branch select dropdown (add marginTop)
---
 .../BranchSelector/BranchSelector.tsx         |  1 +
 .../AuthorBarChart/AuthorBarChart.const.ts    |  2 +-
 .../AuthorBarChart/AuthorBarChart.scss        | 21 ++++---
 .../AuthorBarChart/AuthorBarChart.tsx         | 58 ++++++++++++++-----
 4 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/packages/view/src/components/BranchSelector/BranchSelector.tsx b/packages/view/src/components/BranchSelector/BranchSelector.tsx
index ec1999f8..a77e8088 100644
--- a/packages/view/src/components/BranchSelector/BranchSelector.tsx
+++ b/packages/view/src/components/BranchSelector/BranchSelector.tsx
@@ -35,6 +35,7 @@ const BranchSelector = () => {
               sx: {
                 backgroundColor: "#212121",
                 color: "white",
+                marginTop: "1px",
                 "& .MuiMenuItem-root": {
                   backgroundColor: "#212121 !important ",
                   "&:hover": {
diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.const.ts b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.const.ts
index 43f1600b..8757e750 100644
--- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.const.ts
+++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.const.ts
@@ -1,5 +1,5 @@
 export const DIMENSIONS = {
-  width: 200,
+  width: 250,
   height: 200,
   margins: 60,
 };
diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
index 5088aad0..7e6d6959 100644
--- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
+++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
@@ -16,20 +16,19 @@
   width: 100%;
   text-align: right;
 
-  & .select-box {
-    font-size: $font-size-caption;
-    background: transparent;
+  .select-box {
     border: 1px solid $color-white;
-    border-radius: 5px;
-    width: fit-content;
-    padding: 0 10px;
-    height: 25px;
     color: $color-white;
-    outline: none;
-    text-align: center;
+    height: 25px;
+    width: 100px;
+    font-size: $font-size-caption;
+
+    & .MuiSvgIcon-root {
+      color: $color-white;
+    }
 
-    option {
-      background: $color-dark-gray;
+    &.Mui-focused .MuiOutlinedInput-notchedOutline {
+      border: none;
     }
   }
 }
diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
index 29674dc4..978d288a 100644
--- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
+++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
@@ -1,6 +1,8 @@
-import type { ChangeEvent, MouseEvent } from "react";
+import type { MouseEvent } from "react";
 import { useRef, useEffect, useState } from "react";
 import * as d3 from "d3";
+import type { SelectChangeEvent } from "@mui/material";
+import { FormControl, MenuItem, Select } from "@mui/material";
 
 import type { ClusterNode, AuthorInfo } from "types";
 import { useGlobalData } from "hooks";
@@ -207,27 +209,53 @@ const AuthorBarChart = () => {
     setSelectedAuthor,
   ]);
 
-  const handleChangeMetric = (e: ChangeEvent<HTMLSelectElement>): void => {
-    setMetric(e.target.value as MetricType);
+  const handleChangeMetric = (event: SelectChangeEvent): void => {
+    setMetric(event.target.value as MetricType);
   };
 
   return (
     <div className="author-bar-chart__container">
       <p>Author Bar Chart</p>
       <div className="author-bar-chart__header">
-        <select
-          className="select-box"
-          onChange={handleChangeMetric}
+        <FormControl
+          sx={{ m: 1, minWidth: 120 }}
+          size="small"
         >
-          {METRIC_TYPE.map((option) => (
-            <option
-              key={option}
-              value={option}
-            >
-              {option === METRIC_TYPE[0] ? `${option} #` : option}
-            </option>
-          ))}
-        </select>
+          <Select
+            value={metric}
+            className="select-box"
+            onChange={handleChangeMetric}
+            inputProps={{ "aria-label": "Without label" }}
+            MenuProps={{
+              PaperProps: {
+                sx: {
+                  marginTop: "1px",
+                  backgroundColor: "#212121",
+                  color: "white",
+                  "& .MuiMenuItem-root": {
+                    fontSize: "12px",
+                    backgroundColor: "#212121 !important ",
+                    "&:hover": {
+                      backgroundColor: "#333333 !important",
+                    },
+                  },
+                  "& .MuiMenuItem-root.Mui-selected": {
+                    backgroundColor: "#333333 !important",
+                  },
+                },
+              },
+            }}
+          >
+            {METRIC_TYPE.map((option) => (
+              <MenuItem
+                key={option}
+                value={option}
+              >
+                {option === METRIC_TYPE[0] ? `${option} #` : option}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
       </div>
       <svg
         className="author-bar-chart"