Merge pull request #946 from asaadmahmoodspin/ui-improvements

PLT-451 - Adding visual effect for logout active sessions button

9 files changed, 38 insertions, 26 deletions

diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index aee2541b5..ff370c32e 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -31,6 +31,11 @@ export default class ActivityLogModal extends React.Component {
     }
     submitRevoke(altId, e) {
         e.preventDefault();
+        var modalContent = $(e.target).closest('.modal-content');
+        modalContent.addClass('animation--highlight');
+        setTimeout(() => {
+            modalContent.removeClass('animation--highlight');
+        }, 1500);
         Client.revokeSession(altId,
             function handleRevokeSuccess() {
                 AsyncClient.getSessions();
diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx
index 4e8ee03fa..3301c6596 100644
--- a/web/react/components/user_settings/import_theme_modal.jsx
+++ b/web/react/components/user_settings/import_theme_modal.jsx
@@ -49,7 +49,6 @@ export default class ImportThemeModal extends React.Component {
         theme.sidebarText = colors[5];
         theme.sidebarUnreadText = colors[5];
         theme.sidebarTextHoverBg = colors[4];
-        theme.sidebarTextHoverColor = colors[5];
         theme.sidebarTextActiveBg = colors[2];
         theme.sidebarTextActiveColor = colors[3];
         theme.sidebarHeaderBg = colors[1];
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index aba63b91c..8fe1a5884 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -122,10 +122,9 @@ module.exports = {
         default: {
             type: 'Mattermost',
             sidebarBg: '#fafafa',
-            sidebarText: '#999999',
+            sidebarText: '#333333',
             sidebarUnreadText: '#333333',
             sidebarTextHoverBg: '#e6f2fa',
-            sidebarTextHoverColor: '#999999',
             sidebarTextActiveBg: '#e1e1e1',
             sidebarTextActiveColor: '#111111',
             sidebarHeaderBg: '#2389d7',
@@ -144,10 +143,9 @@ module.exports = {
         organization: {
             type: 'Organization',
             sidebarBg: '#2071a7',
-            sidebarText: '#bfcde8',
+            sidebarText: '#fff',
             sidebarUnreadText: '#fff',
             sidebarTextHoverBg: '#136197',
-            sidebarTextHoverColor: '#bfcde8',
             sidebarTextActiveBg: '#136197',
             sidebarTextActiveColor: '#FFFFFF',
             sidebarHeaderBg: '#2f81b7',
@@ -166,10 +164,9 @@ module.exports = {
         mattermostDark: {
             type: 'Mattermost Dark',
             sidebarBg: '#1B2C3E',
-            sidebarText: '#bbbbbb',
+            sidebarText: '#fff',
             sidebarUnreadText: '#fff',
             sidebarTextHoverBg: '#4A5664',
-            sidebarTextHoverColor: '#bbbbbb',
             sidebarTextActiveBg: '#39769C',
             sidebarTextActiveColor: '#FFFFFF',
             sidebarHeaderBg: '#1B2C3E',
@@ -188,10 +185,9 @@ module.exports = {
         windows10: {
             type: 'Windows Dark',
             sidebarBg: '#171717',
-            sidebarText: '#999',
+            sidebarText: '#fff',
             sidebarUnreadText: '#fff',
             sidebarTextHoverBg: '#302e30',
-            sidebarTextHoverColor: '#999',
             sidebarTextActiveBg: '#484748',
             sidebarTextActiveColor: '#FFFFFF',
             sidebarHeaderBg: '#1f1f1f',
@@ -234,10 +230,6 @@ module.exports = {
             uiName: 'Sidebar Text Hover BG'
         },
         {
-            id: 'sidebarTextHoverColor',
-            uiName: 'Sidebar Text Hover Color'
-        },
-        {
             id: 'sidebarTextActiveBg',
             uiName: 'Sidebar Text Active BG'
         },
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 3a04f3623..8431e56bc 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -399,9 +399,9 @@ export function applyTheme(theme) {
     }
 
     if (theme.sidebarText) {
-        changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + theme.sidebarText, 1);
+        changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1);
         changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1);
-        changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8), 1);
+        changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1);
         changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1);
         changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 1);
         changeCss('.sidebar--left .status path', 'fill:' + changeOpacity(theme.sidebarText, 0.5), 1);
@@ -417,11 +417,6 @@ export function applyTheme(theme) {
         changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1);
     }
 
-    if (theme.sidebarTextHoverColor) {
-        changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + theme.sidebarTextHoverColor, 2);
-        changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'color:' + theme.sidebarTextHoverColor, 2);
-    }
-
     if (theme.sidebarTextActiveBg) {
         changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'background:' + theme.sidebarTextActiveBg, 1);
     }
@@ -495,7 +490,7 @@ export function applyTheme(theme) {
         changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1);
         changeCss('.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
         changeCss('@media(max-width: 768px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: inherit;', 1);
-        changeCss('.search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro .channel-intro__content', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
         changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2);
@@ -503,7 +498,7 @@ export function applyTheme(theme) {
         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', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-table tbody>tr td, .member-div:first-child, .member-div', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
+        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-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: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/partials/_access-history.scss
index 412a2a1d0..a3289ecc0 100644
--- a/web/sass-files/sass/partials/_access-history.scss
+++ b/web/sass-files/sass/partials/_access-history.scss
@@ -24,6 +24,6 @@
         font-size: 15px;
     }
     .report__info {
-        color: #999;
+        @include opacity(0.8);
     }
 }
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss
index 3f0c3090d..2fb37a3bb 100644
--- a/web/sass-files/sass/partials/_activity-log.scss
+++ b/web/sass-files/sass/partials/_activity-log.scss
@@ -1,3 +1,20 @@
+@keyframes highlight {
+  from { background: rgba(yellow, 0.5);}
+  to { background: none;}
+}
+
+.animation--highlight {
+    &:before {
+        content: '';
+        animation: highlight 1.5s ease;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
 .activity-log__table {
     display: table;
     width: 100%;
@@ -26,7 +43,7 @@
         }
     }
     .report__info {
-        color: #999;
+        @include opacity(0.8);
     }
 }
 .session-help-text {
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 4237ee1fa..18462d92a 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -34,6 +34,10 @@ body {
   }
 }
 
+.input-group-addon {
+  background: transparent;
+}
+
 .popover {
   color: #333;
   &.bottom {
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 8bf4b0534..19cfdc050 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -257,7 +257,7 @@ body.ios {
 			line-height: 18px;
 			display: inline-block;
 			font-size: 13px;
-			@include opacity(0.6);
+			@include opacity(0.7);
 		}
 	}
 }
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index da5bcbad2..e4860b286 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -29,7 +29,7 @@
 			min-height: 100px;
 		}
 		.msg-typing {
-			color: #555;
+			@include opacity(0.7);
 			float: left;
 			padding-top: 17px;
 		}