From 91eafd389a5647a40baa37c8c9a6a7aebec830ad Mon Sep 17 00:00:00 2001
From: Warrick Corfe-Tan <warrickct@gmail.com>
Date: Tue, 3 Aug 2021 16:18:38 +1000
Subject: [PATCH] Adding small hover effect to message composition icon
 buttons. Removing extra method call.

---
 stylesheets/_session_constants.scss           | 21 ++-----------------
 stylesheets/_session_conversation.scss        | 10 +++++++--
 .../session/conversation/SessionRecording.tsx |  9 ++++----
 3 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index 2bae44ea0..f4c199274 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -153,9 +153,9 @@ $session-font-h4: 16px;
   color: subtle($color);
 }
 
-@mixin pulse-color($color) {
+@mixin pulse-color($color, $repetition) {
 
-  animation: pulseColor 2s infinite;
+  animation: pulseColor 2s $repetition;
 
   @keyframes pulseColor {
     0% {
@@ -217,23 +217,6 @@ $session-fadein-duration: 0.1s;
   }
 }
 
-@keyframes pulse-shadow {
-  0% {
-    transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
-  }
-  
-  70% {
-    transform: scale(1);
-    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
-  }
-  
-  100% {
-    transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
-
 // //////////////////////////////////////////////
 // ///////////////// Various ////////////////////
 // //////////////////////////////////////////////
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index 7119ea5f8..4435bd6dc 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -187,7 +187,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    opacity: 0.8;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+      transform: scale(0.95);
+      transition: $session-transition-duration;
+    }
 
     .send {
       padding: $session-margin-xs;
@@ -436,7 +442,7 @@
       background-color: $session-color-danger-alt;
       margin: 0 $session-margin-sm;
 
-      @include pulse-color($session-color-danger-alt);
+      @include pulse-color($session-color-danger-alt, infinite);
     }
   }
 }
diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx
index 64f5f81be..f1122c0e8 100644
--- a/ts/components/session/conversation/SessionRecording.tsx
+++ b/ts/components/session/conversation/SessionRecording.tsx
@@ -133,7 +133,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
       displayTimeString += remainingTimeString;
     }
 
-    const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream;
+    const actionPauseFn = isPlaying ? this.pauseAudio : this.onStopRecordingClick;
 
     return (
       <div role="main" className="session-recording" tabIndex={0} onKeyDown={this.onKeyDown}>
@@ -348,20 +348,19 @@ class SessionRecordingInner extends React.Component<Props, State> {
     this.recorder = undefined;
 
     this.audioBlobMp3 = blob;
-    this.updateAudioElementAndDuration();
 
     // Stop recording
     this.stopRecordingState();
   }
 
+  /**
+   * Stops recording and sets up audio element, updates recording state.
+   */
   private async onStopRecordingClick() {
     this.stopRecordingStream();
     this.updateAudioElementAndDuration();
-    this.stopRecordingState();
   }
 
-
-
   /**
    * Creates an audio element using the recorded audio blob. 
    * Updates the duration for displaying audio duration.