From 6d6b8134462d9e718f21e76f9c47f73604574c9b Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 30 Mar 2017 06:07:39 +0500
Subject: [PATCH] Ui ifxes (#5890)

* PLT-5975 - Back arrow in flag list cutting off

* PLT-6049 - Fixing pin icon color, and hover state

* PLT-5989 - Channel member and pin icon issue

* PLT-6067 - Pinned icon misaligned in firefox

* PLT-5885 - Adjusting icon spacing in modal
---
 .../components/delete_integration.jsx          |  2 +-
 webapp/sass/base/_typography.scss              |  4 ++--
 webapp/sass/components/_webrtc.scss            |  3 ++-
 webapp/sass/layout/_content.scss               | 18 ++++++++++--------
 webapp/sass/layout/_headers.scss               |  1 +
 webapp/sass/layout/_sidebar-right.scss         |  4 ++++
 webapp/sass/responsive/_tablet.scss            |  3 +--
 webapp/utils/utils.jsx                         |  8 ++++----
 8 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/webapp/components/integrations/components/delete_integration.jsx b/webapp/components/integrations/components/delete_integration.jsx
index 8e2e27596c..06ef7802a5 100644
--- a/webapp/components/integrations/components/delete_integration.jsx
+++ b/webapp/components/integrations/components/delete_integration.jsx
@@ -25,7 +25,7 @@ export default class DeleteIntegration extends DeleteModalTrigger {
     get modalMessage() {
         return (
             <div className='alert alert-warning'>
-                <i className='fa fa-warning'/>
+                <i className='fa fa-warning fa-margin--right'/>
                 <FormattedMessage
                     id={this.props.messageId}
                     defaultMessage='This action permanently deletes the integration and breaks any integrations using it. Are you sure you want to delete it?'
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index a9bc183c48..c2ec3a859c 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -37,11 +37,11 @@ body {
 
 .fa {
     &.fa-margin--left {
-        margin-left: 2px;
+        margin-left: 3px;
     }
 
     &.fa-margin--right {
-        margin-right: 2px;
+        margin-right: 3px;
     }
 }
 
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index 3cb4053033..a36fb1c95e 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -348,6 +348,7 @@
     }
 
     .search__form {
-        width: calc(100% - 92px);
+        margin-left: 5px;
+        width: calc(100% - 80px);
     }
 }
diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index b6fe98eb42..b428189308 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -6,9 +6,11 @@
         .search-bar__container {
             display: none;
         }
+
         .search-btns {
             display: none;
         }
+
         .header-list__right {
             // the negative margin-right is used
             // to prevent the icons in the header from
@@ -17,12 +19,11 @@
             // the below z-index is used to ensure the icons
             // stays on the top and don't get hidden by the
             // search's input block
-            position: relative;
-            z-index: 6;
-
+            float: right;
             margin-right: -18px;
             padding-right: 0px !important;
-            float: right;
+            position: relative;
+            z-index: 6;
         }
     }
 
@@ -30,9 +31,11 @@
         .search-bar__container {
             display: none;
         }
+
         .search-btns {
             display: none;
         }
+
         .header-list__right {
             // the negative margin-right is used
             // to prevent the icons in the header from
@@ -41,12 +44,11 @@
             // the below z-index is used to ensure the icons
             // stays on the top and don't get hidden by the
             // search's input block
-            position: relative;
-            z-index: 6;
-
+            float: right;
             margin-right: -18px;
             padding-right: 0px !important;
-            float: right
+            position: relative;
+            z-index: 6;
         }
     }
 }
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index f8211d433c..4368fc397c 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -44,6 +44,7 @@
             font-weight: normal !important;
 
             &.header-list__right {
+                white-space: nowrap;
                 padding-right: 4px;
             }
         }
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 8d5a1d044b..8d801a0c23 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -14,6 +14,10 @@
         z-index: 5;
     }
 
+    &.sidebar--right--expanded {
+        z-index: 10;
+    }
+
     .sidebar--right__bg {
         @include single-transition(background-color, .5s, ease);
         background-color: alpha-color($black, 0);
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 54fff87e82..e97eb3b59c 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -220,9 +220,8 @@
         .sidebar--right__title {
             display: inline-block;
             max-width: 300px;
-            white-space: nowrap;
-            overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 3bf8777812..7a16a3be89 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -608,8 +608,8 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
         changeCss('.app__body .channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
-        changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
-        changeCss('.app__body .channel-header #pinned-posts-button', 'fill:' + changeOpacity(theme.centerChannelColor, 0.8));
+        changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.6));
+        changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
         changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header, .app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25));
         changeCss('.app__body .search-help-popover .search-autocomplete__divider span, .app__body .suggestion-list__divider > span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
@@ -685,9 +685,9 @@ export function applyTheme(theme) {
     }
 
     if (theme.linkColor) {
-        changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
+        changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover, .app__body .channel-header #member_popover:hover', 'color:' + theme.linkColor);
         changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
-        changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
+        changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply, .app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + theme.linkColor);
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor);