Merge pull request #199 from asaadmahmoodspin/master

Improving search header for mobile layouts and other UI changes

5 files changed, 20 insertions, 13 deletions

diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index ab7e99d60..f21f0cd58 100644
--- a/web/react/components/search_bar.jsx
+++ b/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
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index d876d8b37..c2740891a 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/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;
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 1b0338884..f359037c5 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/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;
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 1f9643175..a33d69378 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/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;
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 8d51d00c0..d4a4da243 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/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;
 }