refator tooltips

githru · Sep 10, 2024 · e199839 · e199839
1 parent b4d4b7b
commit e199839
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -4,16 +4,17 @@ 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";
 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
@@ -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
@@ -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"