3 files changed, 69 insertions, 50 deletions

diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx
index bb76d08..c15a732 100644
--- a/src/settings/components/ui/AddButton.tsx
+++ b/src/settings/components/ui/AddButton.tsx
@@ -1,13 +1,18 @@
-import './AddButton.scss';
-import React from 'react';
+import "./AddButton.scss";
+import React from "react";
 
 type Props = React.AllHTMLAttributes<HTMLInputElement>;
 
 class AddButton extends React.Component<Props> {
   render() {
-    return <input
-      className='ui-add-button' type='button' value='&#x271a;'
-      {...this.props} />;
+    return (
+      <input
+        className="ui-add-button"
+        type="button"
+        value="&#x271a;"
+        {...this.props}
+      />
+    );
   }
 }
 
diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx
index e666426..df8976e 100644
--- a/src/settings/components/ui/DeleteButton.tsx
+++ b/src/settings/components/ui/DeleteButton.tsx
@@ -1,13 +1,18 @@
-import './DeleteButton.scss';
-import React from 'react';
+import "./DeleteButton.scss";
+import React from "react";
 
 type Props = React.AllHTMLAttributes<HTMLInputElement>;
 
 class DeleteButton extends React.Component<Props> {
   render() {
-    return <input
-      className='ui-delete-button' type='button' value='&#x2716;'
-      {...this.props} />;
+    return (
+      <input
+        className="ui-delete-button"
+        type="button"
+        value="&#x2716;"
+        {...this.props}
+      />
+    );
   }
 }
 
diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx
index 69c14b3..6819ddb 100644
--- a/src/settings/components/ui/Input.tsx
+++ b/src/settings/components/ui/Input.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import './Input.scss';
+import React from "react";
+import "./Input.scss";
 
 interface Props extends React.AllHTMLAttributes<HTMLElement> {
   name: string;
@@ -13,66 +13,75 @@ interface Props extends React.AllHTMLAttributes<HTMLElement> {
 
 class Input extends React.Component<Props> {
   renderText(props: Props) {
-    const inputClassName = props.error ? 'input-error' : '';
+    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
-        type='text' className={inputClassName}
-        onChange={this.bindOnChange.bind(this)}
-        { ...pp } />
-    </div>;
+    return (
+      <div className="settings-ui-input">
+        <label htmlFor={props.id}>{props.label}</label>
+        <input
+          type="text"
+          className={inputClassName}
+          onChange={this.bindOnChange.bind(this)}
+          {...pp}
+        />
+      </div>
+    );
   }
 
   renderRadio(props: Props) {
-    const inputClassName = props.error ? 'input-error' : '';
+    const inputClassName = props.error ? "input-error" : "";
     const pp = { ...props };
     delete pp.onValueChange;
-    return <div className='settings-ui-input'>
-      <label>
-        <input
-          type='radio' className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
-          { ...pp } />
-        { props.label }
-      </label>
-    </div>;
+    return (
+      <div className="settings-ui-input">
+        <label>
+          <input
+            type="radio"
+            className={inputClassName}
+            onChange={this.bindOnChange.bind(this)}
+            {...pp}
+          />
+          {props.label}
+        </label>
+      </div>
+    );
   }
 
   renderTextArea(props: Props) {
-    const inputClassName = props.error ? 'input-error' : '';
+    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>;
+    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}`);
+      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>) {
+  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
     if (this.props.onValueChange) {
       this.props.onValueChange(e.target.name, e.target.value);
     }