From ad02ba600e5c14126a30488ea5608189280daef5 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 16:39:34 +0800
Subject: [PATCH] chore: enhance input field styles

---
 src/components/settings/SidebarSettings.tsx |  4 ++--
 src/styles/index.scss                       | 10 ----------
 src/utils/general.ts                        |  3 +++
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index 20c8335..f46422c 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -2,7 +2,7 @@ import { Button, TextInput } from '@primer/react'
 import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { friendlyFormatShortcut } from 'utils/general'
+import { friendlyFormatShortcut, noop } from 'utils/general'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import * as keyHelper from 'utils/keyHelper'
 import { Field } from './Field'
@@ -30,6 +30,7 @@ export function SidebarSettings() {
             onBlur={() => focused.onChange(false)}
             placeholder={focused.value ? 'Press key combination' : 'Click here to set'}
             value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
+            onChange={noop}
             onKeyDown={React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
               e.preventDefault()
               e.stopPropagation()
@@ -37,7 +38,6 @@ export function SidebarSettings() {
               const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
               useToggleShowSideBarShortcut.onChange(shortcut)
             }, [])} // eslint-disable-line react-hooks/exhaustive-deps
-            readOnly
           />
           {configContext.value.shortcut === toggleShowSideBarShortcut ? (
             <Button
diff --git a/src/styles/index.scss b/src/styles/index.scss
index cd4d3e9..14b1f1e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -301,14 +301,6 @@ $minimal-z-index: max(
   @include interactive-background($default, $hover, $active, $focus);
 }
 
-// Why does not TextInput get theme properly?
-@mixin input {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
-  border-color: var(--color-border-default);
-  box-shadow: var(--color-primer-shadow-inset);
-}
-
 .#{$name}-toggle-show-button-wrapper {
   @include hide-for-print();
 
@@ -941,14 +933,12 @@ $minimal-z-index: max(
         display: flex;
         .access-token-input {
           flex: 1;
-          @include input();
         }
       }
       .toggle-shortcut-input-control {
         display: flex;
         .toggle-shortcut-input {
           flex: 1;
-          @include input();
         }
       }
     }
diff --git a/src/utils/general.ts b/src/utils/general.ts
index e06852f..850244b 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -209,3 +209,6 @@ export function forOf<T, R>(target: T, callback: <K extends keyof T>(key: K, val
     if (r !== undefined) return r
   }
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function noop() {}