feat: updated message highlight durations

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}

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -33,9 +33,7 @@ type Props = {
 };
 
 const highlightedMessageAnimation = keyframes`
-  1% {
+  1% { background-color: var(--primary-color); }
-      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} {