delete button

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'
+              <DeleteButton data-index={index} name='delete'
-                value='&#x2716;'
                 onClick={this.bindValue.bind(this)} />
             </div>
           </div>;

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

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;

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