Introduce styled-components on top of form

4 files changed, 72 insertions, 63 deletions

diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 4c6bd35..dcdd00c 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -6,6 +6,11 @@ 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;
 `;
@@ -48,10 +53,10 @@ class PartialBlacklistForm extends React.Component<Props> {
     return (
       <>
         <Grid>
-          <GridRow>
+          <GridHeader>
             <GridCell>URL</GridCell>
             <GridCell>Keys</GridCell>
-          </GridRow>
+          </GridHeader>
           {this.props.value.items.map((item, index) => {
             if (!item.partial) {
               return null;
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index 3ba0299..cc7061a 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -6,6 +6,11 @@ import { FormSearch } from "../../../shared/SettingData";
 
 const Grid = styled.div``;
 
+const GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
 const GridRow = styled.div`
   display: flex;
 `;
@@ -50,11 +55,11 @@ class SearchForm extends React.Component<Props> {
     return (
       <>
         <Grid>
-          <GridRow>
+          <GridHeader>
             <GridCell>Name</GridCell>
             <GridCell>URL</GridCell>
             <GridCell>Default</GridCell>
-          </GridRow>
+          </GridHeader>
           {value.engines.map((engine, index) => {
             return (
               <GridRow key={index}>
diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx
index d204210..2e2ff52 100644
--- a/src/settings/components/index.tsx
+++ b/src/settings/components/index.tsx
@@ -1,6 +1,6 @@
-import "./site.scss";
 import React from "react";
 import { connect } from "react-redux";
+import styled from "styled-components";
 import TextArea from "./ui/TextArea";
 import Radio from "./ui/Radio";
 import SearchForm from "./form/SearchForm";
@@ -19,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?";
@@ -41,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>
     );
   }
@@ -111,30 +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">
-          <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}
+        />
 
-          <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 e8415e8..0000000
--- a/src/settings/components/site.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.vimvixen-settings-form {
-  padding: 2px;
-  font-family: system-ui;
-
-  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;
-    }
-  }
-}