Merge branch 'noCommit'

packages/view/package.json

@@ -106,7 +106,6 @@
     "nanoid": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-icons": "^4.4.0",
     "react-spinners": "^0.13.8",
     "reflect-metadata": "^0.1.13",
     "svg-parser": "^2.0.4",

packages/view/src/App.scss

@@ -35,6 +35,17 @@ body {
   display: grid;
   grid-template-columns: 4fr 1fr;
   height: calc(100vh - 200px);
-
   padding: 20px;
 }
+
+.no-commits-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 350px);
+
+  h1 {
+    margin: 40px 0 0 0;
+  }
+}

packages/view/src/App.tsx

@@ -3,6 +3,7 @@ import { container } from "tsyringe";
 import { useEffect, useRef } from "react";
 import BounceLoader from "react-spinners/BounceLoader";
 
+import MonoLogo from "assets/monoLogo.svg";
 import { BranchSelector, Statistics, TemporalFilter, ThemeSelector, VerticalClusterList } from "components";
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
@@ -74,14 +75,18 @@ const App = () => {
       <div className="top-container">
         <TemporalFilter />
       </div>
-      <div className="middle-container">
+      <div>
         {filteredData.length !== 0 ? (
-          <>
+          <div className="middle-container">
             <VerticalClusterList />
             <Statistics />
-          </>
+          </div>
         ) : (
-          <div>NO COMMIT EXISTS</div>
+          <div className="no-commits-container">
+            <MonoLogo />
+            <h1>No Commits Found.</h1>
+            <p>Make at least one commit to proceed.</p>
+          </div>
         )}
       </div>
     </>

packages/view/src/components/Detail/Detail.tsx

@@ -1,10 +1,10 @@
 import dayjs from "dayjs";
+import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
+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 AuthorIcon from "assets/author.svg";
-import ChangedFileIcon from "assets/changed-file.svg";
-import CommitIcon from "assets/commit.svg";
-import DiffAddIcon from "assets/diff-add.svg";
-import DiffDeleteIcon from "assets/diff-delete.svg";
 import { Author } from "components/@common/Author";
 
 import { useCommitListHide } from "./Detail.hook";
@@ -20,11 +20,11 @@ const DetailSummary = ({ commitNodeListInCluster }: DetailSummaryProps) => {
   });
 
   const summaryItems: DetailSummaryItem[] = [
-    { name: "authors", count: authorLength, icon: <AuthorIcon /> },
-    { name: "commits", count: commitLength, icon: <CommitIcon /> },
-    { name: "changed files", count: fileLength, icon: <ChangedFileIcon /> },
-    { name: "additions", count: insertions, icon: <DiffAddIcon /> },
-    { name: "deletions", count: deletions, icon: <DiffDeleteIcon /> },
+    { name: "authors", count: authorLength, icon: <PersonRoundedIcon sx={{ fontSize: 18 }} /> },
+    { name: "commits", count: commitLength, icon: <CommitRoundedIcon sx={{ fontSize: 18 }} /> },
+    { name: "changed files", count: fileLength, icon: <RestorePageRoundedIcon sx={{ fontSize: 18 }} /> },
+    { name: "additions", count: insertions, icon: <AddCircleRoundedIcon sx={{ fontSize: 18 }} /> },
+    { name: "deletions", count: deletions, icon: <RemoveCircleRoundedIcon sx={{ fontSize: 18 }} /> },
   ];
 
   return (

packages/view/src/components/RefreshButton/RefreshButton.tsx

@@ -1,10 +1,9 @@
 import "reflect-metadata";
 import cn from "classnames";
-import { FiRefreshCcw } from "react-icons/fi";
+import ReplayCircleFilledRoundedIcon from "@mui/icons-material/ReplayCircleFilledRounded";
 
 import { throttle } from "utils";
 import { useGlobalData } from "hooks";
-
 import "./RefreshButton.scss";
 import { sendRefreshDataCommand } from "services";
 
@@ -22,9 +21,9 @@ const RefreshButton = () => {
       className={cn("refresh-button")}
       onClick={refreshHandler}
     >
-      <FiRefreshCcw
+      <ReplayCircleFilledRoundedIcon
         className={cn("refresh-button-icon", { "refresh-button-icon--loading": loading })}
-        stroke="white"
+        style={{ color: "white" }}
       />
     </button>
   );

packages/view/src/components/VerticalClusterList/Summary/Content/Content.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { IoIosArrowDropdownCircle, IoIosArrowDropupCircle } from "react-icons/io";
+import ArrowDropDownCircleRoundedIcon from "@mui/icons-material/ArrowDropDownCircleRounded";
 
 import { useGlobalData } from "hooks";
 
@@ -48,9 +48,9 @@ const Content = ({ content, clusterId, selectedClusterId }: ContentProps) => {
       </div>
       <div className="collapsible-icon">
         {selectedClusterId.includes(clusterId) ? (
-          <IoIosArrowDropupCircle className="show" />
+          <ArrowDropDownCircleRoundedIcon className="show" />
         ) : (
-          <IoIosArrowDropdownCircle />
+          <ArrowDropDownCircleRoundedIcon />
         )}
       </div>
     </>

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -47,6 +47,7 @@
 
       & .show {
         visibility: visible;
+        transform: rotate(180deg);
       }
     }