From 08f49e6a1d7ff960c63bef68ec1fdc12aaa72d31 Mon Sep 17 00:00:00 2001
From: Mikko Koski <mikkokos@gmail.com>
Date: Thu, 23 Mar 2017 17:08:43 +0200
Subject: [PATCH] Button fine tuning

---
 src/components/Button/Button.css              | 23 +++++++++----------
 .../HeroSearchForm/HeroSearchForm.css         |  7 ++++++
 .../HeroSearchForm/HeroSearchForm.js          |  3 +++
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index add6a945..96f264f3 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -1,25 +1,24 @@
 .root {
   display: block;
   width: 100%;
-  font-size: 1.4rem;
   padding: 0.5rem;
   margin: 1rem 0;
-  background-color: #eee;
-  border: 1px solid #ddd;
+  background-color: #9B9B9B;
+  border-width: 0px;
 
-  &:hover {
-    background-color: #ddd;
+  /* Font */
+  font-weight: bold;
+  font-size: 16px;
+  color: #FFFFFF;
+  letter-spacing: -0.4px;
+
+  &:enabled:hover {
+    background-color: color(#9B9B9B blackness(+ 20%));
   }
-  &:active {
+  &:enabled:active {
     background-color: #ccc;
   }
   &:disabled {
     cursor: auto;
-    color: #aaa;
-
-    &:hover,
-    &:active {
-      background-color: #eee;
-    }
   }
 }
diff --git a/src/containers/HeroSearchForm/HeroSearchForm.css b/src/containers/HeroSearchForm/HeroSearchForm.css
index f3a5c9e2..20cef791 100644
--- a/src/containers/HeroSearchForm/HeroSearchForm.css
+++ b/src/containers/HeroSearchForm/HeroSearchForm.css
@@ -12,4 +12,11 @@
   width: 100%;
   height: 50px;
   margin: 0;
+  text-align: right;
+}
+
+.searchIcon {
+  display: inline-block;
+  margin-left: 12px;
+  margin-right: 12px;
 }
diff --git a/src/containers/HeroSearchForm/HeroSearchForm.js b/src/containers/HeroSearchForm/HeroSearchForm.js
index d703af58..c6ea4061 100644
--- a/src/containers/HeroSearchForm/HeroSearchForm.js
+++ b/src/containers/HeroSearchForm/HeroSearchForm.js
@@ -23,6 +23,9 @@ const HeroSearchForm = props => {
       />
       <Button className={css.locationButton} type="submit" disabled={pristine || submitting}>
         <FormattedMessage id="HeroSearchForm.search" />
+        <div className={css.searchIcon}>
+          <svg width="18" height="18" viewBox="189 165 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fillRule="evenodd" transform="matrix(-1 0 0 1 206 166)" strokeLinecap="round" strokeLinejoin="round" stroke="#FFF" strokeWidth="1.5"><path d="M11.733 11.733l3.727 3.727"/><circle cx="6.4" cy="6.4" r="6.4"/></g></svg>
+        </div>
       </Button>
     </form>
   );