Adding small hover effect to message composition icon buttons. Removing extra method call.

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 ////////////////////
 // //////////////////////////////////////////////

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);
     }
   }
 }

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.