From 055234ef5377d23cae9fba3f66a4c7806c58fe34 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 28 Aug 2020 16:00:30 +1000
Subject: [PATCH] add animation for highlighted messages

---
 stylesheets/_mentions.scss      | 4 ----
 stylesheets/_mixins.scss        | 7 +++++++
 stylesheets/_session_theme.scss | 9 +--------
 stylesheets/_theme_dark.scss    | 2 --
 stylesheets/themes.scss         | 2 ++
 5 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss
index 30d237de6..8152672b2 100644
--- a/stylesheets/_mentions.scss
+++ b/stylesheets/_mentions.scss
@@ -85,10 +85,6 @@
   color: black;
 }
 
-.message-highlighted {
-  border-radius: $message-container-border-radius;
-  background-color: rgba(255, 197, 50, 0.2);
-}
 
 .module-conversation-list-item--mentioned-us {
   border-left: 4px solid $session-color-green !important;
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index f47a758e0..594c3f14b 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -28,3 +28,10 @@
     @include color-svg($svg, black);
   }
 }
+
+@keyframes highlightedMessageAnimation {
+  25%  { background-color: #00f782; }
+  50%  { background-color: #00000000; }
+  75%  { background-color: #00f782; }
+}
+
diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
index 0e5bfa384..293bffb47 100644
--- a/stylesheets/_session_theme.scss
+++ b/stylesheets/_session_theme.scss
@@ -87,14 +87,7 @@
 
 .message {
   &-highlighted {
-    border-radius: 0;
-
-    @at-root .light-theme #{&} {
-      background-color: $session-shade-5;
-    }
-    @at-root .dark-theme #{&} {
-      background-color: $session-color-white;
-    }
+    animation: highlightedMessageAnimation 3s ease-in-out;
   }
 
   &-selected {
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 96c64ea15..9d3406dfa 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -906,8 +906,6 @@
     color: $color-white;
   }
 
-  // Module: Highlighted Message Body
-
   // Module: Search Results
 
   .module-search-results__conversations-header {
diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss
index 64017b7bc..563a6f9a2 100644
--- a/stylesheets/themes.scss
+++ b/stylesheets/themes.scss
@@ -7,6 +7,8 @@ $accentLightTheme: #00e97b;
 $accentDarkTheme: #00f782;
 
 
+
+
 $themes: (
   light: (
     accent: $accentLightTheme,