From 39447d4072db5147be14d226cb0f3b1d4f763db8 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Tue, 8 Dec 2015 22:42:59 +0500
Subject: Multiple UI Improvements

---
 web/react/components/admin_console/user_item.jsx |  2 --
 web/react/components/create_comment.jsx          |  2 +-
 web/react/components/create_post.jsx             |  6 +++---
 web/react/components/member_list_item.jsx        |  6 ++----
 web/react/components/member_list_team_item.jsx   |  4 +---
 web/react/components/navbar.jsx                  |  2 --
 web/sass-files/sass/partials/_content.scss       |  1 -
 web/sass-files/sass/partials/_error-bar.scss     |  1 +
 web/sass-files/sass/partials/_files.scss         |  2 +-
 web/sass-files/sass/partials/_modal.scss         |  1 +
 web/sass-files/sass/partials/_post.scss          | 12 +++++-------
 web/sass-files/sass/partials/_post_right.scss    |  8 ++++++++
 web/sass-files/sass/partials/_responsive.scss    |  9 +++------
 web/sass-files/sass/partials/_settings.scss      | 25 +++++++++++++++++-------
 14 files changed, 44 insertions(+), 37 deletions(-)

(limited to 'web')

diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx
index bd64564c9..ef0b61460 100644
--- a/web/react/components/admin_console/user_item.jsx
+++ b/web/react/components/admin_console/user_item.jsx
@@ -227,7 +227,6 @@ export default class UserItem extends React.Component {
                             href='#'
                             className='dropdown-toggle theme'
                             type='button'
-                            id='channel_header_dropdown'
                             data-toggle='dropdown'
                             aria-expanded='true'
                         >
@@ -237,7 +236,6 @@ export default class UserItem extends React.Component {
                         <ul
                             className='dropdown-menu member-menu'
                             role='menu'
-                            aria-labelledby='channel_header_dropdown'
                         >
                             {makeAdmin}
                             {makeMember}
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index fac40e895..b0f33eda1 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -362,11 +362,11 @@ export default class CreateComment extends React.Component {
                             onClick={this.handleSubmit}
                         />
                         {uploadsInProgressText}
+                        {preview}
                         {postError}
                         {serverError}
                     </div>
                 </div>
-                {preview}
             </form>
         );
     }
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index f7f63fb92..89e984e27 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -470,13 +470,13 @@ export default class CreatePost extends React.Component {
                         {tutorialTip}
                     </div>
                     <div className={postFooterClassName}>
-                        {postError}
-                        {serverError}
-                        {preview}
                         <MsgTyping
                             channelId={this.state.channelId}
                             parentId=''
                         />
+                        {preview}
+                        {postError}
+                        {serverError}
                     </div>
                 </div>
             </form>
diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx
index f7f77f48a..a7273f280 100644
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -78,17 +78,15 @@ export default class MemberListItem extends React.Component {
                                 href='#'
                                 className='dropdown-toggle theme'
                                 type='button'
-                                id='channel_header_dropdown'
                                 data-toggle='dropdown'
                                 aria-expanded='true'
                             >
+                                <span className='fa fa-pencil'></span>
                                 <span className='text-capitalize'>{member.roles || 'Member'} </span>
-                                <span className='caret'></span>
                             </a>
                             <ul
                                 className='dropdown-menu member-menu'
                                 role='menu'
-                                aria-labelledby='channel_header_dropdown'
                             >
                                 {makeAdminOption}
                                 {handleRemoveOption}
@@ -96,7 +94,7 @@ export default class MemberListItem extends React.Component {
                         </div>
                     );
         } else {
-            invite = <div className='member-role text-capitalize'>{member.roles || 'Member'}<span className='caret hidden'></span></div>;
+            invite = <div className='member-role text-capitalize'><span className='fa fa-pencil hidden'></span>{member.roles || 'Member'}</div>;
         }
 
         return (
diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/member_list_team_item.jsx
index 316fad01a..7967c410d 100644
--- a/web/react/components/member_list_team_item.jsx
+++ b/web/react/components/member_list_team_item.jsx
@@ -181,17 +181,15 @@ export default class MemberListTeamItem extends React.Component {
                             href='#'
                             className='dropdown-toggle theme'
                             type='button'
-                            id='channel_header_dropdown'
                             data-toggle='dropdown'
                             aria-expanded='true'
                         >
+                            <span className='fa fa-pencil'></span>
                             <span>{currentRoles} </span>
-                            <span className='caret'></span>
                         </a>
                         <ul
                             className='dropdown-menu member-menu'
                             role='menu'
-                            aria-labelledby='channel_header_dropdown'
                         >
                             {makeAdmin}
                             {makeMember}
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 3bdc9efac..ae14fca2f 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -272,7 +272,6 @@ export default class Navbar extends React.Component {
                             href='#'
                             className='dropdown-toggle theme'
                             type='button'
-                            id='channel_header_dropdown'
                             data-toggle='dropdown'
                             aria-expanded='true'
                         >
@@ -282,7 +281,6 @@ export default class Navbar extends React.Component {
                         <ul
                             className='dropdown-menu'
                             role='menu'
-                            aria-labelledby='channel_header_dropdown'
                         >
                             {viewInfoOption}
                             {addMembersOption}
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index da75bc61b..4bfdb7a09 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -1,7 +1,6 @@
 @charset "UTF-8";
 
 .inner__wrap {
-	@include single-transition(all, 0.5s, ease);
 	&.move--left {
 		margin-right: 400px;
 		.search-bar__container {
diff --git a/web/sass-files/sass/partials/_error-bar.scss b/web/sass-files/sass/partials/_error-bar.scss
index 249bbeaa5..0bfcbe0be 100644
--- a/web/sass-files/sass/partials/_error-bar.scss
+++ b/web/sass-files/sass/partials/_error-bar.scss
@@ -19,6 +19,7 @@
         font-weight: 600;
         text-decoration: none;
         padding: 0 10px;
+        font-family: 'Open Sans', sans-serif;
         &:hover {
             color: #FFF;
             text-decoration: none;
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index aeb04e931..2c341f61e 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -2,7 +2,7 @@
 
 .preview-container {
   position: relative;
-  margin-top: 25px;
+  margin: 1px 0 10px;
   width: 100%;
   max-height: 100px;
   height: 100px;
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 55725abe0..9279cf0c4 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -186,6 +186,7 @@
 						padding: 8px 15px 8px 8px;
 						width: 80px;
 						vertical-align: middle;
+						position: relative;
 						&.lg {
 							width: 110px;
 						}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 81cc311e1..df519c752 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -319,13 +319,11 @@ body.ios {
 		@include clearfix;
 		padding: 3px 0 0 0;
 		font-size: 13px;
-		.has-error {
-			.control-label {
-				height: 0;
-				display: block;
-				font-weight: normal;
-				margin-bottom: 0;
-			}
+		.control-label {
+			font-weight: normal;
+			margin-bottom: 0;
+			top: -5px;
+			position: relative;
 		}
 		.msg-typing {
 			min-height: 25px;
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index 4f04a266b..fa52e2972 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -44,6 +44,9 @@
 		.textarea-wrapper {
 			min-height: 100px;
 		}
+		.btn {
+			margin-bottom: 10px;
+		}
 		.custom-textarea {
 			min-height: 100px;
 		}
@@ -123,6 +126,11 @@
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 	@include flex(1 1 auto);
+
+	.preview-container {
+		margin-top: 5px;
+	}
+
 }
 
 .post-right-comment-time {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index bdf04ff82..ed2d0bbe9 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -377,10 +377,8 @@
             .msg-typing {
                 display: none;
             }
-            .has-error {
-                .control-label {
-                    height: auto;
-                }
+            .control-label {
+                top: 0;
             }
         }
         .post-create-body {
@@ -409,8 +407,7 @@
         }
     }
     .preview-container {
-        padding: 0px;
-        margin-top: 5px;
+        margin: 5px 0 0;
         .preview-div {
             margin-top: 0;
         }
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index ee0c40067..f078cafb4 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -135,9 +135,10 @@
                     .input-group-addon {
                         padding: 4px 5px;
                         width: 40px;
-                        img {
-                            border: 1px solid rgba(black, 0.15);
-                        }
+                    }
+                    img {
+                        border: 1px solid rgba(black, 0.15);
+                        width: 29px;
                     }
                 }
                 .premade-themes {
@@ -325,12 +326,22 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+}
+
+.member-role, .member-drop {
+    position:absolute;
+    right: 15px;
+    top: 8px;
+
+    .fa {
+        margin-right: 5px;
+    }
 
-    .member-role, .member-drop {
-        position:absolute;
-        right: 15px;
-        top: 8px;
+    .member-menu {
+        top: -50%;
+        right: 110%;
     }
+
 }
 
 .member-invite {
-- 
cgit v1.2.3-1-g7c22