chore: update layout styles

web/src/components/CreateShortcutDialog.tsx

@@ -89,7 +89,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     <>
       <div className="dialog-header-container">
         <p className="title-text">
-          <span className="icon-text">🔖</span>
+          <span className="icon-text">🎯</span>
           {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
         </p>
         <button className="btn close-btn" onClick={destroy}>
@@ -102,7 +102,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           <input className="title-input" type="text" value={title} onChange={handleTitleInputChange} />
         </div>
         <div className="form-item-container filter-form-container">
-          <span className="normal-text">Filter</span>
+          <span className="normal-text">Filters</span>
           <div className="filters-wrapper">
             {filters.map((f, index) => {
               return (

web/src/components/Editor/Editor.tsx

@@ -44,6 +44,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
     }
   }, []);
 
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.style.height = "auto";
+      editorRef.current.style.height = (editorRef.current.scrollHeight ?? 0) + "px";
+    }
+  }, [editorRef.current?.value]);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -60,11 +67,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
         editorRef.current.value =
           prevValue.slice(0, editorRef.current.selectionStart) + rawText + prevValue.slice(editorRef.current.selectionStart);
         handleContentChangeCallback(editorRef.current.value);
+        refresh();
       },
       setContent: (text: string) => {
         if (editorRef.current) {
           editorRef.current.value = text;
           handleContentChangeCallback(editorRef.current.value);
+          refresh();
         }
       },
       getContent: (): string => {

web/src/components/MemoFilter.tsx

@@ -25,7 +25,7 @@ const MemoFilter: React.FC<FilterProps> = () => {
           locationService.setMemoShortcut("");
         }}
       >
-        <span className="icon-text">🔖</span> {queryFilter?.title}
+        <span className="icon-text">🎯</span> {queryFilter?.title}
       </div>
       <div
         className={"filter-item-container " + (tagQuery ? "" : "hidden")}

web/src/components/ShortcutList.tsx

