From 2a01ebee8472fa944bf05a8e2cdc02566946ced1 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Thu, 26 May 2016 15:59:55 -0400
Subject: [PATCH] Fix search button display

Update search form submit button from an input[type=submit] to a button.  React 15 omits the value prop if it's blank, so the `<input type="submit" value="">` was rendered as `<input type="submit">`. This caused the input to display the default value of "Submit".  The button element is more appropriate for this behavior and doesn't have the missing value issue.
---
 src/components/navigation/www/navigation.jsx  |  3 +-
 src/components/navigation/www/navigation.scss | 34 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx
index ffeaf21d3..654b242a1 100644
--- a/src/components/navigation/www/navigation.jsx
+++ b/src/components/navigation/www/navigation.jsx
@@ -9,6 +9,7 @@ var sessionActions = require('../../../redux/session.js');
 
 var Api = require('../../../mixins/api.jsx');
 var Avatar = require('../../avatar/avatar.jsx');
+var Button = require('../../forms/button.jsx');
 var Dropdown = require('../../dropdown/dropdown.jsx');
 var Input = require('../../forms/input.jsx');
 var log = require('../../../lib/log.js');
@@ -215,7 +216,7 @@ var Navigation = React.createClass({
 
                     <li className="search">
                         <form action="/search/google_results" method="get">
-                            <Input type="submit" value="" />
+                            <Button type="submit" className="btn-search" />
                             <Input type="text"
                                    aria-label={formatMessage({id: 'general.search'})}
                                    placeholder={formatMessage({id: 'general.search'})}
diff --git a/src/components/navigation/www/navigation.scss b/src/components/navigation/www/navigation.scss
index 35b7a4610..188063c01 100644
--- a/src/components/navigation/www/navigation.scss
+++ b/src/components/navigation/www/navigation.scss
@@ -39,7 +39,8 @@
                 margin: 0;
             }
 
-            input {
+            input,
+            button {
                 display: inline-block;
                 margin-top: 5px;
                 outline: none;
@@ -47,19 +48,6 @@
                 background-color: $active-gray;
                 height: 14px;
 
-                &[type=submit] {
-                    position: absolute;
-                    
-                    background-color: transparent;
-                    background-image: url("/images/nav-search-glass.png");
-                    background-repeat: no-repeat;
-                    background-position: center center;     
-                    background-size: 14px 14px;
-                    
-                    width: 40px;
-                    height: 40px;
-                }
-
                 &[type=text] {
                     transition: .15s ease background-color; 
                     padding: 0;
@@ -85,6 +73,24 @@
                     }
                 }
             }
+
+            .btn-search {
+                position: absolute;
+                
+                box-shadow: none;
+                background-color: transparent;
+                background-image: url("/images/nav-search-glass.png");
+                background-repeat: no-repeat;
+                background-position: center center;     
+                background-size: 14px 14px;
+                
+                width: 40px;
+                height: 40px;
+
+                &:hover {
+                    box-shadow: none;
+                }
+            }
         }
     }