Improving search header for mobile layouts and other UI changes

web/react/components/search_bar.jsx

@@ -92,7 +92,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div>
-                <div className="sidebar__collapse" onClick={this.handleClose}></div>
+                <div className="sidebar__collapse" onClick={this.handleClose}>Cancel</div>
                 <span className="glyphicon glyphicon-search sidebar__search-icon"></span>
                 <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}>
                     <input

web/sass-files/sass/partials/_headers.scss

@@ -157,6 +157,7 @@
 	font-size: 14px;
 	line-height: 50px;
 	#member_popover {
+		margin-right: 5px;
 		width: 45px;
 		color: #999;
 		cursor: pointer;
@@ -232,12 +233,16 @@
 	vertical-align: top;
 	display: inline-block;
 	width: 15px;
-	margin: 9px 3px 3px 0;
+	margin: 9px 4px 3px 0;
 	&:hover {
 		svg {
 			fill: #888;
 		}
 	}
+	a {
+		height: 100%;
+		display: block;
+	}
 	svg {
 		vertical-align: top;
 		margin-top: 8px;

web/sass-files/sass/partials/_modal.scss

@@ -155,7 +155,7 @@
 			position: relative;
 			max-width: 90%;
 			min-height: 50px;
-			min-width: 280px;
+			min-width: 320px;
 			@include border-radius(3px);
 			display: table;
 			margin: 0 auto;

web/sass-files/sass/partials/_responsive.scss

@@ -432,13 +432,16 @@
         color: #fff;
         .search__form {
             border: none;
-            padding: 0 10px 0 30px;
+            padding: 0 60px 0 25px;
             .form-control {
+                line-height: 31px;
                 background: none;
                 color: #fff;
-                border-bottom: 1px solid rgba(#fff, 0.7);
                 border-radius: 0;
-                padding: 0 10px 0 23px;
+                padding: 0 10px 0;
+                @include input-placeholder {
+                    color: rgba(#fff, 0.6);
+                }
             }
             ::-webkit-input-placeholder {
                 color: #fff;

web/sass-files/sass/partials/_search.scss

@@ -2,21 +2,20 @@
 	padding: 8px 8px 8px 0;
 }
 .sidebar__collapse {
-	width: 20px;
-	height: 30px;
+	width: auto;
+	height: auto;
 	position: absolute;
-	top: 10px;
-	left: 6px;
+	top: 17px;
+	right: 15px;
 	cursor: pointer;
-	background: url("../images/arrow-left.png") center no-repeat;
-	@include background-size(10px 15px);
 	z-index: 5;
 	display: none;
 }
 .sidebar__search-icon {
 	position: absolute;
-	left: 40px;
+	left: 15px;
 	top: 18px;
+	font-size: 16px;
 	@include opacity(0.8);
 	display: none;
 }