chore: update cancel edit button style (#472)

web/src/components/MemoEditor.tsx

@@ -415,14 +415,6 @@ const MemoEditor = () => {
       onFocus={handleEditorFocus}
       onBlur={handleEditorBlur}
     >
-      <div className="editor-header-container">
-        <div className={`editing-container ${isEditing ? "" : "!hidden"}`}>
-          <span className="tip-text">{t("editor.editing")}</span>
-          <button className="cancel-btn" onClick={handleCancelEdit}>
-            {t("common.cancel")}
-          </button>
-        </div>
-      </div>
       <Editor ref={editorRef} {...editorConfig} />
       <div className="common-tools-wrapper">
         <div className="common-tools-container">
@@ -488,6 +480,9 @@ const MemoEditor = () => {
           handleValueChanged={handleMemoVisibilityOptionChanged}
         />
         <div className="buttons-container">
+          <button className={`action-btn cancel-btn ${isEditing ? "" : "!hidden"}`} onClick={handleCancelEdit}>
+            {t("editor.cancel-edit")}
+          </button>
           <button className="action-btn confirm-btn" disabled={!allowSave || state.isUploadingResource} onClick={handleSaveBtnClick}>
             {t("editor.save")}
             <img className="icon-img w-4 h-auto" src="/logo.webp" />

web/src/less/memo-editor.less

@@ -28,24 +28,8 @@
     @apply border-blue-500;
   }
 
-  > .editor-header-container {
-    @apply w-full flex flex-row justify-between items-center mt-3 mb-1;
-
-    > .editing-container {
-      @apply flex flex-row justify-start items-center text-xs;
-
-      > .tip-text {
-        @apply text-gray-400 mr-2;
-      }
-
-      > .cancel-btn {
-        @apply px-2 border rounded-full leading-5 text-blue-600 hover:border-blue-600;
-      }
-    }
-  }
-
   > .memo-editor {
-    @apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
+    @apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-white;
   }
 
   > .common-tools-wrapper {
@@ -136,6 +120,10 @@
     > .buttons-container {
       @apply grow-0 shrink-0 flex flex-row justify-end items-center;
 
+      > .cancel-btn {
+        @apply mr-4 text-sm text-gray-600 hover:opacity-80;
+      }
+
       > .confirm-btn {
         @apply border-none select-none rounded flex flex-row justify-center items-center shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
 

web/src/locales/en.json

@@ -80,6 +80,7 @@
   },
   "editor": {
     "editing": "Editing...",
+    "cancel-edit": "Cancel Edit",
     "save": "Save",
     "placeholder": "Any thoughts...",
     "only-image-supported": "Only image file supported.",

web/src/locales/vi.json

@@ -80,6 +80,7 @@
   },
   "editor": {
     "editing": "Đang chỉnh sửa...",
+    "cancel-edit": "Cancel Edit",
     "save": "Lưu",
     "placeholder": "Bất cứ gì bạn đang nghĩ...",
     "only-image-supported": "Chỉ hỗ trợ hình ảnh.",

web/src/locales/zh.json

@@ -80,6 +80,7 @@
   },
   "editor": {
     "editing": "编辑中...",
+    "cancel-edit": "退出编辑",
     "save": "记下",
     "placeholder": "现在的想法是...",
     "only-image-supported": "仅支持图片文件。",