@@ -111,7 +111,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
         await shortcutService.pinShortcut(shortcut.id);
         shortcutService.editShortcut({
           ...shortcut,
-          rowStatus: "NORMAL",
+          rowStatus: "ARCHIVED",
         });
       }
     } catch (error) {
@@ -127,7 +127,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
     <>
       <div className={`shortcut-container ${isActive ? "active" : ""}`} onClick={handleShortcutClick}>
         <div className="shortcut-text-container">
-          <span className="icon-text">#</span>
+          {/* <span className="icon-text">#</span> */}
           <span className="shortcut-text">{shortcut.title}</span>
         </div>
         <div className="btns-container">

web/src/components/Sidebar.tsx

@@ -6,6 +6,7 @@ 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 {}
@@ -28,15 +29,6 @@ const Sidebar: React.FC<Props> = () => {
   return (
     <aside className="sidebar-wrapper">
       <UserBanner />
-      <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>
@@ -51,6 +43,16 @@ const Sidebar: React.FC<Props> = () => {
           <span className="type-text">DAY</span>
         </div>
       </div>
+      <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 />
     </aside>
   );
 };

web/src/components/UsageHeatMap.tsx

@@ -30,7 +30,7 @@ interface Props {}
 
 const UsageHeatMap: React.FC<Props> = () => {
   const todayTimeStamp = utils.getDateStampByDate(Date.now());
-  const todayDay = new Date(todayTimeStamp).getDay() || 7;
+  const todayDay = new Date(todayTimeStamp).getDay() + 1;
   const nullCell = new Array(7 - todayDay).fill(0);
   const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
   const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
@@ -62,9 +62,8 @@ const UsageHeatMap: React.FC<Props> = () => {
     }
 
     const targetEl = event.target as HTMLElement;
-    popupRef.current.style.left = targetEl.offsetLeft - (containerElRef.current?.offsetLeft ?? 0) + "px";
+    popupRef.current.style.left = targetEl.offsetLeft + "px";
-    const topValue = targetEl.offsetTop;
+    popupRef.current.style.top = targetEl.offsetTop - 4 + "px";
-    popupRef.current.style.top = topValue + "px";
   }, []);
 
   const handleUsageStatItemMouseLeave = useCallback(() => {
@@ -87,16 +86,15 @@ const UsageHeatMap: React.FC<Props> = () => {
   return (
     <div className="usage-heat-map-wrapper" ref={containerElRef}>
       <div className="day-tip-text-container">
-        <span className="tip-text">Mon</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">Wed</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">Fri</span>
-        <span className="tip-text"></span>
         <span className="tip-text">Sun</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">Tue</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">Thu</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">Sat</span>
       </div>
 
-      {/* popup */}
       <div ref={popupRef} className={"usage-detail-container pop-up " + (popupStat ? "" : "hidden")}>
         {popupStat?.count} memos on <span className="date-text">{new Date(popupStat?.timestamp as number).toDateString()}</span>
       </div>

web/src/less/common/selector.less

@@ -7,15 +7,7 @@
 
   > .current-value-container {
     .flex(row, space-between, center);
-    width: 100%;
+    @apply w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
-    height: 100%;
-    border: 1px solid @bg-gray;
-    border-radius: 4px;
-    padding: 0 8px;
-    padding-right: 4px;
-    background-color: white;
-    cursor: pointer;
-    user-select: none;
 
     &:hover,
     &.active {
@@ -55,7 +47,7 @@
     min-width: calc(100% + 16px);
     max-height: 256px;
     padding: 4px;
-    overflow: auto;
+    overflow-y: auto;
     margin-top: 2px;
     margin-left: -8px;
     z-index: 1;
@@ -66,18 +58,7 @@
 
     > .item-container {
       .flex(column, flex-start, flex-start);
-      width: 100%;
+      @apply w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
-      padding-left: 12px;
-      line-height: 30px;
-      white-space: nowrap;
-      font-size: 13px;
-      cursor: pointer;
-      border-radius: 4px;
-      user-select: none;
-
-      &:hover {
-        background-color: @bg-whitegray;
-      }
 
       &.selected {
         color: @text-green;

web/src/less/editor.less

@@ -2,10 +2,12 @@
 
 .common-editor-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply relative w-full h-full bg-white grow;
+  @apply relative w-full h-auto bg-white;
 
   > .common-editor-inputer {
-    @apply w-full h-full mt-1 mb-4 grow;
+    @apply w-full h-full mt-1 mb-1;
+    min-height: 40px;
+    max-height: 300px;
     .pretty-scroll-bar(2px, 0);
     font-size: 15px;
     line-height: 24px;

web/src/less/home.less

@@ -5,6 +5,6 @@
 }
 
 #page-wrapper {
-  @apply w-full h-full m-auto grid;
+  @apply w-full h-full m-auto grid max-w-4xl mx-auto;
-  grid-template-columns: 256px 1fr;
+  grid-template-columns: min-content 1fr;
 }

web/src/less/memo-editor.less

@@ -1,7 +1,7 @@
 @import "./mixin.less";
 
 .memo-editor-container {
-  @apply relative w-full h-96 max-h-full flex flex-col justify-start items-start grow bg-white p-4 rounded-lg border-2 border-gray-200;
+  @apply relative w-full max-h-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
 
   &.edit-ing {
     border-color: @text-blue;

web/src/less/memo-list.less

@@ -28,6 +28,6 @@
   }
 
   &.completed {
-    padding-bottom: 80px;
+    @apply pb-28;
   }
 }

web/src/less/memo.less

@@ -3,7 +3,7 @@
 
 .memo-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply w-full max-w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
+  @apply w-full max-w-full p-4 px-6 mt-2 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
 
   &.deleted-memo {
     @apply border-gray-200;

web/src/less/memos.less

@@ -2,16 +2,5 @@
 @import "./memos-header.less";
 
 .memos-wrapper {
-  @apply w-full h-full overflow-x-hidden grid;
+  @apply w-full h-full overflow-x-hidden flex flex-col justify-start items-start px-4 pr-10;
-  grid-template-columns: 384px 1fr;
-
-  > .memo-editor-wrapper {
-    @apply w-full h-full py-16 px-8 bg-white;
-  }
-
-  > .memo-list-wrapper {
-    @apply w-full h-full overflow-y-auto px-16 grid;
-    grid-auto-rows: min-content;
-    grid-auto-flow: dense;
-  }
 }

web/src/less/menu-btns-popup.less

@@ -13,7 +13,7 @@
     @apply w-full py-2 px-3 text-sm rounded text-left;
 
     > .icon {
-      @apply block w-6 text-center mr-2 text-sm;
+      @apply block w-6 text-center mr-2 text-base;
     }
 
     &:hover {

web/src/less/shortcut-list.less

@@ -101,7 +101,7 @@
 
         > .action-btns-wrapper {
           .flex(column, flex-start, flex-start);
-          @apply absolute right-0 w-auto h-auto p-2 translate-y-14 hidden z-10;
+          @apply absolute right-0 w-auto h-auto px-4 pt-3 translate-y-16 hidden z-10;
 
           > .action-btns-container {
             .flex(column, flex-start, flex-start);

web/src/less/siderbar.less

@@ -2,7 +2,7 @@
 
 .sidebar-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply w-64 h-full py-4 px-2 overflow-x-hidden overflow-y-auto shrink-0;
+  @apply w-64 h-full py-4 pl-2 overflow-x-hidden overflow-y-auto;
   .hide-scroll-bar();
 
   > .action-btns-container {
@@ -19,7 +19,7 @@
 
   > .status-text-container {
     .flex(row, space-between, flex-start);
-    @apply w-full px-10 select-none shrink-0;
+    @apply w-full px-6 select-none shrink-0 pb-4;
 
     > .status-text {
       .flex(column, flex-start, flex-start);

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

@@ -9,32 +9,25 @@
   .flex(row, flex-start, center);
   @apply w-full h-32 flex-wrap pr-6 pb-3;
 
-  &:hover {
-    > .day-tip-text-container {
-      @apply visible;
-    }
-  }
-
   > .day-tip-text-container {
-    .flex(column, space-between, center);
+    @apply w-6 h-full grid grid-rows-7;
-    @apply w-6 h-full flex-wrap invisible;
 
     > .tip-text {
-      @apply pr-1 w-full text-right font-mono text-gray-400;
+      @apply pr-1 w-full h-full text-right font-mono text-gray-400;
       font-size: 10px;
     }
   }
 
   > .usage-heat-map {
-    @apply w-48 h-full grid;
+    @apply h-full grid grid-rows-7;
-    grid-template-rows: repeat(7, 1fr);
+    width: 200px;
     grid-template-columns: repeat(12, 1fr);
     grid-auto-flow: column;
 
     > .stat-container {
       @apply block rounded-sm;
-      width: 13px;
+      width: 14px;
-      height: 13px;
+      height: 14px;
       background-color: @bg-lightgray;
       margin-bottom: 2px;
 
@@ -77,7 +70,7 @@
       content: "";
       position: absolute;
       bottom: -4px;
-      left: calc(50% - 6px);
+      left: calc(50% - 5px);
       border-left: 4px solid transparent;
       border-right: 4px solid transparent;
       border-top: 4px solid rgba(0, 0, 0, 0.8);

web/src/pages/Memos.tsx

@@ -7,14 +7,10 @@ import "../less/memos.less";
 function Memos() {
   return (
     <main className="memos-wrapper">
-      <div className="memo-editor-wrapper">
+      <MemosHeader />
-        <MemoEditor />
+      <MemoEditor />
-      </div>
+      <MemoFilter />
-      <div className="memo-list-wrapper">
+      <MemoList />
-        <MemosHeader />
-        <MemoFilter />
-        <MemoList />
-      </div>
     </main>
   );
 }

web/tailwind.config.js

@@ -24,6 +24,9 @@ module.exports = {
         100: "100",
         1000: "1000",
       },
+      gridTemplateRows: {
+        7: "repeat(7, minmax(0, 1fr))",
+      },
     },
   },
   plugins: [],