From 282d2b945506cfd8a86414d200f073f233a58742 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 19 Mar 2020 21:47:50 +0800
Subject: [PATCH] chore: enhance layout

---
 src/components/SettingsBar.tsx                |  2 +-
 src/components/SimpleToggleField.tsx          | 32 ++++----
 .../settings/AccessTokenSettings.tsx          | 74 +++++++++----------
 src/components/settings/Field.tsx             | 33 +++++++++
 src/components/settings/FileTreeSettings.tsx  | 39 +++++-----
 src/components/settings/SettingsSection.tsx   |  4 +-
 src/components/settings/SidebarSettings.tsx   | 36 +++++----
 src/content.scss                              | 24 +++---
 8 files changed, 144 insertions(+), 100 deletions(-)
 create mode 100644 src/components/settings/Field.tsx

diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 9b9c712..b1554a8 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -54,7 +54,7 @@ function SettingsBarContent() {
 
   return (
     <>
-      <h3 className={'gitako-settings-bar-title'}>Settings</h3>
+      <h2 className={'gitako-settings-bar-title'}>Settings</h2>
       <div className={'gitako-settings-bar-content'}>
         <div className={'shadow-shelter'} />
         <AccessTokenSettings />
diff --git a/src/components/SimpleToggleField.tsx b/src/components/SimpleToggleField.tsx
index ed0b03f..e45ea2a 100644
--- a/src/components/SimpleToggleField.tsx
+++ b/src/components/SimpleToggleField.tsx
@@ -1,6 +1,6 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { cx } from 'utils/cx'
+import { Field } from './settings/Field'
 import { SimpleField } from './SettingsBar'
 
 type Props = {
@@ -13,7 +13,23 @@ export function SimpleToggleField({ field, onChange }: Props) {
   const configContext = useConfigs()
   const value = configContext.val[field.key]
   return (
-    <div className={cx('field', 'field-checkbox')}>
+    <Field
+      id={field.key}
+      title={
+        <>
+          {field.label}{' '}
+          {field.wikiLink ? (
+            <a href={field.wikiLink} target={'_blank'}>
+              (?)
+            </a>
+          ) : (
+            field.description && <p className={'note'}>{field.description}</p>
+          )}
+        </>
+      }
+      className={'field-checkbox'}
+      checkbox
+    >
       <input
         id={field.key}
         name={field.key}
@@ -25,16 +41,6 @@ export function SimpleToggleField({ field, onChange }: Props) {
         }}
         checked={overwrite ? overwrite.value(value) : Boolean(value)}
       />
-      <label htmlFor={field.key}>
-        {field.label}{' '}
-        {field.wikiLink ? (
-          <a href={field.wikiLink} target={'_blank'}>
-            (?)
-          </a>
-        ) : (
-          field.description && <p className={'note'}>{field.description}</p>
-        )}
-      </label>
-    </div>
+    </Field>
   )
 }
diff --git a/src/components/settings/AccessTokenSettings.tsx b/src/components/settings/AccessTokenSettings.tsx
index 00b3ba9..c4a3e71 100644
--- a/src/components/settings/AccessTokenSettings.tsx
+++ b/src/components/settings/AccessTokenSettings.tsx
@@ -62,50 +62,48 @@ export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
   return (
     <SettingsSection
       title={
-        <span>
-          Access Token
+        <>
+          Access Token{' '}
           <a href={wikiLinks.createAccessToken} target="_blank">
-            {' '}
             (?)
           </a>
-        </span>
+        </>
       }
     >
-      {!hasAccessToken && (
-        <a
-          className={'link-button'}
-          onClick={() => {
-            // use js here to make sure redirect_uri is latest url
-            const url = `https://github.com/login/oauth/authorize?client_id=${
-              oauth.clientId
-            }&scope=repo&redirect_uri=${encodeURIComponent(window.location.href)}`
-            window.location.href = url
-          }}
-        >
-          Create with OAuth (recommended)
-        </a>
+      {hasAccessToken ? (
+        <Button onClick={() => configContext.set({ access_token: '' })}>Clear</Button>
+      ) : (
+        <div>
+          <a
+            className={'link-button'}
+            onClick={() => {
+              // use js here to make sure redirect_uri is latest url
+              const url = `https://github.com/login/oauth/authorize?client_id=${
+                oauth.clientId
+              }&scope=repo&redirect_uri=${encodeURIComponent(window.location.href)}`
+              window.location.href = url
+            }}
+          >
+            Create with OAuth (recommended)
+          </a>
+          <div className={'access-token-input-control'}>
+            <TextInput
+              backgroundColor="#fff"
+              marginRight={1}
+              className={'access-token-input'}
+              value={accessToken}
+              placeholder="Or input here manually"
+              onFocus={() => focusInput.set(true)}
+              onBlur={() => focusInput.set(false)}
+              onChange={onInputAccessToken}
+              onKeyPress={onPressAccessToken}
+            />
+            <Button onClick={() => saveToken()} disabled={!accessToken}>
+              Save
+            </Button>
+          </div>
+        </div>
       )}
-      <div className={'access-token-input-control'}>
-        <TextInput
-          backgroundColor="#fff"
-          marginRight={1}
-          className={'access-token-input'}
-          disabled={hasAccessToken}
-          placeholder={hasAccessToken ? 'Your token is saved' : 'Or input here manually'}
-          value={accessToken}
-          onFocus={() => focusInput.set(true)}
-          onBlur={() => focusInput.set(false)}
-          onChange={onInputAccessToken}
-          onKeyPress={onPressAccessToken}
-        />
-        {hasAccessToken && !accessToken ? (
-          <Button onClick={() => configContext.set({ access_token: '' })}>Clear</Button>
-        ) : (
-          <Button onClick={() => saveToken()} disabled={!accessToken}>
-            Save
-          </Button>
-        )}
-      </div>
       {accessTokenHint && !focusInput.val && <span className={'hint'}>{accessTokenHint}</span>}
     </SettingsSection>
   )
diff --git a/src/components/settings/Field.tsx b/src/components/settings/Field.tsx
new file mode 100644
index 0000000..87031fe
--- /dev/null
+++ b/src/components/settings/Field.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { cx } from 'utils/cx'
+
+type Props = {
+  id?: string
+  className?: string
+  checkbox?: boolean
+  title: React.ReactNode
+}
+
+export function Field({
+  className,
+  title,
+  id,
+  checkbox,
+  children,
+}: React.PropsWithChildren<Props>) {
+  return (
+    <div className={cx('field', className)}>
+      {checkbox ? (
+        <>
+          {children}
+          <label htmlFor={id}>{title}</label>
+        </>
+      ) : (
+        <>
+          <label htmlFor={id}>{title}</label>
+          <div>{children}</div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx
index 24e97b2..67365c2 100644
--- a/src/components/settings/FileTreeSettings.tsx
+++ b/src/components/settings/FileTreeSettings.tsx
@@ -3,6 +3,7 @@ import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { Config } from 'utils/configHelper'
+import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
 const options: {
@@ -33,27 +34,23 @@ export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
   const configContext = useConfigs()
   return (
     <SettingsSection title={'File Tree'}>
-      <div className={'field'}>
-        <label htmlFor="file-tree-icons">Icons</label>
-        <div>
-          <select
-            id="file-tree-icons"
-            onChange={e => {
-              configContext.set({
-                icons: e.target.value as Config['icons'],
-              })
-            }}
-            className={'file-tree-input form-control'}
-            value={configContext.val.icons}
-          >
-            {options.map(option => (
-              <option key={option.key} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
+      <Field title="Icons" id="file-tree-icons">
+        <select
+          id="file-tree-icons"
+          onChange={e => {
+            configContext.set({
+              icons: e.target.value as Config['icons'],
+            })
+          }}
+          value={configContext.val.icons}
+        >
+          {options.map(option => (
+            <option key={option.key} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </Field>
       <SimpleToggleField
         field={{
           key: 'compressSingletonFolder',
diff --git a/src/components/settings/SettingsSection.tsx b/src/components/settings/SettingsSection.tsx
index 7d91150..209bd16 100644
--- a/src/components/settings/SettingsSection.tsx
+++ b/src/components/settings/SettingsSection.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 type Props = {
-  title: React.ReactNode
+  title?: React.ReactNode
 }
 
 export function SettingsSection({ title, children }: React.PropsWithChildren<Props>) {
   return (
     <div className={'settings-section'}>
-      <h4>{title}</h4>
+      {title && <h3>{title}</h3>}
       {children}
     </div>
   )
diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index 10374f7..6142014 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -5,6 +5,7 @@ import * as React from 'react'
 import { friendlyFormatShortcut } from 'utils/general'
 import { useStates } from 'utils/hooks/useStates'
 import * as keyHelper from 'utils/keyHelper'
+import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
 type Props = {}
@@ -21,8 +22,7 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
 
   return (
     <SettingsSection title={'Toggle Sidebar'}>
-      <div className={'field'}>
-        <label htmlFor="toggle-sidebar-shortcut">Keyboard Shortcut</label>
+      <Field id="toggle-sidebar-shortcut" title="Keyboard Shortcut">
         <div className={'toggle-shortcut-input-control'}>
           <TextInput
             id="toggle-sidebar-shortcut"
@@ -42,18 +42,28 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
             }, [])}
             readOnly
           />
-          <Button
-            disabled={toggleShowSideBarShortcut === configContext.val.shortcut}
-            onClick={() => {
-              const { val: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
-              if (typeof toggleShowSideBarShortcut !== 'string') return
-              configContext.set({ shortcut: toggleShowSideBarShortcut })
-            }}
-          >
-            Save
-          </Button>
+          {configContext.val.shortcut === toggleShowSideBarShortcut ? (
+            <Button
+              disabled={!configContext.val.shortcut}
+              onClick={() => {
+                configContext.set({ shortcut: '' })
+              }}
+            >
+              Clear
+            </Button>
+          ) : (
+            <Button
+              onClick={() => {
+                const { val: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+                if (typeof toggleShowSideBarShortcut !== 'string') return
+                configContext.set({ shortcut: toggleShowSideBarShortcut })
+              }}
+            >
+              Save
+            </Button>
+          )}
         </div>
-      </div>
+      </Field>
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',
diff --git a/src/content.scss b/src/content.scss
index 8a3de40..d6fda16 100644
--- a/src/content.scss
+++ b/src/content.scss
@@ -417,7 +417,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       max-height: 100%;
       &-title {
         border-top: 1px solid $border-gray-light;
-        padding: 6px 10px;
+        padding: 10px;
         box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
           0 3px 3px -2px rgba(0, 0, 0, 0.12);
         z-index: 1;
@@ -439,7 +439,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         }
         .settings-section {
           &:not(:last-of-type) {
-            margin-bottom: 16px;
+            margin-bottom: 30px;
           }
 
           .field {
@@ -448,7 +448,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             label {
               display: inline-block;
               margin-bottom: 2px;
-              font-weight: 500;
+              font-weight: 600;
+            }
+            input {
+              &:disabled {
+                cursor: not-allowed;
+              }
+            }
+            select {
+              width: 100%;
+              background: $bg-white;
             }
             &.field-checkbox {
               padding-left: 20px;
@@ -457,21 +466,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
                 margin-bottom: 0;
               }
 
-              input {
-                &:disabled {
-                  cursor: not-allowed;
-                }
-              }
               input[type='checkbox'],
               input[type='radio'] {
                 float: left;
                 margin: 5px 0 0 -20px;
                 vertical-align: middle;
               }
-              select {
-                -moz-appearance: none;
-                background: $bg-white;
-              }
             }
           }
         }