fix: display error message properly

src/components/ToggleShowButton.tsx

@@ -2,14 +2,13 @@ import iconSrc from 'assets/icons/Gitako.png'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
-import { cx } from 'utils/cx'
 
 type Props = {
   error?: string
 } & Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick'>
 
 export function ToggleShowButton({ error, onClick }: Props) {
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLDivElement>(null)
   const config = useConfigs()
   const [distance, setDistance] = React.useState(config.val.toggleButtonVerticalDistance)
   const { height } = useWindowSize()
@@ -34,27 +33,26 @@ export function ToggleShowButton({ error, onClick }: Props) {
   )
 
   return (
-    <button
-      ref={ref}
-      className={cx('gitako-toggle-show-button-wrapper', {
-        error,
-      })}
-      onClick={onClick}
-      draggable
-      onDragStart={event => {
-        hideDragPreview(event)
-      }}
-      onDrag={e => {
-        if (e.clientY !== 0) {
-          // It will be 0 when release pointer
-          setDistance(e.clientY - buttonHeight / 2)
-        }
-      }}
-      title={'You can drag me'}
-    >
-      <img draggable={false} src={iconSrc} />
+    <div ref={ref} className={'gitako-toggle-show-button-wrapper'}>
+      <button
+        className={'gitako-toggle-show-button'}
+        onClick={onClick}
+        draggable
+        onDragStart={event => {
+          hideDragPreview(event)
+        }}
+        onDrag={e => {
+          if (e.clientY !== 0) {
+            // It will be 0 when release pointer
+            setDistance(e.clientY - buttonHeight / 2)
+          }
+        }}
+        title={'You can drag me'}
+      >
+        <img draggable={false} src={iconSrc} />
+      </button>
       {error && <span className={'error-message'}>{error}</span>}
-    </button>
+    </div>
   )
 }
 

src/content.scss

@@ -160,43 +160,53 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 }
 
 .#{$name}-toggle-show-button-wrapper {
-  @include icon-button;
-  width: 48px;
-  height: 48px;
+  z-index: $minimal-z-index;
   position: fixed;
   top: 80px;
   left: -16px;
-  z-index: $minimal-z-index;
-  background: transparent;
-  border: none;
-  padding: 0;
-  transition: left ease 0.5s;
-  &:hover {
-    left: -12px;
-    img {
-      filter: drop-shadow(0 0 2px #888888);
-      width: 92%;
-      height: 92%;
-    }
-  }
+  display: inline-flex;
+  align-items: center;
 
-  img {
-    filter: drop-shadow(0 0 1px #aaaaaa);
-    transition: all ease 0.3s;
-    width: 90%;
-    height: 90%;
-    object-fit: contain;
+  .#{$name}-toggle-show-button {
+    @include icon-button;
+    width: 48px;
+    height: 48px;
+    background: transparent;
+    border: none;
+    padding: 0;
+    transition: left ease 0.5s;
+    &:hover {
+      left: -12px;
+      img {
+        filter: drop-shadow(0 0 2px #888888);
+        width: 92%;
+        height: 92%;
+      }
+    }
+
+    img {
+      filter: drop-shadow(0 0 1px #aaaaaa);
+      transition: all ease 0.3s;
+      width: 90%;
+      height: 90%;
+      object-fit: contain;
+    }
   }
 
   .error-message {
     display: none;
     margin-left: 4px;
+    padding: 2px 4px;
     font-size: 12px;
+    color: $text-red;
+    border: 1px solid $gray-200;
+    border-radius: 2px;
+    background-color: $gray-100;
   }
 
   &:hover {
     .error-message {
-      display: inline;
+      display: inline-block;
     }
   }
 }