chore: enhance input field styles

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

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

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() {}