From 08c2d289420746992b99bfe992144ef9b06b025a Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 6 Dec 2016 20:51:31 +0500
Subject: Multiple UI Improvements (#4712)

* Multiple UI Improvements

* Reverting modal animation
---
 .../suggestion/switch_channel_provider.jsx         |  2 +
 .../user_settings/import_theme_modal.jsx           |  2 +-
 webapp/sass/components/_mentions.scss              |  5 +++
 webapp/sass/components/_popover.scss               |  1 +
 webapp/sass/layout/_forms.scss                     | 20 +++++++++
 webapp/sass/layout/_headers.scss                   |  1 -
 webapp/sass/responsive/_mobile.scss                | 49 ++++++++++------------
 webapp/sass/utils/_variables.scss                  |  2 +-
 webapp/utils/utils.jsx                             |  2 +-
 9 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/webapp/components/suggestion/switch_channel_provider.jsx b/webapp/components/suggestion/switch_channel_provider.jsx
index 534a7e30f..cb907862a 100644
--- a/webapp/components/suggestion/switch_channel_provider.jsx
+++ b/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 (
diff --git a/webapp/components/user_settings/import_theme_modal.jsx b/webapp/components/user_settings/import_theme_modal.jsx
index 32c6837e8..7ae057cc4 100644
--- a/webapp/components/user_settings/import_theme_modal.jsx
+++ b/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'
diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 4ddb861ca..e1e35ea29 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/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;
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 408f0ffd0..1bd1f2c3b 100644
--- a/webapp/sass/components/_popover.scss
+++ b/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;
diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index 7b4e03ad9..100b618e8 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/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;
 
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index fd1c42135..db3bda627 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -210,7 +210,6 @@
 
     .channel-intro-text {
         margin-top: 35px;
-        word-break: break-all;
     }
 }
 
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index dc55d2d54..68ba20537 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/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: #ffffff;
+                        background: $white;
                         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;
                         }
                     }
                 }
diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss
index ffbcc847e..85bdd28a3 100644
--- a/webapp/sass/utils/_variables.scss
+++ b/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);
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index f37ddd73c..00b7f53f8 100644
--- a/webapp/utils/utils.jsx
+++ b/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) {
-- 
cgit v1.2.3-1-g7c22