From 0809ec8c72268789672ded765543627ba049e692 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Sat, 12 Nov 2022 21:22:51 +0800
Subject: [PATCH] chore: update editor style (#456)

---
 web/src/components/Editor/Editor.tsx          |  2 +-
 web/src/components/MemoEditor.tsx             |  5 +++--
 web/src/components/ResourceIcon.tsx           | 19 +++++++++++++++++++
 web/src/less/about-site-dialog.less           |  2 --
 web/src/less/archived-memo-dialog.less        |  2 --
 web/src/less/auth.less                        |  2 --
 web/src/less/memo-editor.less                 | 10 +++++-----
 web/src/less/memo-resources.less              |  2 +-
 web/src/less/settings/member-section.less     |  2 --
 web/src/less/settings/my-account-section.less |  5 +----
 .../less/settings/preferences-section.less    |  2 --
 web/src/less/toast.less                       |  2 --
 web/src/less/usage-heat-map.less              |  2 --
 web/src/less/user-banner.less                 |  7 ++-----
 14 files changed, 32 insertions(+), 32 deletions(-)
 create mode 100644 web/src/components/ResourceIcon.tsx

diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index 9f871c1a..f6e8324f 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -63,7 +63,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
 
         editorRef.current.value = value;
         editorRef.current.focus();
-        editorRef.current.selectionEnd = endPosition + prefix.length + suffix.length + content.length;
+        editorRef.current.selectionEnd = endPosition + prefix.length + content.length;
         handleContentChangeCallback(editorRef.current.value);
         refresh();
       },
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 903fa9da..2f417b07 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -1,4 +1,5 @@
 import { IEmojiData } from "emoji-picker-react";
+import { toLower } from "lodash";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
@@ -11,7 +12,7 @@ import toastHelper from "./Toast";
 import Selector from "./common/Selector";
 import Editor, { EditorRefActions } from "./Editor/Editor";
 import EmojiPicker from "./Editor/EmojiPicker";
