Merge branch 'githru:main' into main

githru · Sep 10, 2024 · 29492b1 · 29492b1
2 parents e199839 + ea3c554
commit 29492b1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 className="author-bar-chart__title">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"