Multiple UI Improvements (#4712)

* Multiple UI Improvements

* Reverting modal animation

webapp/components/suggestion/switch_channel_provider.jsx

@@ -35,6 +35,8 @@ class SwitchChannelSuggestion extends Suggestion {
             icon = <div className='status'><i className='fa fa-globe'/></div>;
         } else if (item.type === Constants.PRIVATE_CHANNEL) {
             icon = <div className='status'><i className='fa fa-lock'/></div>;
+        } else {
+            icon = <div className='status'><i className='fa fa-user'/></div>;
         }
 
         return (

webapp/components/user_settings/import_theme_modal.jsx

@@ -171,7 +171,7 @@ export default class ImportThemeModal extends React.Component {
                                 />
                             </p>
                             <div className='form-group less'>
-                                <div className='col-sm-9'>
+                                <div className='col-sm-12'>
                                     <input
                                         type='text'
                                         className='form-control'

webapp/sass/components/_mentions.scss

@@ -21,6 +21,11 @@
     width: 100%;
     z-index: 101;
 
+    .fa-user {
+        position: relative;
+        top: -1px;
+    }
+
     .mention--align {
         @include clearfix;
         text-overflow: ellipsis;

webapp/sass/components/_popover.scss

@@ -17,6 +17,7 @@
     }
 
     .popover-title {
+        @include border-radius(0);
         background: alpha-color($black, .05);
         max-width: 100%;
         overflow: hidden;

webapp/sass/layout/_forms.scss

@@ -60,6 +60,26 @@
     }
 }
 
+.has-error {
+    .help-block,
+    .control-label,
+    .radio,
+    .checkbox,
+    .radio-inline,
+    .checkbox-inline {
+        color: $red;
+    }
+
+    &.radio,
+    &.checkbox,
+    &.radio-inline,
+    &.checkbox-inline {
+        label {
+            color: $red;
+        }
+    }
+}
+
 .padding-top {
     padding-top: 7px;
 

webapp/sass/layout/_headers.scss

@@ -210,7 +210,6 @@
 
     .channel-intro-text {
         margin-top: 35px;
-        word-break: break-all;
     }
 }
 

webapp/sass/responsive/_mobile.scss

@@ -5,23 +5,6 @@
         max-height: 145px;
     }
 
-    .modal {
-        .modal-dialog {
-            &.new-channel__modal {
-                position: fixed;
-                @include translate3d(0, 100%, 0);
-            }
-        }
-
-        &.in {
-            .modal-dialog {
-                &.new-channel__modal {
-                    @include translate3d(0, 0, 0);
-                }
-            }
-        }
-    }
-
     .webrtc__notification--rhs {
         left: auto;
         right: 0;
@@ -43,7 +26,7 @@
         @include box-shadow(none);
         background: alpha-color($black, .8);
         border: none;
-        height: calc(100% - 45px);
+        height: calc(100% - 40px);
         max-width: 100%;
         position: fixed;
         top: 47px;
@@ -598,6 +581,16 @@
                     min-height: 100%;
                 }
 
+                .nav-pills {
+                    > li {
+                        &:hover {
+                            a {
+                                background: transparent !important;
+                            }
+                        }
+                    }
+                }
+
                 &.display--content {
                     .modal-header {
                         display: none;
@@ -802,7 +795,7 @@
                 @include translate3d(0, 100%, 0);
                 background: alpha-color($black, .9);
                 display: block;
-                height: calc(100% - 45px);
+                height: calc(100% - 40px);
                 left: 0;
                 overflow: auto;
                 padding: 1.4em 0 0;
@@ -1011,11 +1004,11 @@
                     padding-bottom: 25px;
 
                     ul {
-                        clear: both;
+                        background: $white;
-                        background: #ffffff;
                         border-radius: 3px;
-                        top: 5px;
+                        clear: both;
                         position: relative;
+                        top: 5px;
 
                         li {
                             a {
@@ -1031,21 +1024,21 @@
 
                 > a {
                     font-size: 15px;
-                    margin: 0;
                     line-height: 2.5;
+                    margin: 0;
 
                     &:hover,
                     &:focus {
-                        background: transparent;
+                        background: transparent !important;
                     }
 
                     &.has-close {
                         .btn-close {
-                            width: 40px;
-                            text-align: center;
-                            right: 0;
-                            display: block;
                             @include opacity(.5);
+                            display: block;
+                            right: 0;
+                            text-align: center;
+                            width: 40px;
                         }
                     }
                 }

webapp/sass/utils/_variables.scss

@@ -6,7 +6,7 @@ $primary-color--hover: darken($primary-color, 10%);
 $bg--gray: rgb(245, 245, 245);
 $white: rgb(255, 255, 255);
 $black: rgb(0, 0, 0);
-$red: rgb(229, 101, 101);
+$red: rgb(214, 73, 70);
 $yellow: rgb(255, 255, 0);
 $light-gray: rgba(0, 0, 0, .15);
 $gray: rgba(0, 0, 0, .3);

webapp/utils/utils.jsx

@@ -476,6 +476,7 @@ export function applyTheme(theme) {
         changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
         changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText);
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
+        changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6));
     }
 
     if (theme.sidebarUnreadText) {
@@ -484,7 +485,6 @@ export function applyTheme(theme) {
 
     if (theme.sidebarTextHoverBg) {
         changeCss('.sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg);
-        changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg);
     }
 
     if (theme.sidebarTextActiveBorder) {