feat: changed long-press-btn to pulsate color to

test and shortened longpress-timeout time
Eyevinn · Apr 18, 2024 · 10621a6 · 10621a6
1 parent bd5793e
commit 10621a6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
@@ -73,7 +73,7 @@ const Dots = styled.span`
 `;
 
 const Pulse = styled.span`
-  position: absolute;
+  /* position: absolute;
   top: 1rem;
   left: 5rem;
   width: 2rem;
@@ -90,7 +90,7 @@ const Pulse = styled.span`
     100% {
       transform: scale(1.5);
     }
-  }
+  } */
 `;
 
 type Props = { className: string };

diff --git a/src/components/production-line/long-press-to-talk-button.tsx b/src/components/production-line/long-press-to-talk-button.tsx
@@ -14,11 +14,21 @@ const Button = styled(ActionButton)`
 
   &:active {
     color: rgba(255, 255, 255, 0);
+    animation: pulse 0.7s ease-in-out infinite alternate;
   }
 
   &.mobile {
     user-select: none;
   }
+
+  @keyframes pulse {
+    0% {
+      background: #4ada1e;
+    }
+    100% {
+      background: rgba(255, 255, 255, 0.78);
+    }
+  }
 `;
 
 export const LongPressToTalkButton = ({
@@ -47,7 +57,7 @@ export const LongPressToTalkButton = ({
       case "pointerdown":
         timeoutId = setTimeout(() => {
           setMicMute(false);
-        }, 600);
+        }, 300);
         setLongPressTimeout(timeoutId);
         break;
       case "pointerup":