From 26777d9e309dbc328b59581adb92f160c18f812c Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 16:41:34 +0900
Subject: [PATCH] fix form css

---
 src/settings/components/form/blacklist-form.jsx |  3 ++-
 src/settings/components/form/keymaps-form.scss  |  2 +-
 src/settings/components/form/search-form.jsx    |  3 ++-
 src/settings/components/form/search-form.scss   |  2 ++
 src/settings/components/site.scss               |  2 +-
 src/settings/components/ui/add-button.jsx       |  2 +-
 src/settings/components/ui/add-button.scss      | 12 +++++++++++-
 src/settings/components/ui/delete-button.scss   |  1 +
 src/settings/components/ui/input.scss           |  3 ++-
 9 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
index 4333929..7ae9652 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -23,7 +23,8 @@ class BlacklistForm extends Component {
           </div>;
         })
       }
-      <AddButton name='add' onClick={this.bindValue.bind(this)} />
+      <AddButton name='add' style='float:right'
+        onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
index 8b86c80..3a83910 100644
--- a/src/settings/components/form/keymaps-form.scss
+++ b/src/settings/components/form/keymaps-form.scss
@@ -1,5 +1,5 @@
 .form-keymaps-form {
-  column-count: 2;
+  column-count: 3;
   .keymap-fields-group {
     margin-top: 24px;
   }
diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx
index 98b0655..e85761f 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/search-form.jsx
@@ -40,7 +40,8 @@ class SearchForm extends Component {
           </div>;
         })
       }
-      <AddButton name='add' onClick={this.bindValue.bind(this)} />
+      <AddButton name='add' style='float:right'
+        onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/search-form.scss
index 8814ef5..26b2f44 100644
--- a/src/settings/components/form/search-form.scss
+++ b/src/settings/components/form/search-form.scss
@@ -4,9 +4,11 @@
 
     .column-name {
       flex: 1;
+      min-width: 0;
     }
     .column-url {
       flex: 5;
+      min-width: 0;
     }
     .column-option {
       text-align: right;
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index c8dd422..c0c4f9e 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -20,7 +20,7 @@
 
     legend {
       font-size: 1.5rem;
-      line-height: 1.5rem;
+      padding: .5rem 0;
       font-weight: bold;
     }
   }
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx
index c8d8856..79292d8 100644
--- a/src/settings/components/ui/add-button.jsx
+++ b/src/settings/components/ui/add-button.jsx
@@ -4,7 +4,7 @@ import { h, Component } from 'preact';
 class AddButton extends Component {
   render() {
     return <input
-      className='ui-add-button' type='button' value='Add'
+      className='ui-add-button' type='button' value='&#x271a;'
       {...this.props} />;
   }
 }
diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/add-button.scss
index 1c893ae..beb5688 100644
--- a/src/settings/components/ui/add-button.scss
+++ b/src/settings/components/ui/add-button.scss
@@ -1,3 +1,13 @@
 .ui-add-button {
-  font-size: 80%
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  font-weight: bold;
+  color: green;
+  cursor: pointer;
+
+  &:hover {
+    color: darkgreen;
+  }
 }
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss
index 7aa2f39..5932a72 100644
--- a/src/settings/components/ui/delete-button.scss
+++ b/src/settings/components/ui/delete-button.scss
@@ -5,6 +5,7 @@
   display: inline;
   background: none;
   color: red;
+  cursor: pointer;
 
   &:hover {
     color: darkred;
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
index 92df712..ad4daf8 100644
--- a/src/settings/components/ui/input.scss
+++ b/src/settings/components/ui/input.scss
@@ -11,8 +11,9 @@
     display: inline-block;
   }
 
-  input {
+  input[type='text'] {
     padding: 4px;
+    width: 8rem;
   }
 
   input.input-crror,