1 files changed, 61 insertions, 43 deletions

diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx
index 9d71cac..2e2ff52 100644
--- a/src/settings/components/index.tsx
+++ b/src/settings/components/index.tsx
@@ -1,7 +1,8 @@
-import "./site.scss";
 import React from "react";
 import { connect } from "react-redux";
-import Input from "./ui/Input";
+import styled from "styled-components";
+import TextArea from "./ui/TextArea";
+import Radio from "./ui/Radio";
 import SearchForm from "./form/SearchForm";
 import KeymapsForm from "./form/KeymapsForm";
 import BlacklistForm from "./form/BlacklistForm";
@@ -18,6 +19,28 @@ import { State as AppState } from "../reducers/setting";
 import Properties from "../../shared/settings/Properties";
 import Blacklist from "../../shared/settings/Blacklist";
 
+const Container = styled.form`
+  padding: 2px;
+  font-family: system-ui;
+`;
+
+const Fieldset = styled.fieldset`
+  margin: 0;
+  padding: 0;
+  border: none;
+  margin-top: 1rem;
+
+  &:first-of-type {
+    margin-top: 1rem;
+  }
+`;
+
+const Legend = styled.legend`
+  font-size: 1.5rem;
+  padding: 0.5rem 0;
+  font-weight: bold;
+`;
+
 const DO_YOU_WANT_TO_CONTINUE =
   "Some settings in JSON can be lost when migrating.  " +
   "Do you want to continue?";
@@ -40,47 +63,47 @@ class SettingsComponent extends React.Component<Props> {
   renderFormFields(form: FormSettings) {
     return (
       <div>
-        <fieldset>
-          <legend>Keybindings</legend>
+        <Fieldset>
+          <Legend>Keybindings</Legend>
           <KeymapsForm
             value={form.keymaps}
             onChange={this.bindKeymapsForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Search Engines</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Search Engines</Legend>
           <SearchForm
             value={form.search}
             onChange={this.bindSearchForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Blacklist</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Blacklist</Legend>
           <BlacklistForm
             value={form.blacklist}
             onChange={this.bindBlacklistForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Partial blacklist</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Partial blacklist</Legend>
           <PartialBlacklistForm
             value={form.blacklist}
             onChange={this.bindBlacklistForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Properties</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Properties</Legend>
           <PropertiesForm
             types={Properties.types()}
             value={form.properties.toJSON()}
             onChange={this.bindPropertiesForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
+        </Fieldset>
       </div>
     );
   }
@@ -88,8 +111,7 @@ class SettingsComponent extends React.Component<Props> {
   renderJsonFields(json: JSONTextSettings, error: string) {
     return (
       <div>
-        <Input
-          type="textarea"
+        <TextArea
           name="json"
           label="Plain JSON"
           spellCheck={false}
@@ -111,32 +133,28 @@ class SettingsComponent extends React.Component<Props> {
       fields = this.renderJsonFields(this.props.json!, this.props.error);
     }
     return (
-      <div>
+      <Container>
         <h1>Configure Vim-Vixen</h1>
-        <form className="vimvixen-settings-form">
-          <Input
-            type="radio"
-            id="setting-source-form"
-            name="source"
-            label="Use form"
-            checked={this.props.source === "form"}
-            value="form"
-            onValueChange={this.bindSource.bind(this)}
-            disabled={disabled}
-          />
+        <Radio
+          id="setting-source-form"
+          name="source"
+          label="Use form"
+          checked={this.props.source === "form"}
+          value="form"
+          onValueChange={this.bindSource.bind(this)}
+          disabled={disabled}
+        />
 
-          <Input
-            type="radio"
-            name="source"
-            label="Use plain JSON"
-            checked={this.props.source === "json"}
-            value="json"
-            onValueChange={this.bindSource.bind(this)}
-            disabled={disabled}
-          />
-          {fields}
-        </form>
-      </div>
+        <Radio
+          name="source"
+          label="Use plain JSON"
+          checked={this.props.source === "json"}
+          value="json"
+          onValueChange={this.bindSource.bind(this)}
+          disabled={disabled}
+        />
+        {fields}
+      </Container>
     );
   }