From e199839427a29827aff0ecca2e418b7dfc495269 Mon Sep 17 00:00:00 2001
From: Chaewon <cw06155@gmail.com>
Date: Tue, 10 Sep 2024 19:09:08 +0900
Subject: [PATCH 1/2] refator tooltips

---
 package-lock.json                             | 12 +++++------
 .../src/components/@common/Author/Author.tsx  |  4 +++-
 .../view/src/components/Detail/Detail.scss    | 21 +------------------
 .../view/src/components/Detail/Detail.tsx     | 13 ++++++++----
 .../AuthorBarChart/AuthorBarChart.scss        | 19 ++++++++---------
 .../AuthorBarChart/AuthorBarChart.tsx         |  2 +-
 6 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ef9d1a0d..971b54cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "githru-vscode-ext",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "githru-vscode-ext",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "license": "MIT",
       "workspaces": [
         "./packages/*"
@@ -28248,7 +28248,7 @@
     },
     "packages/analysis-engine": {
       "name": "@githru-vscode-ext/analysis-engine",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "license": "MIT",
       "dependencies": {
         "@octokit/core": "^4.0.4",
@@ -29650,7 +29650,7 @@
     },
     "packages/view": {
       "name": "@githru-vscode-ext/view",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "license": "MIT",
       "dependencies": {
         "@emotion/react": "^11.13.0",
@@ -29748,9 +29748,9 @@
     },
     "packages/vscode": {
       "name": "githru-vscode-ext",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "dependencies": {
-        "@githru-vscode-ext/analysis-engine": "^0.7.0",
+        "@githru-vscode-ext/analysis-engine": "^0.7.1",
         "@octokit/rest": "^20.0.1",
         "node-fetch": "^3.3.2"
       },
diff --git a/packages/view/src/components/@common/Author/Author.tsx b/packages/view/src/components/@common/Author/Author.tsx
index e454916d..904d6f55 100644
--- a/packages/view/src/components/@common/Author/Author.tsx
+++ b/packages/view/src/components/@common/Author/Author.tsx
@@ -1,7 +1,9 @@
 import { Tooltip, Avatar } from "@mui/material";
-import { GITHUB_URL } from "../../../constants/constants";
+
 import type { AuthorInfo } from "types";
 
+import { GITHUB_URL } from "../../../constants/constants";
+
 const Author = ({ name, src }: AuthorInfo) => {
   return (
     <Tooltip
diff --git a/packages/view/src/components/Detail/Detail.scss b/packages/view/src/components/Detail/Detail.scss
index 6d0e0dea..fe89d8a1 100644
--- a/packages/view/src/components/Detail/Detail.scss
+++ b/packages/view/src/components/Detail/Detail.scss
@@ -100,7 +100,7 @@
         }
       }
 
-      .author-date {
+      .commit-date {
         display: block;
         position: relative;
         white-space: nowrap;
@@ -121,15 +121,8 @@
         }
         &:hover {
           color: var(--color-primary);
-          .commit-id__tooltip {
-            display: inline-block;
-          }
         }
       }
-
-      a:hover {
-        cursor: pointer;
-      }
     }
   }
 }
@@ -147,15 +140,3 @@
   }
 }
 
-.commit-id__tooltip {
-  display: none;
-  position: absolute;
-  background: $color-white;
-  padding: 8px 16px;
-  text-align: center;
-  font-size: $font-size-caption;
-  line-height: 1.5;
-  border-radius: 5px;
-  color: $color-dark-gray;
-  transform: translateY(20%) translateX(-120%);
-}
diff --git a/packages/view/src/components/Detail/Detail.tsx b/packages/view/src/components/Detail/Detail.tsx
index 28b341c9..9ede77b4 100644
--- a/packages/view/src/components/Detail/Detail.tsx
+++ b/packages/view/src/components/Detail/Detail.tsx
@@ -4,8 +4,10 @@ import RemoveCircleRoundedIcon from "@mui/icons-material/RemoveCircleRounded";
 import PersonRoundedIcon from "@mui/icons-material/PersonRounded";
 import CommitRoundedIcon from "@mui/icons-material/CommitRounded";
 import RestorePageRoundedIcon from "@mui/icons-material/RestorePageRounded";
+import { Tooltip } from "@mui/material";
 
 import { Author } from "components/@common/Author";
+import { useGlobalData } from "hooks";
 
 import { useCommitListHide } from "./Detail.hook";
 import { getCommitListDetail } from "./Detail.util";
@@ -13,7 +15,6 @@ import { FIRST_SHOW_NUM } from "./Detail.const";
 import type { DetailProps, DetailSummaryProps, DetailSummaryItem } from "./Detail.type";
 
 import "./Detail.scss";
