add blinking animation for confirm readiness

Asvarox · Jan 3, 2025 · 8871887 · 8871887
1 parent 74681b7
commit 8871887
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/routes/RemoteMic/Panels/Microphone/ConfirmReadiness.tsx b/src/routes/RemoteMic/Panels/Microphone/ConfirmReadiness.tsx
@@ -40,7 +40,7 @@ function ConfirmReadiness({ onConfirm }: Props) {
   };
 
   return visible ? (
-    <Form>
+    <Form className="animate-blink">
       <MenuContainer>
         <ReadyButton data-test="ready-button" onClick={confirm}>
           Ready

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -68,8 +68,23 @@ module.exports = {
             transform: 'scale(0)',
           },
         },
+        blink: {
+          '100%': {
+            backgroundColor: 'rgba(0, 0, 0, 0.85)',
+          },
+          '30%': {
+            backgroundColor: 'rgba(0, 0, 0, 0.85)',
+          },
+          '50%': {
+            backgroundColor: 'rgba(200, 200, 200, 0.85)',
+          },
+          '0%': {
+            backgroundColor: 'rgba(0, 0, 0, 0.85)',
+          },
+        },
       },
       animation: {
+        blink: 'blink 1050ms ease-in-out infinite both',
         calibrationPulse: 'calibrationPulse 1.5s ease 1',
         gradient: 'gradient 15s ease infinite',
         focused: 'focused 1000ms ease-in-out infinite both',