Merge pull request #1751 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/rhs_root_post.jsx

@@ -227,7 +227,6 @@ export default class RhsRootPost extends React.Component {
                         </div>
                     </div>
                 </div>
-                <hr />
             </div>
         );
     }

web/react/components/settings_sidebar.jsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import * as Utils from '../utils/utils.jsx';
+
 export default class SettingsSidebar extends React.Component {
     componentDidUpdate() {
         $('.settings-modal').find('.modal-body').scrollTop(0);
@@ -16,6 +18,11 @@ export default class SettingsSidebar extends React.Component {
         this.props.updateTab(tab.name);
         $(e.target).closest('.settings-modal').addClass('display--content');
     }
+    componentDidMount() {
+        if (Utils.isBrowserFirefox()) {
+            $('.settings-modal .settings-table .nav').addClass('position--top');
+        }
+    }
     render() {
         let tabList = this.props.tabs.map(function makeTab(tab) {
             let key = `${tab.name}_li`;

web/react/components/suggestion/search_channel_provider.jsx

@@ -19,7 +19,7 @@ class SearchChannelSuggestion extends React.Component {
                 onClick={onClick}
                 className={className}
             >
-                {item.name}
+                <i className='fa fa fa-plus-square'></i>{item.name}
             </div>
         );
     }

web/react/components/suggestion/search_user_provider.jsx

@@ -22,7 +22,7 @@ class SearchUserSuggestion extends React.Component {
                     className='profile-img rounded'
                     src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at}
                 />
-                {item.username}
+                <i className='fa fa fa-plus-square'></i>{item.username}
             </div>
         );
     }

web/react/components/user_settings/custom_theme_chooser.jsx

@@ -104,7 +104,7 @@ export default class CustomThemeChooser extends React.Component {
                     >
                         <label className='custom-label'>{element.uiName}</label>
                         <div
-                            className='input-group theme-group dropdown'
+                            className='input-group theme-group group--code dropdown'
                             id={element.id}
                         >
                             <select

web/react/utils/utils.jsx

@@ -647,10 +647,11 @@ export function applyTheme(theme) {
         changeCss('.attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro .channel-intro__content, .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
         changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2);
-        changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.search-item-container, .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
         changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
         changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);

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

@@ -125,10 +125,6 @@ a:focus, a:hover {
   }
 }
 
-select {
-  -moz-appearance:none;
-}
-
 .form-control {
   @include border-radius(2px);
   &:focus {

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

@@ -85,6 +85,11 @@
             background: rgba(black, 0.2);
         }
 
+        .fa {
+            margin-right: 5px;
+            @include opacity(0.5);
+        }
+
         .profile-img {
             margin-top: -1px;
             height: 16px;

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

@@ -17,7 +17,8 @@
 	.post {
 
 		&.post--root {
-			padding-bottom: 0;
+			padding-bottom: 1.2em;
+			border-bottom: 1px solid #ddd;
 		}
 
 		.post__header {
@@ -36,6 +37,7 @@
 
 	hr {
 		margin-bottom: 0;
+		border: none;
 	}
 
 	.post-create__container {

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

@@ -336,7 +336,10 @@
             }
         }
         .settings-table {
-            .nav, .nav.absolute {
+            .nav {
+                &.position--top {
+                    top: auto;
+                }
                 position: relative;
                 top: auto;
                 width: 100%;

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

@@ -134,7 +134,7 @@
 }
 
 .search-item-time {
-	color: #a8adb7;
+	@include opacity(0.7);
 }
 
 .search-results-none {

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

@@ -82,9 +82,8 @@
         .nav {
             position: fixed;
             width: 179px;
-            &.absolute {
-                position: absolute;
-                top: 0;
+            &.position--top {
+                top: 57px;
             }
         }
         .security-links {
@@ -141,6 +140,29 @@
                         width: 29px;
                     }
                 }
+                .group--code {
+                    select {
+                        padding-right: 25px;
+                    }
+                    &:before {
+                        position: absolute;
+                        top: 11px;
+                        right: 50px;
+                        z-index: 5;
+                        content: "\f0d7";
+                        display: inline-block;
+                        font: normal normal normal 14px/1 FontAwesome;
+                        font-size: inherit;
+                        text-rendering: auto;
+                        -webkit-font-smoothing: antialiased;
+                        -moz-osx-font-smoothing: grayscale;
+                    }
+                    select {
+                      -moz-appearance:none;
+                      -webkit-appearance:none;
+                      appearance:none;
+                  }
+              }
               .premade-themes {
                 margin-bottom: 10px;
                 .theme-label {