Refine UI

Signed-off-by: Ryan Wang <i@ryanc.cc>

Author: ruibaby

packages/comment-widget/src/comment-editor.ts

@@ -125,9 +125,9 @@ export class CommentEditor extends LitElement {
 
   private renderSkeleton() {
     return html`<div
-        class="border rounded-md border-solid border-gray-200"
-        ?hidden=${!this.loading}
-      >
+      class="border rounded-md border-solid border-gray-200"
+      ?hidden=${!this.loading}
+    >
       <div class="animate-pulse p-4">
         <div class="h-4 my-1 w-20 bg-gray-200 rounded"></div>
       </div>
@@ -149,7 +149,9 @@ export class CommentEditor extends LitElement {
 
   private renderActionItem(item: ActionItem, editor?: Editor) {
     if (item.type === 'separator') {
-      return html`<li class="text-gray-100 text-xs">|</li>`;
+      return html`<li class="flex items-center">
+        <div class="w-1px bg-gray-100 rounded-full h-3"></div>
+      </li>`;
     }
 
     if (item.type === 'action') {

packages/comment-widget/src/emoji-button.ts

@@ -99,22 +99,25 @@ export class EmojiButton extends LitElement {
   }
 
   override render() {
-    return html`<button
-      class="emoji-button"
-      type="button"
+    return html`<div
+      role="button"
+      class="relative size-7 flex items-center justify-center cursor-pointer"
       aria-label=${msg('Select emoticon')}
     >
       ${
         this.emojiLoading
           ? html`<icon-loading></icon-loading>`
-          : html`<icon-emoji @click=${this.handleOpenEmojiPicker}></icon-emoji>`
+          : html`<div
+            class="i-mdi-sticker-emoji size-5 text-gray-500 hover:text-gray-900"
+            @click=${this.handleOpenEmojiPicker}
+          ></div>`
       }
       <div
         class="form__emoji-panel"
-        style="display: ${this.emojiPickerVisible ? 'block' : 'none'}"
+        ?hidden=${!this.emojiPickerVisible}
         ${ref(this.emojiPickerWrapperRef)}
       ></div>
-    </button>`;
+    </div>`;
   }
 
   static override styles = [
@@ -125,6 +128,8 @@ export class EmojiButton extends LitElement {
         display: inline-flex;
       }
 
+      @unocss-placeholder;
+
       em-emoji-picker {
         --rgb-color: var(--component-emoji-picker-rgb-color);
         --rgb-accent: var(--component-emoji-picker-rgb-accent);
@@ -134,16 +139,6 @@ export class EmojiButton extends LitElement {
         --color-border-over: var(--component-emoji-picker-color-border-over);
       }
 
-      .emoji-button {
-        color: var(--base-color);
-        display: inline-flex;
-        position: relative;
-      }
-
-      .emoji-button:hover icon-emoji {
-        opacity: 0.8;
-      }
-
       .form__emoji-panel {
         position: absolute;
         top: 2em;