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--top {
-                position: absolute;
+                top: 57px;
-                top: 0;
             }
         }
         .security-links {
@@ -141,145 +140,168 @@
                         width: 29px;
                     }
                 }
-                .premade-themes {
+                .group--code {
-                    margin-bottom: 10px;
+                    select {
-                    .theme-label {
+                        padding-right: 25px;
-                        font-weight: 400;
-                        margin-top: 5px;
                     }
-                    img {
-                        border: 3px solid transparent;
-                    }
-                    .active {
-                        img {
-                            border-color: $primary-color;
-                        }
-                    }
-                }
-                .custom-label {
-                    font-weight: normal;
-                    font-size: 13px;
-                    width: 100%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    margin-bottom: 0;
-                }
-                .input-group-addon {
-                    background: transparent;
-                }
-                .radio {
-                    label {
-                        font-weight: 600;
-                    }
-                }
-            }
-
-            .section-title {
-                margin-bottom: 5px;
-                font-weight: 600;
-            }
-
-            .section-edit {
-                text-align: right;
-                margin-bottom: 5px;
-                .fa {
-                    margin-right: 5px;
-                    font-size: 12px;
-                    @include opacity(0.5);
-                    display: none;
-                }
-            }
-
-            .section-describe {
-                @include opacity(0.7);
-                white-space:pre;
-            }
-
-            .divider-dark {
-                border-bottom:1px solid #aaaaaa;
-            }
-
-            .divider-light {
-                border-bottom:1px solid lightgrey;
-            }
-
-            .setting-list {
-                padding: 0;
-                list-style-type:none;
-            }
-
-            .setting-list__hint {
-                margin-top: 20px;
-            }
-
-            .mentions-input {
-                margin-top: 10px;
-            }
-
-            .setting-list-item {
-                margin-top:7px;
-            }
-            .has-error {
-                color: #a94442;
-            }
-
-            .file-status {
-                font-size: 13px;
-                margin-top: 8px;
-                color: #555;
-            }
-
-            .confirm-import {
-                padding: 4px 10px;
-                margin: 10px 0;
-            }
-
-        }
-    }
-    .nav-pills {
-        > li {
-            margin: 0;
-            a {
-                border-radius: 0;
-                color: #777;
-            }
-            .glyphicon {
-                width: 25px;
-                top: 2px;
-            }
-            &:hover {
-                a {
-                    background: #E6F2FA;
-                }
-            }
-            &.active {
-                a {
-                    color: #111;
-                    background-color: #E1E1E1;
                     &:before {
-                        content: '';
                         position: absolute;
-                        top: 0;
+                        top: 11px;
-                        left: 0;
+                        right: 50px;
-                        width: 5px;
+                        z-index: 5;
-                        height: 100%;
+                        content: "\f0d7";
-                        background: #000;
+                        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 {
+                    font-weight: 400;
+                    margin-top: 5px;
+                }
+                img {
+                    border: 3px solid transparent;
+                }
+                .active {
+                    img {
+                        border-color: $primary-color;
                     }
                 }
-                a, a:hover, a:focus {
+            }
-                    padding-right: 10px;
+            .custom-label {
-                    background-color: rgba(black, 0.1);
+                font-weight: normal;
-                    border-radius: 0;
+                font-size: 13px;
-                    font-weight: 400;
+                width: 100%;
-                    position: relative;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                margin-bottom: 0;
+            }
+            .input-group-addon {
+                background: transparent;
+            }
+            .radio {
+                label {
+                    font-weight: 600;
                 }
             }
         }
+
+        .section-title {
+            margin-bottom: 5px;
+            font-weight: 600;
+        }
+
+        .section-edit {
+            text-align: right;
+            margin-bottom: 5px;
+            .fa {
+                margin-right: 5px;
+                font-size: 12px;
+                @include opacity(0.5);
+                display: none;
+            }
+        }
+
+        .section-describe {
+            @include opacity(0.7);
+            white-space:pre;
+        }
+
+        .divider-dark {
+            border-bottom:1px solid #aaaaaa;
+        }
+
+        .divider-light {
+            border-bottom:1px solid lightgrey;
+        }
+
+        .setting-list {
+            padding: 0;
+            list-style-type:none;
+        }
+
+        .setting-list__hint {
+            margin-top: 20px;
+        }
+
+        .mentions-input {
+            margin-top: 10px;
+        }
+
+        .setting-list-item {
+            margin-top:7px;
+        }
+        .has-error {
+            color: #a94442;
+        }
+
+        .file-status {
+            font-size: 13px;
+            margin-top: 8px;
+            color: #555;
+        }
+
+        .confirm-import {
+            padding: 4px 10px;
+            margin: 10px 0;
+        }
+
     }
-    h3 {
+}
-        font-size: em(20px);
+.nav-pills {
+    > li {
+        margin: 0;
+        a {
+            border-radius: 0;
+            color: #777;
+        }
+        .glyphicon {
+            width: 25px;
+            top: 2px;
+        }
+        &:hover {
+            a {
+                background: #E6F2FA;
+            }
+        }
+        &.active {
+            a {
+                color: #111;
+                background-color: #E1E1E1;
+                &:before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 5px;
+                    height: 100%;
+                    background: #000;
+                }
+            }
+            a, a:hover, a:focus {
+                padding-right: 10px;
+                background-color: rgba(black, 0.1);
+                border-radius: 0;
+                font-weight: 400;
+                position: relative;
+            }
+        }
     }
 }
+h3 {
+    font-size: em(20px);
+}
+}
 
 .channel-settings {
     padding: 0 10px;