chore: show daily memos view in sidebar (#79)

web/src/components/DailyMemo.tsx

@@ -37,6 +37,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
           </div>
         </Only>
       </div>
+      <div className="split-line"></div>
     </div>
   );
 };

web/src/components/DailyMemoDiaryDialog.tsx

@@ -15,8 +15,8 @@ interface Props extends DialogProps {
   currentDateStamp: DateStamp;
 }
 
-const monthChineseStrArray = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
-const weekdayChineseStrArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+const monthChineseStrArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dev"];
+const weekdayChineseStrArray = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
   const loadingState = useLoading();
@@ -72,22 +72,22 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
   return (
     <>
       <div className="dialog-header-container">
-        <div className="header-wrapper">
-          <p className="title-text">Daily Memos</p>
-          <div className="btns-container">
-            <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
-              <img className="icon-img" src="/icons/arrow-left.svg" />
-            </span>
-            <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
-              <img className="icon-img" src="/icons/arrow-right.svg" />
-            </span>
-            <span className="btn-text share-btn" onClick={handleShareBtnClick}>
-              <img className="icon-img" src="/icons/share.svg" />
-            </span>
-            <span className="btn-text" onClick={() => props.destroy()}>
-              <img className="icon-img" src="/icons/close.svg" />
-            </span>
-          </div>
+        <p className="title-text">
+          <span className="icon-text">📅</span> Daily Memos
+        </p>
+        <div className="btns-container">
+          <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
+            <img className="icon-img" src="/icons/arrow-left.svg" />
+          </span>
+          <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
+            <img className="icon-img" src="/icons/arrow-right.svg" />
+          </span>
+          <span className="btn-text share-btn" onClick={handleShareBtnClick}>
+            <img className="icon-img" src="/icons/share.svg" />
+          </span>
+          <span className="btn-text" onClick={() => props.destroy()}>
+            <img className="icon-img" src="/icons/close.svg" />
+          </span>
         </div>
       </div>
       <div className="dialog-content-container" ref={memosElRef}>

web/src/components/MemoTrashDialog.tsx

@@ -37,7 +37,7 @@ const MemoTrashDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">
           <span className="icon-text">🗑️</span>
-          Trash Bin
+          Recycle Bin
         </p>
         <button className="btn close-btn" onClick={destroy}>
           <img className="icon-img" src="/icons/close.svg" />

web/src/components/Sidebar.tsx

@@ -42,15 +42,18 @@ const Sidebar: React.FC<Props> = () => {
           <span className="amount-text">{tags.length}</span>
           <span className="type-text">TAG</span>
         </div>
-        <div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}>
+        <div className="status-text duration-text">
           <span className="amount-text">{createdDays}</span>
           <span className="type-text">DAY</span>
         </div>
       </div>
       <UsageHeatMap />
       <div className="action-btns-container">
+        <button className="btn action-btn" onClick={() => showDailyMemoDiaryDialog()}>
+          <span className="icon">📅</span> Daily View
+        </button>
         <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
-          <span className="icon">👤</span> Setting
+          <span className="icon">⚙️</span> Setting
         </button>
         <button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
           <span className="icon">🗑️</span> Recycle Bin

web/src/components/UserBanner.tsx

@@ -18,9 +18,6 @@ const UserBanner: React.FC<Props> = () => {
   }, []);
 
   const handlePopupBtnClick = () => {
-    const sidebarEl = document.querySelector(".sidebar-wrapper") as HTMLElement;
-    const popupEl = document.querySelector(".menu-btns-popup") as HTMLElement;
-    popupEl.style.top = 54 - sidebarEl.scrollTop + "px";
     setShouldShowPopupBtns(true);
   };
 

web/src/less/about-site-dialog.less

