chore: update style of home sidebar (#1311)

web/src/components/HomeSidebar.tsx

@@ -12,7 +12,7 @@ const HomeSidebar = () => {
 
   useEffect(() => {
     const handleWindowResize = () => {
-      if (window.innerWidth < resolution.sm) {
+      if (window.innerWidth < resolution.md) {
         layoutStore.setHomeSidebarStatus(false);
       } else {
         layoutStore.setHomeSidebarStatus(true);
@@ -24,22 +24,22 @@ const HomeSidebar = () => {
 
   return (
     <div
-      className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full flex-shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
+      className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full flex-shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
         showHomeSidebar && "pointer-events-auto"
       }`}
     >
       <div
-        className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
+        className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
           showHomeSidebar && "opacity-60 pointer-events-auto"
         }`}
         onClick={() => layoutStore.setHomeSidebarStatus(false)}
       ></div>
       <aside
-        className={`absolute sm:relative top-0 right-0 w-56 pr-2 sm:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 translate-x-full sm:translate-x-0 ${
+        className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
           showHomeSidebar && "!translate-x-0 shadow-2xl"
         }`}
       >
-        <div className="pl-6 pr-4 mb-4 w-full">
+        <div className="px-4 pr-8 mb-4 w-full">
           <SearchBar />
         </div>
         <UsageHeatMap />

web/src/components/ShortcutList.tsx

@@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
-import "../less/shortcut-list.less";
 
 const ShortcutList = () => {
   const { t } = useTranslation();
@@ -37,14 +36,17 @@ const ShortcutList = () => {
   }, []);
 
   return (
-    <div className="shortcuts-wrapper">
+    <div className="flex flex-col justify-start items-start w-full py-0 px-1 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
-      <p className="title-text">
+      <div className="flex flex-row justify-start items-center w-full px-4">
-        <span className="normal-text">{t("common.shortcuts")}</span>
+        <span className="text-sm leading-6 font-mono text-gray-400">{t("common.shortcuts")}</span>
-        <button className="btn" onClick={() => showCreateShortcutDialog()}>
+        <button
-          <Icon.Plus className="icon-img" />
+          className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow"
+          onClick={() => showCreateShortcutDialog()}
+        >
+          <Icon.Plus className="w-4 h-4 text-gray-400" />
         </button>
-      </p>
+      </div>
-      <div className="shortcuts-container">
+      <div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2">
         {sortedShortcuts.map((s) => {
           return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === Number(query?.shortcutId)} />;
         })}
@@ -117,24 +119,39 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
 
   return (
     <>
-      <div className={`shortcut-container ${isActive ? "active" : ""}`} onClick={handleShortcutClick}>
+      <div
-        <div className="shortcut-text-container">
+        className="relative group flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700"
-          <span className="shortcut-text">{shortcut.title}</span>
+        onClick={handleShortcutClick}
+      >
+        <div
+          className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200 ${
+            isActive && "text-green-600"
+          }`}
+        >
+          <span className="truncate">{shortcut.title}</span>
         </div>
-        <div className="btns-container">
+        <div className="flex-row justify-end items-center hidden group/btns group-hover:flex shrink-0">
-          <span className="action-btn toggle-btn">
+          <span className="flex flex-row justify-center items-center toggle-btn">
-            <Icon.MoreHorizontal className="icon-img" />
+            <Icon.MoreHorizontal className="w-4 h-auto" />
           </span>
-          <div className="action-btns-wrapper">
+          <div className="absolute top-4 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden group-hover/btns:flex z-1">
-            <div className="action-btns-container">
+            <div className="flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700 shadow">
-              <span className="btn" onClick={handlePinShortcutBtnClick}>
+              <span
+                className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
+                onClick={handlePinShortcutBtnClick}
+              >
                 {shortcut.rowStatus === "ARCHIVED" ? t("common.unpin") : t("common.pin")}
               </span>
-              <span className="btn" onClick={handleEditShortcutBtnClick}>
+              <span
+                className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
+                onClick={handleEditShortcutBtnClick}
+              >
                 {t("common.edit")}
               </span>
               <span
-                className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`}
+                className={`w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800 text-orange-600 ${
+                  showConfirmDeleteBtn && "font-black"
+                }`}
                 onClick={handleDeleteMemoClick}
                 onMouseLeave={handleDeleteBtnMouseLeave}
               >

web/src/components/TagList.tsx

@@ -4,7 +4,6 @@ import { useLocationStore, useTagStore } from "../store/module";
 import useToggle from "../hooks/useToggle";
 import Icon from "./Icon";
 import showCreateTagDialog from "./CreateTagDialog";
-import "../less/tag-list.less";
 
 interface Tag {
   key: string;
@@ -69,8 +68,8 @@ const TagList = () => {
   }, [tagsText]);
 
   return (
-    <div className="tags-wrapper">
+    <div className="flex flex-col justify-start items-start w-full py-0 px-1 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
-      <div className="w-full flex flex-row justify-start items-center px-4 mb-1">
+      <div className="flex flex-row justify-start items-center w-full px-4">
         <span className="text-sm leading-6 font-mono text-gray-400">{t("common.tags")}</span>
         <button
           onClick={() => showCreateTagDialog()}
@@ -79,7 +78,7 @@ const TagList = () => {
           <Icon.Plus className="w-4 h-4 text-gray-400" />
         </button>
       </div>
-      <div className="tags-container">
+      <div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mt-2 mb-2">
         {tags.map((t, idx) => (
           <TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={query?.tag} />
         ))}
@@ -115,22 +114,35 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
 
   return (
     <>
-      <div className={`tag-item-container ${isActive ? "active" : ""}`} onClick={handleTagClick}>
+      <div
-        <div className="tag-text-container">
+        className="relative group flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-1 rounded-lg text-base cursor-pointer select-none shrink-0 hover:opacity-60"
-          <span className="icon-text">#</span>
+        onClick={handleTagClick}
-          <span className="tag-text">{tag.key}</span>
+      >
+        <div
+          className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200 ${
+            isActive && "text-green-600"
+          }`}
+        >
+          <span className="block w-4 shrink-0">#</span>
+          <span className="truncate">{tag.key}</span>
         </div>
-        <div className="btns-container">
+        <div className="flex flex-row justify-end items-center">
           {hasSubTags ? (
-            <span className={`action-btn toggle-btn ${showSubTags ? "shown" : ""}`} onClick={handleToggleBtnClick}>
+            <span
-              <Icon.ChevronRight className="icon-img" />
+              className={`flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0 ${showSubTags && "rotate-90"}`}
+              onClick={handleToggleBtnClick}
+            >
+              <Icon.ChevronRight className="w-5 h-5 opacity-80 dark:text-gray-400" />
             </span>
           ) : null}
         </div>
       </div>
-
       {hasSubTags ? (
-        <div className={`subtags-container ${showSubTags ? "" : "!hidden"}`}>
+        <div
+          className={`w-full flex flex-col justify-start items-start h-auto ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
+            !showSubTags && "!hidden"
+          }`}
+        >
           {tag.subTags.map((st, idx) => (
             <TagItemContainer key={st.text + "-" + idx} tag={st} tagQuery={tagQuery} />
           ))}

web/src/components/UsageHeatMap.tsx

@@ -7,7 +7,7 @@ import * as utils from "../helpers/utils";
 import "../less/usage-heat-map.less";
 
 const tableConfig = {
-  width: 11,
+  width: 10,
   height: 7,
 };
 

web/src/less/shortcut-list.less

@@ -1,98 +0,0 @@
-.shortcuts-wrapper {
-  @apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar;
-
-  > .title-text {
-    @apply flex flex-row justify-start items-center w-full px-4;
-
-    > .normal-text {
-      @apply text-sm leading-6 font-mono text-gray-400;
-    }
-
-    > .btn {
-      @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow;
-
-      > .icon-img {
-        @apply w-4 h-4 text-gray-400;
-      }
-    }
-  }
-
-  > .shortcuts-container {
-    @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
-
-    > .shortcut-container {
-      @apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700;
-
-      &:hover {
-        > .btns-container {
-          @apply flex;
-        }
-      }
-
-      &.active {
-        > .shortcut-text-container {
-          @apply !text-green-600;
-        }
-      }
-
-      > .shortcut-text-container {
-        @apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200;
-
-        > .icon-text {
-          @apply block w-4 shrink-0;
-        }
-
-        > .shortcut-text {
-          @apply truncate;
-        }
-      }
-
-      > .btns-container {
-        @apply flex-row justify-end items-center hidden shrink-0;
-
-        > .action-btn {
-          @apply flex flex-row justify-center items-center;
-
-          &.toggle-btn {
-            @apply text-gray-600 dark:text-gray-400;
-
-            > .icon-img {
-              @apply w-4 h-auto;
-            }
-
-            &:hover {
-              & + .action-btns-wrapper {
-                @apply flex;
-              }
-            }
-          }
-        }
-
-        > .action-btns-wrapper {
-          @apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1;
-
-          > .action-btns-container {
-            @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700;
-            box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-
-            > .btn {
-              @apply w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800;
-
-              &.delete-btn {
-                @apply text-orange-600;
-
-                &.final-confirm {
-                  @apply font-black;
-                }
-              }
-            }
-          }
-
-          &:hover {
-            @apply flex;
-          }
-        }
-      }
-    }
-  }
-}

web/src/less/tag-list.less

@@ -1,60 +0,0 @@
-.tags-wrapper {
-  @apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow hide-scrollbar;
-
-  > .tags-container {
-    @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;
-
-    .subtags-container {
-      @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400;
-      width: calc(100% - 18px);
-      min-width: 80px;
-
-      > .tag-item-container {
-        @apply first:mt-0;
-      }
-    }
-
-    .tag-item-container {
-      @apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white dark:hover:bg-zinc-700;
-
-      &.active {
-        > .tag-text-container {
-          @apply !text-green-600;
-        }
-      }
-
-      > .tag-text-container {
-        @apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black dark:text-gray-200;
-        max-width: calc(100% - 24px);
-
-        > .icon-text {
-          @apply block w-4 shrink-0;
-        }
-
-        > .tag-text {
-          @apply truncate;
-        }
-      }
-
-      > .btns-container {
-        @apply flex flex-row justify-end items-center;
-
-        > .action-btn {
-          @apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;
-
-          > .icon-img {
-            @apply w-5 h-5 opacity-80 dark:text-gray-400;
-          }
-
-          &.shown {
-            @apply rotate-90;
-          }
-        }
-      }
-    }
-
-    > .tip-text {
-      @apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 px-4 py-1 leading-6 rounded text-sm text-gray-400 font-mono;
-    }
-  }
-}

web/src/less/usage-heat-map.less

@@ -1,11 +1,8 @@
 .usage-heat-map-wrapper {
-  @apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-6 pb-3 shrink-0;
+  @apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-4 pb-3 shrink-0;
 
   > .usage-heat-map {
-    @apply h-full grid grid-rows-7;
+    @apply w-full h-full grid grid-rows-7 grid-cols-10 grid-flow-col;
-    width: 196px;
-    grid-template-columns: repeat(11, 1fr);
-    grid-auto-flow: column;
 
     > .stat-wrapper {
       > .stat-container {
@@ -41,10 +38,10 @@
   }
 
   > .day-tip-text-container {
-    @apply w-6 h-full grid grid-rows-7;
+    @apply w-8 h-full grid grid-rows-7;
 
     > .tip-text {
-      @apply pl-1 w-full h-full text-right font-mono text-gray-400;
+      @apply pl-1  w-full h-full text-left font-mono text-gray-400;
       font-size: 10px;
     }
   }