-import { useGlobalData } from "hooks";
 
 const DetailSummary = ({ commitNodeListInCluster }: DetailSummaryProps) => {
   const { authorLength, fileLength, commitLength, insertions, deletions } = getCommitListDetail({
@@ -80,7 +81,7 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
                     <span className="message">{message}</span>
                   </div>
                 </div>
-                <span className="author-date">
+                <span className="commit-date">
                   {author.names[0]}, {dayjs(commitDate).format("YY. M. DD. a h:mm")}
                 </span>
               </div>
@@ -91,8 +92,12 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
                   tabIndex={0}
                   onKeyDown={handleCommitIdCopy(id)}
                 >
-                  {id.slice(0, 6)}
-                  <span className="commit-id__tooltip">{id}</span>
+                  <Tooltip
+                    placement="right"
+                    title={id}
+                  >
+                    <p>{`${id.slice(0, 6)}...`}</p>
+                  </Tooltip>
                 </a>
               </div>
             </li>
diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
index 5088aad0..ae0adfa3 100644
--- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
+++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
@@ -5,11 +5,11 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+}
 
-  p {
-    font-size: $font-size-title;
-    font-weight: $font-weight-semibold;
-  }
+.author-bar-chart__title {
+  font-size: $font-size-title;
+  font-weight: $font-weight-semibold;
 }
 
 .author-bar-chart__header {
@@ -40,7 +40,6 @@
 
   .axis {
     color: $color-white;
-    font-weight: $font-weight-semibold;
 
     &.x-axis {
       .tick {
@@ -83,17 +82,17 @@
 .author-bar-chart__tooltip {
   display: none;
   position: absolute;
-  background: $color-white;
   padding: 8px 16px;
-  text-align: center;
+  border-radius: 5px;
   font-size: $font-size-caption;
+  text-align: center;
   line-height: 1.5;
-  border-radius: 5px;
-  color: $color-dark-gray;
+  background: $color-medium-gray;
+  color: $color-white;
 
   .selected {
-    color: var(--color-primary);
     font-weight: $font-weight-semibold;
+    color: var(--color-primary);
   }
   .name {
     font-weight: $font-weight-semibold;
diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
index 29674dc4..f9fb0e50 100644
--- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
+++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
@@ -213,7 +213,7 @@ const AuthorBarChart = () => {
 
   return (
     <div className="author-bar-chart__container">
-      <p>Author Bar Chart</p>
+      <p className="author-bar-chart__title">Author Bar Chart</p>
       <div className="author-bar-chart__header">
         <select
           className="select-box"

From 8453bce0fddfa7e83fb6d97cf818f27f6731642c Mon Sep 17 00:00:00 2001
From: Chaewon <cw06155@gmail.com>
Date: Tue, 10 Sep 2024 22:39:28 +0900
Subject: [PATCH 2/2] refator tooltip and update font weight

---
 packages/view/src/App.scss                                    | 4 ----
 packages/view/src/components/@common/Author/Author.tsx        | 1 +
 packages/view/src/components/Detail/Detail.tsx                | 1 +
 .../components/Statistics/AuthorBarChart/AuthorBarChart.scss  | 2 +-
 .../Statistics/FileIcicleSummary/FileIcicleSummary.scss       | 2 +-
 .../view/src/components/TemporalFilter/TemporalFilter.scss    | 2 +-
 6 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/view/src/App.scss b/packages/view/src/App.scss
index 0e87d49e..6fe4520d 100644
--- a/packages/view/src/App.scss
+++ b/packages/view/src/App.scss
@@ -1,9 +1,5 @@
 @import "styles/app";
 
-:root {
-  --primary-color: #ff8272;
-}
-
 body {
   background: $color-background;
   color: $color-white;
diff --git a/packages/view/src/components/@common/Author/Author.tsx b/packages/view/src/components/@common/Author/Author.tsx
index 904d6f55..262f13a2 100644
--- a/packages/view/src/components/@common/Author/Author.tsx
+++ b/packages/view/src/components/@common/Author/Author.tsx
@@ -9,6 +9,7 @@ const Author = ({ name, src }: AuthorInfo) => {
     <Tooltip
       title={name}
       placement="top-start"
+      PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
     >
       <a
         href={`${GITHUB_URL}/${name}`}
diff --git a/packages/view/src/components/Detail/Detail.tsx b/packages/view/src/components/Detail/Detail.tsx
index 9ede77b4..4068b52c 100644
--- a/packages/view/src/components/Detail/Detail.tsx
+++ b/packages/view/src/components/Detail/Detail.tsx
@@ -95,6 +95,7 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
                   <Tooltip
                     placement="right"
                     title={id}
+                    PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
                   >
                     <p>{`${id.slice(0, 6)}...`}</p>
                   </Tooltip>
diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
index ae0adfa3..aba9dc5e 100644
--- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
+++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
@@ -87,7 +87,7 @@
   font-size: $font-size-caption;
   text-align: center;
   line-height: 1.5;
-  background: $color-medium-gray;
+  background-color: rgba($color-dark-gray, 0.9);
   color: $color-white;
 
   .selected {
diff --git a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.scss b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.scss
index 84576680..81dd4d0c 100644
--- a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.scss
+++ b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.scss
@@ -3,8 +3,8 @@
 .file-icicle-summary {
   width: 16rem;
   text {
-    fill: var(--color-primary);
     filter: invert(100) grayscale(100) contrast(100);
+    font-weight: $font-weight-semibold;
   }
 }
 
diff --git a/packages/view/src/components/TemporalFilter/TemporalFilter.scss b/packages/view/src/components/TemporalFilter/TemporalFilter.scss
index 57a1f8c6..70e25780 100644
--- a/packages/view/src/components/TemporalFilter/TemporalFilter.scss
+++ b/packages/view/src/components/TemporalFilter/TemporalFilter.scss
@@ -21,8 +21,8 @@
     }
 
     span {
-      color: var(--primary-color);
       filter: invert(100) grayscale(100) contrast(100);
+      font-weight: $font-weight-semibold;
     }
   }