From 2e126c71f0c6a592fdca05306e6a25ae073f329d Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Sun, 10 Jul 2022 12:02:36 +0800
Subject: [PATCH] chore: update button elements

---
 web/src/components/DailyReviewDialog.tsx | 16 ++++++++--------
 web/src/components/MemoCardDialog.tsx    |  1 -
 web/src/components/MemoEditor.tsx        | 15 +++++++++------
 web/src/components/ShortcutList.tsx      |  4 ++--
 web/src/components/UserBanner.tsx        |  4 ++--
 web/src/less/tag-list.less               |  6 +++---
 6 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/web/src/components/DailyReviewDialog.tsx b/web/src/components/DailyReviewDialog.tsx
index 3754aae5..2314111d 100644
--- a/web/src/components/DailyReviewDialog.tsx
+++ b/web/src/components/DailyReviewDialog.tsx
@@ -63,18 +63,18 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
           <span className="icon-text">📅</span> Daily Review
         </p>
         <div className="btns-container">
-          <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
+          <button 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)}>
+          </button>
+          <button 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}>
+          </button>
+          <button className="btn-text share-btn" onClick={handleShareBtnClick}>
             <img className="icon-img" src="/icons/share.svg" />
-          </span>
-          <span className="btn-text" onClick={() => props.destroy()}>
+          </button>
+          <button className="btn-text" onClick={() => props.destroy()}>
             <img className="icon-img" src="/icons/close.svg" />
-          </span>
+          </button>
         </div>
         <DatePicker
           className={`date-picker ${showDatePicker ? "" : "!hidden"}`}
diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx
index 5509933f..211c847b 100644
--- a/web/src/components/MemoCardDialog.tsx
+++ b/web/src/components/MemoCardDialog.tsx
@@ -9,7 +9,6 @@ import { showDialog } from "./Dialog";
 import Image from "./Image";
 import { formatMemoContent } from "./Memo";
 import "../less/memo-card-dialog.less";
-import "../less/memo-content.less";
 
 interface LinkedMemo extends Memo {
   createdAtStr: string;
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 90787450..a76b337b 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -127,15 +127,14 @@ const MemoEditor: React.FC<Props> = () => {
     [state]
   );
 
-  const handleSaveBtnClick = useCallback(async (content: string) => {
+  const handleSaveBtnClick = async (content: string) => {
     if (content === "") {
       toastHelper.error("Content can't be empty");
       return;
     }
 
-    const { editMemoId } = editorStateService.getState();
-
     try {
+      const { editMemoId } = editorStateService.getState();
       if (editMemoId && editMemoId !== UNKNOWN_ID) {
         const prevMemo = memoService.getMemoById(editMemoId ?? UNKNOWN_ID);
 
@@ -156,8 +155,12 @@ const MemoEditor: React.FC<Props> = () => {
       toastHelper.error(error.message);
     }
 
+    setState({
+      ...state,
+      fullscreen: false,
+    });
     setEditorContentCache("");
-  }, []);
+  };
 
   const handleCancelBtnClick = useCallback(() => {
     editorStateService.clearEditMemo();
@@ -235,10 +238,10 @@ const MemoEditor: React.FC<Props> = () => {
                 })}
               </div>
             </div>
-            <div className="action-btn">
+            <button className="action-btn">
               <img className="icon-img" src="/icons/image.svg" onClick={handleUploadFileBtnClick} />
               <span className={`tip-text ${state.isUploadingResource ? "!block" : ""}`}>Uploading</span>
-            </div>
+            </button>
             <button className="action-btn" onClick={handleFullscreenBtnClick}>
               <img className="icon-img" src={`/icons/${state.fullscreen ? "close" : "open"}-fullscreen.svg`} alt="" />
             </button>
diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx
index 1b7d9fe8..a89762c3 100644
--- a/web/src/components/ShortcutList.tsx
+++ b/web/src/components/ShortcutList.tsx
@@ -38,9 +38,9 @@ const ShortcutList: React.FC<Props> = () => {
     <div className="shortcuts-wrapper">
       <p className="title-text">
         <span className="normal-text">Shortcuts</span>
-        <span className="btn" onClick={() => showCreateShortcutDialog()}>
+        <button className="btn" onClick={() => showCreateShortcutDialog()}>
           <img src="/icons/add.svg" alt="add shortcut" />
-        </span>
+        </button>
       </p>
       <div className="shortcuts-container">
         {sortedShortcuts.map((s) => {
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index d8bec85a..ec3c324c 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -44,9 +44,9 @@ const UserBanner: React.FC<Props> = () => {
           <span className="username-text">{username}</span>
           {!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null}
         </div>
-        <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
+        <button className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
           <img src="/icons/more.svg" className="icon-img" />
-        </span>
+        </button>
         <MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
       </div>
       <div className="status-text-container">
diff --git a/web/src/less/tag-list.less b/web/src/less/tag-list.less
index 2b5faeaf..a32e2713 100644
--- a/web/src/less/tag-list.less
+++ b/web/src/less/tag-list.less
@@ -12,7 +12,7 @@
     @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-4 pl-1;
+      @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1;
       width: calc(100% - 18px);
       min-width: 80px;
       border-left: 2px solid @bg-gray;
@@ -32,7 +32,7 @@
       }
 
       > .tag-text-container {
-        @apply flex flex-row justify-start items-center overflow-hidden text-ellipsis shrink-0 leading-5 text-black;
+        @apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black;
         max-width: calc(100% - 24px);
 
         > .icon-text {
@@ -40,7 +40,7 @@
         }
 
         > .tag-text {
-          @apply shrink-0;
+          @apply truncate;
         }
       }