Button fine tuning

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

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

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