@@ -1,8 +1,10 @@
 @import "./mixin.less";
 
 .about-site-dialog {
+  @apply px-4;
+
   > .dialog-container {
-    @apply w-112;
+    @apply w-112 max-w-full;
 
     > .dialog-content-container {
       @apply leading-relaxed;
@@ -11,8 +13,7 @@
         @apply my-1;
 
         &.updated-time-text {
-          .flex(row, flex-start, center);
-          @apply w-full text-sm mt-3 pt-2 border-t-2 border-t-gray-200 text-gray-600 whitespace-pre-wrap font-mono;
+          @apply flex flex-row justify-start items-center w-full text-sm mt-3 pt-2 border-t-2 border-t-gray-200 text-gray-600 whitespace-pre-wrap font-mono;
         }
       }
 

web/src/less/daily-memo-diary-dialog.less

@@ -1,129 +1,76 @@
 @import "./mixin.less";
 
 .daily-memo-diary-dialog {
+  @apply p-0 sm:py-16;
+
   > .dialog-container {
-    width: 440px;
-    max-width: 100%;
-    padding: 0;
+    @apply w-112 max-w-full p-0 rounded-none sm:rounded-lg;
 
     > .dialog-header-container {
-      .flex(column, center, center);
-      position: relative;
-      width: 100%;
-      padding: 24px;
-      margin-bottom: 0;
-      padding-bottom: 0;
-
-      > .header-wrapper {
-        .flex(row, space-between, center);
-        width: 100%;
-
-        > .btns-container {
-          .flex(row, flex-start, center);
-
-          > .btn-text {
-            width: 24px;
-            height: 24px;
-            margin-right: 8px;
-            border-radius: 4px;
-            cursor: pointer;
-            user-select: none;
-
-            &:last-child {
-              margin-right: 0;
-            }
-
-            > .icon-img {
-              width: 100%;
-              height: auto;
-            }
-
-            &:hover {
-              background-color: lightgray;
-            }
-
-            &.share-btn {
-              padding: 2px;
-            }
+      @apply flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;
+
+      > .btns-container {
+        @apply flex flex-row justify-start items-center;
+
+        > .btn-text {
+          @apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200;
+
+          > .icon-img {
+            @apply w-full h-auto;
+          }
+
+          &.share-btn {
+            @apply w-5 h-auto;
           }
         }
       }
     }
 
     > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
-      width: 440px;
-      max-width: 100%;
-      height: auto;
-      padding: 24px 24px;
+      @apply w-full h-auto flex flex-col justify-start items-start p-6 pb-0;
 
       > .date-card-container {
-        .flex(column, center, center);
-        margin: auto;
-        padding-bottom: 24px;
+        @apply flex flex-col justify-center items-center m-auto pb-6 select-none;
         z-index: 1;
-        user-select: none;
 
         > .year-text {
-          margin: auto;
-          font-weight: bold;
-          color: gray;
-          text-align: center;
-          line-height: 24px;
-          margin-bottom: 12px;
+          @apply m-auto font-bold text-gray-600 text-center leading-6 mb-2;
         }
 
         > .date-container {
-          .flex(column, center, center);
-          margin: auto;
-          width: 96px;
-          height: 96px;
+          @apply flex flex-col justify-center items-center m-auto w-24 h-24;
           border-radius: 32px;
           box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-          border: 1px solid rgb(0 0 0 / 10%);
-          text-align: center;
-          z-index: 1;
 
           > .month-text,
           > .day-text {
-            .flex(column, center, center);
-            width: 100%;
-            height: 24px;
-            font-size: 14px;
+            @apply flex flex-col justify-center items-center w-full h-6 text-sm;
           }
 
           > .month-text {
-            background-color: @bg-blue;
-            color: white;
+            @apply bg-blue-700 text-white;
             border-top-left-radius: 32px;
             border-top-right-radius: 32px;
           }
 
           > .date-text {
-            .flex(column, center, center);
-            width: 100%;
-            padding-top: 4px;
-            height: 48px;
-            font-size: 44px;
+            @apply flex flex-col justify-center items-center w-full pt-1 h-12;
+            font-size: 40px;
             font-weight: bold;
           }
 
           > .day-text {
-            font-size: 12px;
+            @apply text-xs;
           }
         }
       }
 
       > .date-picker {
-        margin: 0 auto;
-        border: 1px solid lightgray;
-        border-radius: 8px;
-        margin-bottom: 24px;
+        @apply mx-auto border border-gray-200 rounded-lg mb-6;
       }
 
       > .tip-container {
-        margin: auto;
-        padding: 16px 0;
+        @apply m-auto py-4 px-0;
 
         > .tip-text {
           font-style: italic;
@@ -131,9 +78,7 @@
       }
 
       > .dailymemos-wrapper {
-        .flex(column, flex-start, flex-start);
-        margin-top: 8px;
-        width: 100%;
+        @apply flex flex-col justify-start items-start w-full mt-2;
       }
     }
   }

web/src/less/daily-memo.less

@@ -2,70 +2,36 @@
 
 .daily-memo-wrapper {
   .flex(row, flex-start, flex-start);
-  position: relative;
-  width: calc(100% - 24px);
-  margin-left: 24px;
-  padding: 0;
-  padding-bottom: 24px;
-  border: none;
-  border-left: 2px solid @bg-whitegray;
+  @apply flex flex-row justify-start items-start relative w-full flex-nowrap pb-6;
 
   &:last-child {
-    border-left: none;
-    padding-bottom: 0;
+    > .split-line {
+      @apply hidden;
+    }
   }
 
-  > .time-wrapper {
-    .flex(column, center, center);
-    position: relative;
-    left: -24px;
-    margin-top: -2px;
-    flex-shrink: 0;
-    width: 48px;
-    height: 28px;
-    border-radius: 6px;
-    background-color: @bg-lightgray;
-    color: @text-gray;
-    border: 2px solid white;
+  > .split-line {
+    @apply h-full px-px bg-gray-100 absolute top-1 left-6 z-0 -ml-px;
+  }
 
-    > .normal-text {
-      margin: 0 auto;
-      font-size: 11px;
-      line-height: 24px;
-    }
+  > .time-wrapper {
+    @apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 border-2 border-white text-gray-600 z-10;
   }
 
   > .memo-content-container {
-    .flex(column, flex-start, flex-start);
-    width: 100%;
-    margin-left: -12px;
-    padding: 0;
-    font-size: 16px;
+    @apply flex flex-col justify-start items-start w-full p-0 text-base;
 
     > .memo-content-text {
       .tag-span {
         cursor: unset;
-
-        &:hover {
-          color: @text-blue;
-          background-color: @bg-light-blue;
-        }
       }
     }
 
     > .images-container {
-      .flex(column, flex-start, flex-start);
-      width: 100%;
+      @apply flex flex-col justify-start items-start w-full;
 
       > img {
-        width: 100%;
-        height: auto;
-        border-radius: 4px;
-        margin-bottom: 8px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
+        @apply w-full h-auto rounded mb-2 last:mb-0;
       }
     }
   }

web/src/less/memo-content.less

@@ -5,7 +5,7 @@
   @apply w-full whitespace-pre-wrap break-words;
 
   > p {
-    @apply inline-block w-full h-auto mb-1 text-base leading-6 whitespace-pre-wrap break-words;
+    @apply inline-block w-full h-auto mb-1 text-base leading-7 whitespace-pre-wrap break-words;
   }
 
   .tag-span {

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

@@ -1,12 +1,10 @@
 @import "./mixin.less";
 
 .menu-btns-popup {
-  .flex(column, flex-start, flex-start);
-  @apply absolute right-0 top-0 mt-1 p-1 w-36 rounded-lg z-10 shadow bg-white;
+  @apply absolute right-2 top-8 flex flex-col justify-start items-start mt-4 p-1 w-36 rounded-lg z-10 shadow bg-white;
 
   > .btn {
-    .flex(row, flex-start, center);
-    @apply w-full py-2 px-3 text-base rounded text-left hover:bg-gray-100;
+    @apply flex flex-row justify-start items-center w-full py-2 px-3 text-base rounded text-left hover:bg-gray-100;
 
     > .icon {
       @apply block w-6 text-center mr-2 text-base;

web/src/less/user-banner.less

@@ -1,8 +1,7 @@
 @import "./mixin.less";
 
 .user-banner-container {
-  .flex(row, space-between, center);
-  @apply w-full h-auto px-6 flex-nowrap mb-1;
+  @apply flex flex-row justify-between items-center relative w-full h-auto px-6 flex-nowrap mb-1;
 
   > .username-container {
     @apply shrink flex flex-row justify-start items-center flex-nowrap truncate;
@@ -20,8 +19,7 @@
     @apply shrink-0 select-none border-none;
 
     &.menu-popup-btn {
-      .flex(column, center, center);
-      @apply w-9 h-10 -mr-2 cursor-pointer;
+      @apply flex flex-col justify-center items-center w-9 h-10 -mr-2 cursor-pointer;
 
       > .icon-img {
         @apply w-5 h-auto;