feat: update sidebar style

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>

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>
   );
 };

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,7 +28,6 @@ const UserBanner: React.FC<Props> = () => {
 
   return (
     <div className="user-banner-container">
-      <div className="userinfo-header-container">
       <p className="username-text" onClick={handleUsernameClick}>
         {username}
       </p>
@@ -41,21 +36,6 @@ const UserBanner: React.FC<Props> = () => {
       </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>
-    </div>
   );
 };
 

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;
+        @apply truncate shrink leading-5 mr-1;
-        max-width: calc(100% - 24px);
         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);

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();
 
-  > * {
+  > .action-btns-container {
-    @apply shrink-0;
+    @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;
+      }
+    }
   }
 }

web/src/less/user-banner.less

@@ -1,21 +1,15 @@
 @import "./mixin.less";
 
 .user-banner-container {
-  .flex(column, flex-start, flex-start);
-  @apply w-full h-auto;
-
-  > .userinfo-header-container {
   .flex(row, space-between, center);
-    @apply w-full px-6 flex-nowrap mb-1;
+  @apply w-full h-auto px-6 flex-nowrap mb-1;
 
   > .username-text {
-      @apply font-bold text-lg text-slate-800 overflow-hidden cursor-pointer shrink-0 text-ellipsis;
+    @apply font-bold text-lg pr-2 text-slate-800 cursor-pointer shrink truncate;
-      max-width: calc(100% - 32px);
   }
 
   > .action-btn {
-      @apply flex-shrink-0 select-none border-none;
+    @apply shrink-0 select-none border-none;
-      background-color: unset;
 
     &.menu-popup-btn {
       .flex(column, center, center);
@@ -26,23 +20,4 @@
       }
     }
   }
-  }
-
-  > .status-text-container {
-    .flex(row, space-between, flex-start);
-    @apply px-6 w-full select-none mb-3;
-
-    > .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;
-      }
-    }
-  }
 }

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",