From 05e46ee4a8315adc73bdb8dd5143adbd383af00c Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Mon, 3 Oct 2022 09:11:07 +0800
Subject: [PATCH] fix: emoji picker style

---
 web/src/components/MemoEditor.tsx | 10 ++++----
 web/src/components/MemoList.tsx   |  2 +-
 web/src/less/memo-content.less    |  7 +++---
 web/src/less/memo-editor.less     | 38 ++++++++++++++++---------------
 web/src/less/memo-list.less       |  2 +-
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index ca88a4f1..4d6992f7 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -333,6 +333,11 @@ const MemoEditor: React.FC = () => {
           <button className="action-btn" onClick={handleFullscreenBtnClick}>
             {state.fullscreen ? <Icon.Minimize className="icon-img" /> : <Icon.Maximize className="icon-img" />}
           </button>
+          <EmojiPicker
+            shouldShow={state.shouldShowEmojiPicker}
+            onEmojiClick={handleEmojiClick}
+            onShouldShowEmojiPickerChange={handleChangeShouldShowEmojiPicker}
+          />
         </div>
         <div className="btns-container">
           <button className="action-btn confirm-btn" disabled={!allowSave} onClick={handleSaveBtnClick}>
@@ -353,11 +358,6 @@ const MemoEditor: React.FC = () => {
           })}
         </div>
       )}
-      <EmojiPicker
-        shouldShow={state.shouldShowEmojiPicker}
-        onEmojiClick={handleEmojiClick}
-        onShouldShowEmojiPickerChange={handleChangeShouldShowEmojiPicker}
-      />
     </div>
   );
 };
diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx
index eaf00af2..6641798c 100644
--- a/web/src/components/MemoList.tsx
+++ b/web/src/components/MemoList.tsx
@@ -92,7 +92,7 @@ const MemoList = () => {
   }, [query]);
 
   return (
-    <div className={`memo-list-container ${isFetching ? "" : "completed"}`} ref={wrapperElement}>
+    <div className="memo-list-container" ref={wrapperElement}>
       {sortedMemos.map((memo) => (
         <Memo key={`${memo.id}-${memo.createdTs}-${memo.updatedTs}`} memo={memo} />
       ))}
diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less
index 6f55ac71..e98fd9bc 100644
--- a/web/src/less/memo-content.less
+++ b/web/src/less/memo-content.less
@@ -34,14 +34,15 @@
       @apply text-blue-600 cursor-pointer underline break-all hover:opacity-80;
     }
 
-    .counter-block,
+    .ol-block,
+    .ul-block,
     .todo-block {
-      @apply float-left inline-block box-border text-center w-7 font-mono select-none;
+      @apply inline-block box-border text-center w-7 font-mono select-none;
     }
 
     .todo-block {
       @apply w-4 h-4 leading-4 border rounded box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
-      margin-top: 6px;
+      transform: translateY(2px);
       margin-left: 6px;
       margin-right: 6px;
     }
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 835672f4..70444b0e 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -5,11 +5,11 @@
 
   &.float {
     @media (max-width: 640px) {
-      @apply fixed w-full bottom-2 left-0 border-none rounded-none sm:relative sm:bottom-0 sm:w-full;
+      @apply fixed w-full bottom-0 left-0 border-none rounded-none;
       background-color: #f6f5f4;
 
       > .memo-editor {
-        @apply p-4 rounded-lg border-2 flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
+        @apply p-4 mb-2 rounded-lg border-2 flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
 
         .tag-action > .tag-list {
           @apply bottom-7;
@@ -18,7 +18,8 @@
       }
 
       .emoji-picker-react {
-        @apply bottom-16;
+        @apply !bottom-8;
+        top: unset !important;
       }
     }
   }
@@ -28,20 +29,21 @@
     background-color: #f6f5f4;
 
     > .memo-editor {
-      @apply p-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
+      @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
 
       > .common-editor-inputer {
         @apply flex-grow w-full !h-full max-h-full;
       }
+    }
 
-      .tag-action > .tag-list {
-        @apply bottom-7;
-        top: unset;
-      }
+    .tag-action > .tag-list {
+      @apply bottom-7;
+      top: unset;
     }
 
     .emoji-picker-react {
-      @apply bottom-20;
+      @apply !bottom-8;
+      top: unset !important;
     }
   }
 
@@ -66,7 +68,7 @@
   }
 
   > .common-tools-wrapper {
-    @apply w-full flex flex-row justify-between items-center;
+    @apply relative w-full flex flex-row justify-between items-center;
 
     > .common-tools-container {
       @apply flex flex-row justify-start items-center;
@@ -104,6 +106,14 @@
           @apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2;
         }
       }
+
+      .emoji-picker-react {
+        @apply absolute shadow left-6 top-8;
+
+        li.emoji::before {
+          @apply hidden;
+        }
+      }
     }
 
     > .btns-container {
@@ -146,12 +156,4 @@
       }
     }
   }
-
-  .emoji-picker-react {
-    @apply absolute shadow;
-
-    li.emoji::before {
-      @apply hidden;
-    }
-  }
 }
diff --git a/web/src/less/memo-list.less b/web/src/less/memo-list.less
index 4df2a833..39d7c228 100644
--- a/web/src/less/memo-list.less
+++ b/web/src/less/memo-list.less
@@ -1,7 +1,7 @@
 @import "./mixin.less";
 
 .memo-list-container {
-  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll;
+  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll !pb-36;
   .hide-scroll-bar();
 
   > .status-text-container {