Merge pull request #838 from ueokande/form-styled-components

Use styled-components instead of vanilla CSS/SCSS in option

21 files changed, 512 insertions, 461 deletions

diff --git a/src/settings/components/form/BlacklistForm.scss b/src/settings/components/form/BlacklistForm.scss
deleted file mode 100644
index a230d0d..0000000
--- a/src/settings/components/form/BlacklistForm.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.form-blacklist-form {
-  &-row {
-    display: flex;
-
-    .column-url {
-      flex: 1;
-    }
-  }
-}
diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index 859cb9f..6fb9eca 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -1,9 +1,29 @@
-import "./BlacklistForm.scss";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
 import React from "react";
 import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 1;
+  }
+  &:nth-child(2) {
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: Blacklist;
   onChange: (value: Blacklist) => void;
@@ -19,37 +39,46 @@ class BlacklistForm extends React.Component<Props> {
 
   render() {
     return (
-      <div className="form-blacklist-form">
-        {this.props.value.items.map((item, index) => {
-          if (item.partial) {
-            return null;
-          }
-          return (
-            <div key={index} className="form-blacklist-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                className="column-url"
-                value={item.pattern}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton
-                data-index={index}
-                name="delete"
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>
-          );
-        })}
+      <>
+        <Grid role="list">
+          {this.props.value.items.map((item, index) => {
+            if (item.partial) {
+              return null;
+            }
+            return (
+              <GridRow role="listitem" key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    aria-label="URL"
+                    value={item.pattern}
+                    placeholder="example.com/mail/*"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                    aria-label="Delete"
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/src/settings/components/form/KeymapsForm.scss b/src/settings/components/form/KeymapsForm.scss
deleted file mode 100644
index 1a4e5cd..0000000
--- a/src/settings/components/form/KeymapsForm.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.form-keymaps-form {
-  column-count: 3;
-
-  &-field-group {
-    margin-top: 24px;
-  }
-
-  &-field-group:first-of-type {
-    margin-top: 24px;
-  }
-}
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index b9af0df..6582529 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -1,9 +1,21 @@
-import "./KeymapsForm.scss";
 import React from "react";
-import Input from "../ui/Input";
+import styled from "styled-components";
+import Text from "../ui/Text";
 import keymaps from "../../keymaps";
 import { FormKeymaps } from "../../../shared/SettingData";
 
+const Grid = styled.div`
+  column-count: 3;
+`;
+
+const FieldGroup = styled.div`
+  margin-top: 24px;
+
+  &:first-of-type {
+    margin-top: 24px;
+  }
+`;
+
 interface Props {
   value: FormKeymaps;
   onChange: (e: FormKeymaps) => void;
@@ -20,15 +32,14 @@ class KeymapsForm extends React.Component<Props> {
   render() {
     const values = this.props.value.toJSON();
     return (
-      <div className="form-keymaps-form">
+      <Grid>
         {keymaps.fields.map((group, index) => {
           return (
-            <div key={index} className="form-keymaps-form-field-group">
+            <FieldGroup key={index}>
               {group.map(([name, label]) => {
                 const value = values[name] || "";
                 return (
-                  <Input
-                    type="text"
+                  <Text
                     id={name}
                     name={name}
                     key={name}
@@ -39,10 +50,10 @@ class KeymapsForm extends React.Component<Props> {
                   />
                 );
               })}
-            </div>
+            </FieldGroup>
           );
         })}
-      </div>
+      </Grid>
     );
   }
 
diff --git a/src/settings/components/form/PartialBlacklistForm.scss b/src/settings/components/form/PartialBlacklistForm.scss
deleted file mode 100644
index caf6f93..0000000
--- a/src/settings/components/form/PartialBlacklistForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-partial-blacklist-form {
-  @mixin row-base {
-    display: flex;
-
-    .column-url {
-      flex: 5;
-      min-width: 0;
-    }
-    .column-keys {
-      flex: 1;
-      min-width: 0;
-    }
-    .column-delete {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
-  &-header {
-    @include row-base;
-
-    font-weight: bold;
-  }
-
-  &-row {
-    @include row-base;
-  }
-}
diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 95beee8..b2da2bb 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -1,9 +1,41 @@
-import "./PartialBlacklistForm.scss";
+import React from "react";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
-import React from "react";
 import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
+const Grid = styled.div``;
+
+const GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 5;
+  }
+
+  &:nth-child(2) {
+    flex-shrink: 1;
+    min-width: 20%;
+    max-width: 20%;
+  }
+
+  &:nth-child(3) {
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: Blacklist;
   onChange: (value: Blacklist) => void;
@@ -19,50 +51,62 @@ class PartialBlacklistForm extends React.Component<Props> {
 
   render() {
     return (
-      <div className="form-partial-blacklist-form">
-        <div className="form-partial-blacklist-form-header">
-          <div className="column-url">URL</div>
-          <div className="column-keys">Keys</div>
-        </div>
-        {this.props.value.items.map((item, index) => {
-          if (!item.partial) {
-            return null;
-          }
-          return (
-            <div key={index} className="form-partial-blacklist-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                className="column-url"
-                value={item.pattern}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <input
-                data-index={index}
-                type="text"
-                name="keys"
-                className="column-keys"
-                value={item.keys.join(",")}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton
-                data-index={index}
-                name="delete"
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>
-          );
-        })}
+      <>
+        <Grid role="list">
+          <GridHeader>
+            <GridCell>URL</GridCell>
+            <GridCell>Keys</GridCell>
+          </GridHeader>
+          {this.props.value.items.map((item, index) => {
+            if (!item.partial) {
+              return null;
+            }
+            return (
+              <GridRow key={index} role="listitem">
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    aria-label="URL"
+                    value={item.pattern}
+                    placeholder="example.com/mail/*"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="keys"
+                    aria-label="Keys"
+                    value={item.keys.join(",")}
+                    placeholder="j,k,<C-d>,<C-u>"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    aria-label="Delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/src/settings/components/form/PropertiesForm.scss b/src/settings/components/form/PropertiesForm.scss
deleted file mode 100644
index 7c9e167..0000000
--- a/src/settings/components/form/PropertiesForm.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.form-properties-form {
-  &-row {
-    .column-name {
-      display: inline-block;
-      min-width: 5rem;
-      font-weight: bold;
-    }
-    .column-input {
-      line-height: 2.2rem;
-    }
-  }
-}
diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx
index aebd9b1..53ebf03 100644
--- a/src/settings/components/form/PropertiesForm.tsx
+++ b/src/settings/components/form/PropertiesForm.tsx
@@ -1,6 +1,20 @@
-import "./PropertiesForm.scss";
+import styled from "styled-components";
 import React from "react";
 
+const Form = styled.div``;
+
+const Row = styled.div``;
+
+const Label = styled.label`
+  display: inline-block;
+  min-width: 5rem;
+  font-weight: bold;
+`;
+
+const Input = styled.input`
+  line-height: 2.2rem;
+`;
+
 interface Props {
   types: { [key: string]: string };
   value: { [key: string]: any };
@@ -21,7 +35,7 @@ class PropertiesForm extends React.Component<Props> {
     const values = this.props.value;
 
     return (
-      <div className="form-properties-form">
+      <Form>
         {Object.keys(types).map((name) => {
           const type = types[name];
           let inputType = "";
@@ -42,23 +56,22 @@ class PropertiesForm extends React.Component<Props> {
             return null;
           }
           return (
-            <div key={name} className="form-properties-form-row">
-              <label>
-                <span className="column-name">{name}</span>
-                <input
+            <Row key={name}>
+              <Label>
+                <span>{name}</span>
+                <Input
                   type={inputType}
                   name={name}
-                  className="column-input"
                   value={values[name] ? values[name] : ""}
                   onChange={onChange}
                   onBlur={this.props.onBlur}
                   checked={values[name]}
                 />
-              </label>
-            </div>
+              </Label>
+            </Row>
           );
         })}
-      </div>
+      </Form>
     );
   }
 
diff --git a/src/settings/components/form/SearchForm.scss b/src/settings/components/form/SearchForm.scss
deleted file mode 100644
index 26b2f44..0000000
--- a/src/settings/components/form/SearchForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-search-form {
-  @mixin row-base {
-    display: flex;
-
-    .column-name {
-      flex: 1;
-      min-width: 0;
-    }
-    .column-url {
-      flex: 5;
-      min-width: 0;
-    }
-    .column-option {
-      text-align: right;
-      flex-basis: 5rem;
-    }
-  }
-
-  &-header {
-    @include row-base;
-
-    font-weight: bold;
-  }
-
-  &-row {
-    @include row-base;
-  }
-}
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index a4d923d..4bf0e02 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -1,9 +1,42 @@
-import "./SearchForm.scss";
 import React from "react";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
 import { FormSearch } from "../../../shared/SettingData";
 
+const Grid = styled.div``;
+
+const GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 0;
+    min-width: 10%;
+    max-width: 10%;
+  }
+
+  &:nth-child(2) {
+    flex-grow: 2;
+  }
+
+  &:nth-child(3) {
+    flex-grow: 0;
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: FormSearch;
   onChange: (value: FormSearch) => void;
@@ -20,57 +53,67 @@ class SearchForm extends React.Component<Props> {
   render() {
     const value = this.props.value.toJSON();
     return (
-      <div className="form-search-form">
-        <div className="form-search-form-header">
-          <div className="column-name">Name</div>
-          <div className="column-url">URL</div>
-          <div className="column-option">Default</div>
-        </div>
-        {value.engines.map((engine, index) => {
-          return (
-            <div key={index} className="form-search-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="name"
-                className="column-name"
-                value={engine[0]}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                placeholder="http://example.com/?q={}"
-                className="column-url"
-                value={engine[1]}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <div className="column-option">
-                <input
-                  data-index={index}
-                  type="radio"
-                  name="default"
-                  checked={value.default === engine[0]}
-                  onChange={this.bindValue.bind(this)}
-                />
-                <DeleteButton
-                  data-index={index}
-                  name="delete"
-                  onClick={this.bindValue.bind(this)}
-                />
-              </div>
-            </div>
-          );
-        })}
+      <>
+        <Grid role="list">
+          <GridHeader>
+            <GridCell>Name</GridCell>
+            <GridCell>URL</GridCell>
+            <GridCell>Default</GridCell>
+          </GridHeader>
+          {value.engines.map((engine, index) => {
+            return (
+              <GridRow key={index} role="listitem">
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="name"
+                    aria-label="Name"
+                    value={engine[0]}
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    aria-label="URL"
+                    placeholder="http://example.com/?q={}"
+                    value={engine[1]}
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <input
+                    data-index={index}
+                    type="radio"
+                    name="default"
+                    aria-label="Default"
+                    checked={value.default === engine[0]}
+                    onChange={this.bindValue.bind(this)}
+                  />
+                  a
+                  <DeleteButton
+                    data-index={index}
+                    aria-label="Delete"
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
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>
     );
   }
 
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
deleted file mode 100644
index c0c4f9e..0000000
--- a/src/settings/components/site.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.vimvixen-settings-form {
-  padding: 2px;
-
-  textarea[name=json] {
-    font-family: monospace;
-    width: 100%;
-    min-height: 64ex;
-    resize: vertical;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-    border: none;
-    margin-top: 1rem;
-
-    fieldset:first-of-type {
-      margin-top: 1rem;
-    }
-
-    legend {
-      font-size: 1.5rem;
-      padding: .5rem 0;
-      font-weight: bold;
-    }
-  }
-}
diff --git a/src/settings/components/ui/AddButton.scss b/src/settings/components/ui/AddButton.scss
deleted file mode 100644
index beb5688..0000000
--- a/src/settings/components/ui/AddButton.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.ui-add-button {
-  border: none;
-  padding: 4;
-  display: inline;
-  background: none;
-  font-weight: bold;
-  color: green;
-  cursor: pointer;
-
-  &:hover {
-    color: darkgreen;
-  }
-}
diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx
index c15a732..8cf4300 100644
--- a/src/settings/components/ui/AddButton.tsx
+++ b/src/settings/components/ui/AddButton.tsx
@@ -1,19 +1,24 @@
-import "./AddButton.scss";
 import React from "react";
+import styled from "styled-components";
 
-type Props = React.AllHTMLAttributes<HTMLInputElement>;
+const Button = styled.input`
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  font-weight: bold;
+  color: green;
+  cursor: pointer;
 
-class AddButton extends React.Component<Props> {
-  render() {
-    return (
-      <input
-        className="ui-add-button"
-        type="button"
-        value="&#x271a;"
-        {...this.props}
-      />
-    );
+  &:hover {
+    color: darkgreen;
   }
-}
+`;
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>;
+
+const AddButton: React.FC<Props> = (props) => (
+  <Button type="button" value="&#x271a;" {...props} />
+);
 
 export default AddButton;
diff --git a/src/settings/components/ui/DeleteButton.scss b/src/settings/components/ui/DeleteButton.scss
deleted file mode 100644
index 5932a72..0000000
--- a/src/settings/components/ui/DeleteButton.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-
-.ui-delete-button {
-  border: none;
-  padding: 4;
-  display: inline;
-  background: none;
-  color: red;
-  cursor: pointer;
-
-  &:hover {
-    color: darkred;
-  }
-}
diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx
index df8976e..ce0183b 100644
--- a/src/settings/components/ui/DeleteButton.tsx
+++ b/src/settings/components/ui/DeleteButton.tsx
@@ -1,19 +1,23 @@
-import "./DeleteButton.scss";
 import React from "react";
+import styled from "styled-components";
 
-type Props = React.AllHTMLAttributes<HTMLInputElement>;
+const Button = styled.input`
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  color: red;
+  cursor: pointer;
 
-class DeleteButton extends React.Component<Props> {
-  render() {
-    return (
-      <input
-        className="ui-delete-button"
-        type="button"
-        value="&#x2716;"
-        {...this.props}
-      />
-    );
+  &:hover {
+    color: darkred;
   }
-}
+`;
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>;
+
+const DeleteButton: React.FC<Props> = (props) => (
+  <Button type="button" value="&#x2716;" {...props} />
+);
 
 export default DeleteButton;
diff --git a/src/settings/components/ui/Input.scss b/src/settings/components/ui/Input.scss
deleted file mode 100644
index ad4daf8..0000000
--- a/src/settings/components/ui/Input.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.settings-ui-input {
-  page-break-inside: avoid;
-
-  * {
-    page-break-inside: avoid;
-  }
-
-  label {
-    font-weight: bold;
-    min-width: 14rem;
-    display: inline-block;
-  }
-
-  input[type='text'] {
-    padding: 4px;
-    width: 8rem;
-  }
-
-  input.input-crror,
-  textarea.input-error {
-    box-shadow: 0 0 2px red;
-  }
-
-  &-error {
-    font-weight: bold;
-    color: red;
-    min-height: 1.5em;
-  }
-}
diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx
deleted file mode 100644
index 0e24277..0000000
--- a/src/settings/components/ui/Input.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from "react";
-import "./Input.scss";
-
-interface Props extends React.AllHTMLAttributes<HTMLElement> {
-  name: string;
-  type: string;
-  error?: string;
-  label: string;
-  value: string;
-  onValueChange?: (name: string, value: string) => void;
-  onBlur?: (e: React.FocusEvent<Element>) => void;
-}
-
-class Input extends React.Component<Props> {
-  renderText(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label htmlFor={props.id}>{props.label}</label>
-        <input
-          className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
-          {...pp}
-        />
-      </div>
-    );
-  }
-
-  renderRadio(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label>
-          <input
-            className={inputClassName}
-            onChange={this.bindOnChange.bind(this)}
-            {...pp}
-          />
-          {props.label}
-        </label>
-      </div>
-    );
-  }
-
-  renderTextArea(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label htmlFor={props.id}>{props.label}</label>
-        <textarea
-          className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
-          {...pp}
-        />
-        <p className="settings-ui-input-error">{this.props.error}</p>
-      </div>
-    );
-  }
-
-  render() {
-    const { type } = this.props;
-
-    switch (this.props.type) {
-      case "text":
-        return this.renderText(this.props);
-      case "radio":
-        return this.renderRadio(this.props);
-      case "textarea":
-        return this.renderTextArea(this.props);
-      default:
-        console.warn(`Unsupported input type ${type}`);
-    }
-    return null;
-  }
-
-  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    if (this.props.onValueChange) {
-      this.props.onValueChange(e.target.name, e.target.value);
-    }
-  }
-}
-
-export default Input;
diff --git a/src/settings/components/ui/Radio.tsx b/src/settings/components/ui/Radio.tsx
new file mode 100644
index 0000000..c0d4dd9
--- /dev/null
+++ b/src/settings/components/ui/Radio.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  font-family: system-ui;
+`;
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  onValueChange?: (name: string, value: string) => void;
+}
+
+const Radio: React.FC<Props> = (props) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.onValueChange) {
+      props.onValueChange(e.target.name, e.target.value);
+    }
+  };
+
+  const pp = { ...props };
+  delete pp.onValueChange;
+
+  return (
+    <Container>
+      <label htmlFor={props.id}>
+        <input type="radio" onChange={onChange} {...pp} />
+        {props.label}
+      </label>
+    </Container>
+  );
+};
+
+export default Radio;
diff --git a/src/settings/components/ui/Text.tsx b/src/settings/components/ui/Text.tsx
new file mode 100644
index 0000000..700b08a
--- /dev/null
+++ b/src/settings/components/ui/Text.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  page-break-inside: avoid;
+`;
+
+const Input = styled.input<{ hasError: boolean }>`
+  padding: 4px;
+  width: 8rem;
+  box-shadow: ${({ hasError }) => (hasError ? "0 0 2px red" : "none")};
+`;
+
+const Label = styled.label`
+  font-weight: bold;
+  min-width: 14rem;
+  display: inline-block;
+`;
+
+interface Props extends React.HTMLAttributes<HTMLElement> {
+  name: string;
+  error?: string;
+  label: string;
+  value: string;
+  onValueChange?: (name: string, value: string) => void;
+}
+
+const Text: React.FC<Props> = (props) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.onValueChange) {
+      props.onValueChange(e.target.name, e.target.value);
+    }
+  };
+
+  const pp = { ...props };
+  delete pp.onValueChange;
+
+  return (
+    <Container>
+      <Label>
+        {props.label}
+        <br />
+        <Input
+          type="text"
+          hasError={props.error !== undefined}
+          onChange={onChange}
+          {...pp}
+        />
+      </Label>
+    </Container>
+  );
+};
+
+export default Text;
diff --git a/src/settings/components/ui/TextArea.tsx b/src/settings/components/ui/TextArea.tsx
new file mode 100644
index 0000000..9dcd5be
--- /dev/null
+++ b/src/settings/components/ui/TextArea.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  page-break-inside: avoid;
+`;
+
+const Label = styled.label`
+  font-weight: bold;
+  min-width: 14rem;
+  display: inline-block;
+`;
+
+const ErrorableTextArea = styled.textarea<{ hasError: boolean }>`
+  box-shadow: ${({ hasError }) => (hasError ? "0 0 2px red" : "none")};
+  font-family: monospace;
+  font-family: monospace;
+  width: 100%;
+  min-height: 64ex;
+  resize: vertical;
+`;
+
+const ErrorMessage = styled.p`
+  font-weight: bold;
+  color: red;
+  min-height: 1.5em;
+`;
+
+interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: string;
+  label: string;
+  onValueChange?: (name: string, value: string) => void;
+}
+
+const TextArea: React.FC<Props> = (props) => {
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (props.onValueChange) {
+      props.onValueChange(e.target.name, e.target.value);
+    }
+  };
+
+  const hasError = typeof props.error !== "undefined" && props.error !== "";
+  const pp = { ...props };
+  delete pp.onValueChange;
+  return (
+    <Container>
+      <Label htmlFor={props.id}>{props.label}</Label>
+      <ErrorableTextArea hasError={hasError} onChange={onChange} {...pp} />
+      {hasError ? (
+        <ErrorMessage role="alert">{props.error}</ErrorMessage>
+      ) : null}
+    </Container>
+  );
+};
+
+export default TextArea;