From bbad1c6c6adf65de031111340f8bf5e46cc41ca6 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 13:58:25 +0900
Subject: [PATCH] delete button

---
 src/settings/components/form/search-engine-form.jsx  |  6 +++---
 src/settings/components/form/search-engine-form.scss | 12 ------------
 src/settings/components/ui/delete-button.jsx         | 12 ++++++++++++
 src/settings/components/ui/delete-button.scss        | 12 ++++++++++++
 4 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/settings/components/ui/delete-button.jsx
 create mode 100644 src/settings/components/ui/delete-button.scss

diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx
index 77da304..c86522a 100644
--- a/src/settings/components/form/search-engine-form.jsx
+++ b/src/settings/components/form/search-engine-form.jsx
@@ -1,5 +1,6 @@
-import { h, Component } from 'preact';
 import './search-engine-form.scss';
+import { h, Component } from 'preact';
+import DeleteButton from '../ui/delete-button';
 
 class SearchEngineForm extends Component {
 
@@ -33,8 +34,7 @@ class SearchEngineForm extends Component {
               <input data-index={index} type='radio' name='default'
                 checked={defaultEngine === engine[0]}
                 onChange={this.bindValue.bind(this)} />
-              <input data-index={index} type='button' name='delete'
-                value='&#x2716;'
+              <DeleteButton data-index={index} name='delete'
                 onClick={this.bindValue.bind(this)} />
             </div>
           </div>;
diff --git a/src/settings/components/form/search-engine-form.scss b/src/settings/components/form/search-engine-form.scss
index 1ca43b7..0d33c23 100644
--- a/src/settings/components/form/search-engine-form.scss
+++ b/src/settings/components/form/search-engine-form.scss
@@ -22,17 +22,5 @@
 
   &-row {
     @include row-base;
-
-    .column-option input[type='button'] {
-      border: none;
-      padding: 4;
-      display: inline;
-      background: none;
-      color: red;
-
-      &:hover {
-        color: darkred;
-      }
-    }
   }
 }
diff --git a/src/settings/components/ui/delete-button.jsx b/src/settings/components/ui/delete-button.jsx
new file mode 100644
index 0000000..8077a76
--- /dev/null
+++ b/src/settings/components/ui/delete-button.jsx
@@ -0,0 +1,12 @@
+import './delete-button.scss';
+import { h, Component } from 'preact';
+
+class DeleteButton extends Component {
+  render() {
+    return <input
+      className='ui-delete-button' type='button' value='&#x2716;'
+      {...this.props} />;
+  }
+}
+
+export default DeleteButton;
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss
new file mode 100644
index 0000000..7aa2f39
--- /dev/null
+++ b/src/settings/components/ui/delete-button.scss
@@ -0,0 +1,12 @@
+
+.ui-delete-button {
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  color: red;
+
+  &:hover {
+    color: darkred;
+  }
+}