chore: move typing animation to styled components

stylesheets/_modules.scss

@@ -908,92 +908,6 @@
   flex-grow: 1;
 }
 
-// Module: Typing Animation
-
-.module-typing-animation {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-
-  height: 8px;
-  width: 38px;
-  padding-inline-start: 1px;
-  padding-inline-end: 1px;
-}
-
-.module-typing-animation__dot {
-  border-radius: 50%;
-  background-color: $color-gray-60;
-
-  height: 6px;
-  width: 6px;
-  opacity: 0.4;
-}
-
-.module-typing-animation__dot--light {
-  border-radius: 50%;
-  background-color: $color-white;
-
-  height: 6px;
-  width: 6px;
-  opacity: 0.4;
-}
-
-@keyframes typing-animation-first {
-  0% {
-    opacity: 0.4;
-  }
-  20% {
-    transform: scale(1.3);
-    opacity: 1;
-  }
-  40% {
-    opacity: 0.4;
-  }
-}
-
-@keyframes typing-animation-second {
-  10% {
-    opacity: 0.4;
-  }
-  30% {
-    transform: scale(1.3);
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-@keyframes typing-animation-third {
-  20% {
-    opacity: 0.4;
-  }
-  40% {
-    transform: scale(1.3);
-    opacity: 1;
-  }
-  60% {
-    opacity: 0.4;
-  }
-}
-
-.module-typing-animation__dot--first {
-  animation: typing-animation-first 1600ms ease infinite;
-}
-
-.module-typing-animation__dot--second {
-  animation: typing-animation-second 1600ms ease infinite;
-}
-
-.module-typing-animation__dot--third {
-  animation: typing-animation-third 1600ms ease infinite;
-}
-
-.module-typing-animation__spacer {
-  flex-grow: 1;
-}
-
 // Module: Attachments
 
 .module-attachments {

stylesheets/_theme_dark.scss

@@ -313,16 +313,6 @@
     background-color: $color-white-015;
   }
 
-  // Module: Typing Animation
-
-  .module-typing-animation__dot {
-    background-color: $color-white;
-  }
-
-  .module-typing-animation__dot--light {
-    background-color: $color-white;
-  }
-
   // Module: Attachments
 
   .module-attachments {

ts/components/conversation/TypingAnimation.tsx

@@ -1,29 +1,86 @@
 import React from 'react';
-import classNames from 'classnames';
+import styled from 'styled-components';
+
+const StyledTypingContainer = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+
+  height: 8px;
+  width: 38px;
+  padding-inline-start: 1px;
+  padding-inline-end: 1px;
+`;
+
+const StyledTypingDot = styled.div<{ index: number }>`
+  border-radius: 50%;
+  background-color: var(--color-text-subtle);
+
+  height: 6px;
+  width: 6px;
+  opacity: 0.4;
+
+  @keyframes typing-animation-first {
+    0% {
+      opacity: 0.4;
+    }
+    20% {
+      transform: scale(1.3);
+      opacity: 1;
+    }
+    40% {
+      opacity: 0.4;
+    }
+  }
+
+  @keyframes typing-animation-second {
+    10% {
+      opacity: 0.4;
+    }
+    30% {
+      transform: scale(1.3);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  @keyframes typing-animation-third {
+    20% {
+      opacity: 0.4;
+    }
+    40% {
+      transform: scale(1.3);
+      opacity: 1;
+    }
+    60% {
+      opacity: 0.4;
+    }
+  }
+
+  animation: ${props =>
+      props.index === 0
+        ? 'typing-animation-first'
+        : props.index === 1
+        ? 'typing-animation-second'
+        : 'typing-animation-third'}
+    1600ms ease infinite;
+`;
+
+const StyledSpacer = styled.div`
+  flex-grow: 1;
+`;
 
 export const TypingAnimation = () => {
   return (
-    <div className="module-typing-animation" title={window.i18n('typingAlt')}>
+    <StyledTypingContainer title={window.i18n('typingAlt')} aria-label={window.i18n('typingAlt')}>
-      <div
+      <StyledTypingDot index={0} />
-        className={classNames(
+      <StyledSpacer />
-          'module-typing-animation__dot',
+      <StyledTypingDot index={1} />
-          'module-typing-animation__dot--first'
+
-        )}
+      <StyledSpacer />
-      />
+      <StyledTypingDot index={2} />
-      <div className="module-typing-animation__spacer" />
+    </StyledTypingContainer>
-      <div
-        className={classNames(
-          'module-typing-animation__dot',
-          'module-typing-animation__dot--second'
-        )}
-      />
-      <div className="module-typing-animation__spacer" />
-      <div
-        className={classNames(
-          'module-typing-animation__dot',
-          'module-typing-animation__dot--third'
-        )}
-      />
-    </div>
   );
 };