From e6a26945d5c13bf4999196b918536b2c05da09f4 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 24 May 2024 15:40:17 +1000
Subject: [PATCH] feat: updated message highlight durations

---
 .../message/message-content/MessageHighlighter.tsx         | 7 ++++++-
 .../message/message-item/GenericReadableMessage.tsx        | 6 ++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ts/components/conversation/message/message-content/MessageHighlighter.tsx b/ts/components/conversation/message/message-content/MessageHighlighter.tsx
index 5925b687a..d89018c22 100644
--- a/ts/components/conversation/message/message-content/MessageHighlighter.tsx
+++ b/ts/components/conversation/message/message-content/MessageHighlighter.tsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
 import { MouseEvent, ReactNode } from 'react';
 import styled from 'styled-components';
+import { THEME_GLOBALS } from '../../../../themes/globals';
 
 const StyledMessageHighlighter = styled(motion.div)``;
 
@@ -20,7 +21,11 @@ export function MessageHighlighter(props: {
       onClick={onClick}
       animate={{
         opacity: highlight ? [1, 0.2, 1, 0.2, 1] : undefined,
-        transition: { duration: 1, ease: 'linear', repeat: 0 },
+        transition: {
+          duration: THEME_GLOBALS['--duration-message-highlight-seconds'],
+          ease: 'linear',
+          repeat: 0,
+        },
       }}
     >
       {children}
diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
index 1beaec900..5822680da 100644
--- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
+++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
@@ -33,9 +33,7 @@ type Props = {
 };
 
 const highlightedMessageAnimation = keyframes`
-  1% {
-      background-color: var(--primary-color);
-  }
+  1% { background-color: var(--primary-color); }
 `;
 
 const StyledReadableMessage = styled.div<{
@@ -50,7 +48,7 @@ const StyledReadableMessage = styled.div<{
   padding: ${props => (props.isDetailView ? '0' : 'var(--margins-xs) var(--margins-lg) 0')};
 
   &.message-highlighted {
-    animation: ${highlightedMessageAnimation} 1s ease-in-out;
+    animation: ${highlightedMessageAnimation} var(--duration-message-highlight) ease-in-out;
   }
 
   ${StyledMessageReactionsContainer} {