From 32f7dcc811c25d2a2fdb2d14e7b4c91a76601267 Mon Sep 17 00:00:00 2001
From: Warrick Corfe-Tan <warrickct@gmail.com>
Date: Thu, 5 Aug 2021 10:47:53 +1000
Subject: [PATCH] testing shake addition to send button on finished recording.

---
 stylesheets/_session_constants.scss           | 23 +++++++++++++++++++
 stylesheets/_session_conversation.scss        |  5 +++-
 .../session/conversation/SessionRecording.tsx |  7 ++++--
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index 0867f186c..0526845cf 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -175,6 +175,29 @@ $session-font-h4: 16px;
   }
 }
 
+@mixin subtle-shake() {
+    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+    transform: translate3d(0, 0, 0);
+  
+  @keyframes shake {
+    10%, 90% {
+      transform: translate3d(-1px, 0, 0);
+    }
+    
+    20%, 80% {
+      transform: translate3d(2px, 0, 0);
+    }
+  
+    30%, 50%, 70% {
+      transform: translate3d(-4px, 0, 0);
+    }
+  
+    40%, 60% {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+}
+
 $session-subtle-factor: 0.6;
 
 @function subtle($color) {
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index fd242ddb7..eae7d8cfe 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -338,6 +338,10 @@
 
 .send-message-button {
   animation: fadein $session-transition-duration;
+
+  &---shake {
+    @include subtle-shake();
+  }
 }
 
 .session-recording {
@@ -363,7 +367,6 @@
 
     .session-icon-button {
       animation: fadein $session-transition-duration;
-      opacity: 1;
       border-radius: 50%;
       width: $actions-element-size;
       height: $actions-element-size;
diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx
index 9b471b4a8..231a5a366 100644
--- a/ts/components/session/conversation/SessionRecording.tsx
+++ b/ts/components/session/conversation/SessionRecording.tsx
@@ -200,8 +200,11 @@ class SessionRecordingInner extends React.Component<Props, State> {
           null
         }
 
-        {!isRecording && (
-          <div className="send-message-button">
+        {!isRecording  && (
+          <div className={classNames(
+            "send-message-button",
+            hasRecording && 'send-message-button---shake'
+            )}>
             <SessionIconButton
               iconType={SessionIconType.Send}
               iconSize={SessionIconSize.Large}