From 4f88221bce91633bbe8283b33fa4c22c9092a9cd Mon Sep 17 00:00:00 2001
From: email <imrealleonardo@gmail.com>
Date: Tue, 29 Mar 2022 08:13:15 +0800
Subject: [PATCH] feat: update sidebar style

---
 web/src/components/MenuBtnsPopup.tsx | 17 ----------
 web/src/components/Sidebar.tsx       | 47 +++++++++++++++++++++++++---
 web/src/components/UserBanner.tsx    | 34 +++++---------------
 web/src/less/shortcut-list.less      | 13 +++-----
 web/src/less/siderbar.less           | 32 +++++++++++++++++--
 web/src/less/user-banner.less        | 47 +++++++---------------------
 web/tailwind.config.js               | 13 ++++++++
 7 files changed, 107 insertions(+), 96 deletions(-)

diff --git a/web/src/components/MenuBtnsPopup.tsx b/web/src/components/MenuBtnsPopup.tsx
index 34ab3be7..0b612f4d 100644
--- a/web/src/components/MenuBtnsPopup.tsx
+++ b/web/src/components/MenuBtnsPopup.tsx
@@ -1,8 +1,6 @@
 import { useEffect, useRef } from "react";
 import { locationService, userService } from "../services";
 import showAboutSiteDialog from "./AboutSiteDialog";
-import showSettingDialog from "./SettingDialog";
-import showMemoTrashDialog from "./MemoTrashDialog";
 import "../less/menu-btns-popup.less";
 
 interface Props {
@@ -12,7 +10,6 @@ interface Props {
 
 const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
   const { shownStatus, setShownStatus } = props;
-
   const popupElRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -30,14 +27,6 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
     }
   }, [shownStatus]);
 
-  const handleMyAccountBtnClick = () => {
-    showSettingDialog();
-  };
-
-  const handleMemosTrashBtnClick = () => {
-    showMemoTrashDialog();
-  };
-
   const handleAboutBtnClick = () => {
     showAboutSiteDialog();
   };
@@ -50,12 +39,6 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
 
   return (
     <div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
-      <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
-        <span className="icon">👤</span> Setting
-      </button>
-      <button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
-        <span className="icon">🗑️</span> Recycle Bin
-      </button>
       <button className="btn action-btn" onClick={handleAboutBtnClick}>
         <span className="icon">🤠</span> About
       </button>
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 492247b5..b6c09453 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -1,19 +1,56 @@
-import { useRef } from "react";
+import { useContext } from "react";
+import appContext from "../stores/appContext";
+import utils from "../helpers/utils";
+import showDailyMemoDiaryDialog from "./DailyMemoDiaryDialog";
+import showSettingDialog from "./SettingDialog";
+import showMemoTrashDialog from "./MemoTrashDialog";
 import UserBanner from "./UserBanner";
 import ShortcutList from "./ShortcutList";
-import UsageHeatMap from "./UsageHeatMap";
 import "../less/siderbar.less";
 
 interface Props {}
 
 const Sidebar: React.FC<Props> = () => {
-  const wrapperElRef = useRef<HTMLElement>(null);
+  const {
+    memoState: { memos, tags },
+    userState: { user },
+  } = useContext(appContext);
+  const createdDays = user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdAt)) / 1000 / 3600 / 24) : 0;
+
+  const handleMyAccountBtnClick = () => {
+    showSettingDialog();
+  };
+
+  const handleMemosTrashBtnClick = () => {
+    showMemoTrashDialog();
+  };
 
   return (
-    <aside className="sidebar-wrapper" ref={wrapperElRef}>
+    <aside className="sidebar-wrapper">
       <UserBanner />
-      <UsageHeatMap />
+      <div className="action-btns-container">
+        <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
+          <span className="icon">👤</span> Setting
+        </button>
+        <button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
+          <span className="icon">🗑️</span> Recycle Bin
+        </button>
+      </div>
       <ShortcutList />
+      <div className="status-text-container">
+        <div className="status-text memos-text">
+          <span className="amount-text">{memos.length}</span>
+          <span className="type-text">MEMO</span>
+        </div>
+        <div className="status-text tags-text">
+          <span className="amount-text">{tags.length}</span>
+          <span className="type-text">TAG</span>
+        </div>
+        <div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}>
+          <span className="amount-text">{createdDays}</span>
+          <span className="type-text">DAY</span>
+        </div>
+      </div>
     </aside>
   );
 };
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index 1b118878..95b18d10 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -1,20 +1,16 @@
 import { useCallback, useContext, useState } from "react";
 import appContext from "../stores/appContext";
 import { locationService } from "../services";
-import utils from "../helpers/utils";
 import MenuBtnsPopup from "./MenuBtnsPopup";
-import showDailyMemoDiaryDialog from "./DailyMemoDiaryDialog";
 import "../less/user-banner.less";
 
 interface Props {}
 
 const UserBanner: React.FC<Props> = () => {
   const {
-    memoState: { memos, tags },
     userState: { user },
   } = useContext(appContext);
   const username = user ? user.name : "Memos";
-  const createdDays = user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdAt)) / 1000 / 3600 / 24) : 0;
 
   const [shouldShowPopupBtns, setShouldShowPopupBtns] = useState(false);
 
