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

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

1 files changed, 23 insertions, 10 deletions

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