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

web/react/components/activity_log_modal.jsx

@@ -31,6 +31,12 @@ 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');
+            console.log(that);
+        }, 1500);
         Client.revokeSession(altId,
             function handleRevokeSuccess() {
                 AsyncClient.getSessions();

web/react/utils/utils.jsx

@@ -503,7 +503,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);

web/sass-files/sass/partials/_access-history.scss

@@ -24,6 +24,6 @@
         font-size: 15px;
     }
     .report__info {
-        color: #999;
+        @include opacity(0.8);
     }
 }

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 {

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);
 		}
 	}
 }

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;
 		}