-import { toLower } from "lodash";
+import ResourceIcon from "./ResourceIcon";
 import "../less/memo-editor.less";
 
 const getEditorContentCache = (): string => {
@@ -471,7 +472,7 @@ const MemoEditor = () => {
           {state.resourceList.map((resource) => {
             return (
               <div key={resource.id} className="resource-container">
-                {resource.type.includes("image") ? <Icon.Image className="icon-img" /> : <Icon.FileText className="icon-img" />}
+                <ResourceIcon resourceType="resource.type" className="icon-img" />
                 <span className="name-text">{resource.filename}</span>
                 <Icon.X className="close-icon" onClick={() => handleDeleteResource(resource.id)} />
               </div>
diff --git a/web/src/components/ResourceIcon.tsx b/web/src/components/ResourceIcon.tsx
new file mode 100644
index 00000000..01134dee
--- /dev/null
+++ b/web/src/components/ResourceIcon.tsx
@@ -0,0 +1,19 @@
+import Icon from "./Icon";
+
+interface Props {
+  className: string;
+  resourceType: string;
+}
+
+const ResourceIcon = (props: Props) => {
+  const { className, resourceType } = props;
+
+  let ResourceIcon = Icon.FileText;
+  if (resourceType.includes("image")) {
+    ResourceIcon = Icon.Image;
+  }
+
+  return <ResourceIcon className={className} />;
+};
+
+export default ResourceIcon;
diff --git a/web/src/less/about-site-dialog.less b/web/src/less/about-site-dialog.less
index c02fbe59..d10fc109 100644
--- a/web/src/less/about-site-dialog.less
+++ b/web/src/less/about-site-dialog.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .about-site-dialog {
   @apply px-4;
 
diff --git a/web/src/less/archived-memo-dialog.less b/web/src/less/archived-memo-dialog.less
index c2d8dc7c..73b102fd 100644
--- a/web/src/less/archived-memo-dialog.less
+++ b/web/src/less/archived-memo-dialog.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .archived-memo-dialog {
   @apply px-4;
 
diff --git a/web/src/less/auth.less b/web/src/less/auth.less
index 266ffd22..899d9706 100644
--- a/web/src/less/auth.less
+++ b/web/src/less/auth.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .page-wrapper.auth {
   @apply flex flex-row justify-center items-center w-full h-screen bg-white;
 
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index f39ded73..19f7db16 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -1,7 +1,7 @@
 @import "./mixin.less";
 
 .memo-editor-container {
-  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 pt-3 rounded-lg border-2 border-gray-200;
+  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white px-4 rounded-lg border-2 border-gray-200;
 
   &.fullscreen {
     @apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
@@ -31,7 +31,7 @@
   }
 
   > .editor-header-container {
-    @apply w-full flex flex-row justify-between items-center mb-1;
+    @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;
@@ -121,16 +121,16 @@
   }
 
   > .editor-footer-container {
-    @apply w-full flex flex-row justify-between items-center border-t pt-2 mt-2;
+    @apply w-full flex flex-row justify-between items-center border-t py-3 mt-2;
 
     > .visibility-selector {
-      @apply h-7;
+      @apply h-8;
 
       > .current-value-container {
         @apply rounded-full;
 
         > .value-text {
-          @apply text-xs w-full;
+          @apply text-sm w-full;
         }
       }
     }
diff --git a/web/src/less/memo-resources.less b/web/src/less/memo-resources.less
index 5d38370c..7140efa4 100644
--- a/web/src/less/memo-resources.less
+++ b/web/src/less/memo-resources.less
@@ -20,7 +20,7 @@
     @apply w-full flex flex-row justify-start flex-wrap;
 
     > .other-resource-container {
-      @apply mt-1 mr-1 max-w-full flex flex-row justify-start items-center flex-nowrap bg-gray-50 px-2 py-1 rounded cursor-pointer hover:bg-gray-100;
+      @apply mt-1 mr-1 max-w-full flex flex-row justify-start items-center flex-nowrap bg-gray-100 px-2 py-1 rounded cursor-pointer hover:bg-gray-200;
 
       > .icon-img {
         @apply w-4 h-auto mr-1 text-gray-500;
diff --git a/web/src/less/settings/member-section.less b/web/src/less/settings/member-section.less
index 7328fad7..206284e7 100644
--- a/web/src/less/settings/member-section.less
+++ b/web/src/less/settings/member-section.less
@@ -1,5 +1,3 @@
-@import "../mixin.less";
-
 .member-section-container {
   > .create-member-container {
     @apply w-full flex flex-col justify-start items-start;
diff --git a/web/src/less/settings/my-account-section.less b/web/src/less/settings/my-account-section.less
index 7c60d866..23d377e0 100644
--- a/web/src/less/settings/my-account-section.less
+++ b/web/src/less/settings/my-account-section.less
@@ -1,5 +1,3 @@
-@import "../mixin.less";
-
 .account-section-container {
   > .form-label {
     min-height: 28px;
@@ -50,8 +48,7 @@
   }
 
   > .usage-guide-container {
-    .flex(column, flex-start, flex-start);
-    @apply mt-2 w-full;
+    @apply flex flex-col justify-start items-start mt-2 w-full;
 
     > .title-text {
       @apply my-2 text-sm;
diff --git a/web/src/less/settings/preferences-section.less b/web/src/less/settings/preferences-section.less
index c7a167c3..5966530d 100644
--- a/web/src/less/settings/preferences-section.less
+++ b/web/src/less/settings/preferences-section.less
@@ -1,5 +1,3 @@
-@import "../mixin.less";
-
 .preferences-section-container {
   > .title-text {
     @apply mt-4 first:mt-1;
diff --git a/web/src/less/toast.less b/web/src/less/toast.less
index 44250739..1105f452 100644
--- a/web/src/less/toast.less
+++ b/web/src/less/toast.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .toast-list-container {
   @apply flex flex-col justify-start items-end fixed top-2 right-4 z-1000 max-h-full;
 
diff --git a/web/src/less/usage-heat-map.less b/web/src/less/usage-heat-map.less
index c46145ab..e60ee05a 100644
--- a/web/src/less/usage-heat-map.less
+++ b/web/src/less/usage-heat-map.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .usage-heat-map-wrapper {
   @apply flex flex-row justify-start items-center w-full h-32 flex-wrap pr-6 pb-3 shrink-0;
 
diff --git a/web/src/less/user-banner.less b/web/src/less/user-banner.less
index 0b7b32f6..387d6e68 100644
--- a/web/src/less/user-banner.less
+++ b/web/src/less/user-banner.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .user-banner-container {
   @apply flex flex-row justify-between items-center relative w-full h-10 px-6 flex-nowrap mb-1 shrink-0;
 
@@ -32,11 +30,10 @@
   @apply flex flex-row justify-between items-start w-full px-6 select-none shrink-0 pb-4;
 
   > .status-text {
-    .flex(column, flex-start, flex-start);
+    @apply flex flex-col justify-start items-start;
 
     > .amount-text {
-      @apply font-bold text-2xl opacity-80 leading-10;
-      color: @text-black;
+      @apply font-bold text-2xl opacity-80 leading-10 text-slate-600;
     }
 
     > .type-text {