chore: update editor style (#456)

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();
       },

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>

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;

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

@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .about-site-dialog {
   @apply px-4;
 

web/src/less/archived-memo-dialog.less

@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .archived-memo-dialog {
   @apply px-4;
 

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;
 

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;
         }
       }
     }

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;

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;

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;

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;

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;
 

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;
 

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 {