Merge pull request #613 from pcwadarong/main

NO COMMIT 페이지 UI 개선
githru · Aug 7, 2024 · 5a5a6e4 · 5a5a6e4
2 parents 76d1934 + 46ec56b
commit 5a5a6e4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/view/src/App.scss b/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;
+  }
+}
diff --git a/packages/view/src/App.tsx b/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>
     </>

diff --git a/packages/view/src/assets/monoLogo.svg b/packages/view/src/assets/monoLogo.svg