@@ -32,29 +28,13 @@ const UserBanner: React.FC<Props> = () => {
 
   return (
     <div className="user-banner-container">
-      <div className="userinfo-header-container">
-        <p className="username-text" onClick={handleUsernameClick}>
-          {username}
-        </p>
-        <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
-          <img src="/icons/more.svg" className="icon-img" />
-        </span>
-        <MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
-      </div>
-      <div className="status-text-container">
-        <div className="status-text memos-text">
-          <span className="amount-text">{memos.length}</span>
-          <span className="type-text">MEMO</span>
-        </div>
-        <div className="status-text tags-text">
-          <span className="amount-text">{tags.length}</span>
-          <span className="type-text">TAG</span>
-        </div>
-        <div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}>
-          <span className="amount-text">{createdDays}</span>
-          <span className="type-text">DAY</span>
-        </div>
-      </div>
+      <p className="username-text" onClick={handleUsernameClick}>
+        {username}
+      </p>
+      <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
+        <img src="/icons/more.svg" className="icon-img" />
+      </span>
+      <MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
     </div>
   );
 };
diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less
index 6d4fb125..b8d515e8 100644
--- a/web/src/less/shortcut-list.less
+++ b/web/src/less/shortcut-list.less
@@ -2,12 +2,12 @@
 
 .shortcuts-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply w-full py-0 px-2 h-auto flex-nowrap;
+  @apply w-full py-0 px-2 mt-1 h-auto grow shrink flex-nowrap;
   .hide-scroll-bar();
 
   > .title-text {
     .flex(row, space-between, center);
-    @apply w-full py-1 px-4;
+    @apply w-full px-4;
 
     > .normal-text {
       @apply text-xs leading-6 font-bold text-black opacity-50;
@@ -58,8 +58,6 @@
         background-color: @text-green !important;
 
         > .shortcut-text-container {
-          @apply font-bold;
-
           > * {
             @apply text-white;
           }
@@ -68,8 +66,7 @@
 
       > .shortcut-text-container {
         .flex(row, flex-start, center);
-        @apply overflow-hidden text-ellipsis shrink-0 leading-5;
-        max-width: calc(100% - 24px);
+        @apply truncate shrink leading-5 mr-1;
         color: @text-black;
 
         > .icon-text {
@@ -77,13 +74,13 @@
         }
 
         > .shortcut-text {
-          @apply shrink-0;
+          @apply truncate;
         }
       }
 
       > .btns-container {
         .flex(row, flex-end, center);
-        @apply hidden;
+        @apply hidden shrink-0;
 
         > .action-btn {
           .flex(row, center, center);
diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less
index df04895e..7109cdbc 100644
--- a/web/src/less/siderbar.less
+++ b/web/src/less/siderbar.less
@@ -2,10 +2,36 @@
 
 .sidebar-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply w-60 h-full py-4 overflow-x-hidden overflow-y-auto shrink-0;
+  @apply w-64 h-full py-4 px-2 overflow-x-hidden overflow-y-auto shrink-0;
   .hide-scroll-bar();
 
-  > * {
-    @apply shrink-0;
+  > .action-btns-container {
+    @apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0;
+
+    > .action-btn {
+      @apply leading-10 px-4 rounded-lg text-base hover:bg-white;
+
+      > .icon {
+        @apply mr-1;
+      }
+    }
+  }
+
+  > .status-text-container {
+    .flex(row, space-between, flex-start);
+    @apply w-full px-10 select-none shrink-0;
+
+    > .status-text {
+      .flex(column, flex-start, flex-start);
+
+      > .amount-text {
+        @apply font-bold text-2xl opacity-80 leading-10;
+        color: @text-black;
+      }
+
+      > .type-text {
+        @apply text-gray-400 text-xs font-mono;
+      }
+    }
   }
 }
diff --git a/web/src/less/user-banner.less b/web/src/less/user-banner.less
index a1960c34..383c01d6 100644
--- a/web/src/less/user-banner.less
+++ b/web/src/less/user-banner.less
@@ -1,47 +1,22 @@
 @import "./mixin.less";
 
 .user-banner-container {
-  .flex(column, flex-start, flex-start);
-  @apply w-full h-auto;
+  .flex(row, space-between, center);
+  @apply w-full h-auto px-6 flex-nowrap mb-1;
 
-  > .userinfo-header-container {
-    .flex(row, space-between, center);
-    @apply w-full px-6 flex-nowrap mb-1;
-
-    > .username-text {
-      @apply font-bold text-lg text-slate-800 overflow-hidden cursor-pointer shrink-0 text-ellipsis;
-      max-width: calc(100% - 32px);
-    }
-
-    > .action-btn {
-      @apply flex-shrink-0 select-none border-none;
-      background-color: unset;
-
-      &.menu-popup-btn {
-        .flex(column, center, center);
-        @apply w-9 h-10 -mr-2 cursor-pointer;
-
-        > .icon-img {
-          @apply w-5 h-auto;
-        }
-      }
-    }
+  > .username-text {
+    @apply font-bold text-lg pr-2 text-slate-800 cursor-pointer shrink truncate;
   }
 
-  > .status-text-container {
-    .flex(row, space-between, flex-start);
-    @apply px-6 w-full select-none mb-3;
+  > .action-btn {
+    @apply shrink-0 select-none border-none;
 
-    > .status-text {
-      .flex(column, flex-start, flex-start);
+    &.menu-popup-btn {
+      .flex(column, center, center);
+      @apply w-9 h-10 -mr-2 cursor-pointer;
 
-      > .amount-text {
-        @apply font-bold text-2xl opacity-80 leading-10;
-        color: @text-black;
-      }
-
-      > .type-text {
-        @apply text-gray-400 text-xs font-mono;
+      > .icon-img {
+        @apply w-5 h-auto;
       }
     }
   }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 3e9e9192..5ad1db0e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -2,6 +2,19 @@
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,tsx}"],
   theme: {
+    fontSize: {
+      xs: ".75rem",
+      sm: ".875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
+    },
     extend: {
       spacing: {
         128: "32rem",