applying linting and formatting.

stylesheets/_session_constants.scss

@@ -153,8 +153,7 @@ $session-font-h4: 16px;
   color: subtle($color);
 }
 
-@mixin pulse-color($color,$duration, $repetition) {
+@mixin pulse-color($color, $duration, $repetition) {
-
   animation: pulseColor $duration $repetition;
 
   @keyframes pulseColor {
@@ -162,12 +161,12 @@ $session-font-h4: 16px;
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba($color, 0.7);
     }
-    
+
     70% {
       transform: scale(1);
       box-shadow: 0 0 0 10px rgba($color, 0);
     }
-    
+
     100% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba($color, 0);
@@ -175,7 +174,6 @@ $session-font-h4: 16px;
   }
 }
 
-
 $session-subtle-factor: 0.6;
 
 @function subtle($color) {

stylesheets/_session_conversation.scss

@@ -180,8 +180,8 @@
     border-top: themed('sessionBorder');
   }
 
-   .session-icon-button {
+  .session-icon-button {
-  // & > .session-icon-button {
+    // & > .session-icon-button {
     margin-right: $session-margin-sm;
   }
   .session-icon-button {
@@ -354,7 +354,6 @@
       }
     }
   }
-
 }
 
 .session-recording {

ts/components/session/conversation/SessionRecording.tsx

@@ -120,11 +120,13 @@ class SessionRecordingInner extends React.Component<Props, State> {
     const displayTimeMs = isRecording
       ? (nowTimestamp - startTimestamp) * 1000
       : (this.audioElement &&
-        (this.audioElement?.currentTime * 1000 || this.audioElement?.duration)) ||
+          (this.audioElement?.currentTime * 1000 || this.audioElement?.duration)) ||
-      0;
+        0;
-    let displayTimeString = moment.utc(displayTimeMs).format('m:ss');
 
-    const recordingDurationMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : 1;
+    const displayTimeString = moment.utc(displayTimeMs).format('m:ss');
+    const recordingDurationMs = this.audioElement?.duration
+      ? this.audioElement?.duration * 1000
+      : 1;
 
     let remainingTimeString = '';
     if (recordingDurationMs !== undefined) {
@@ -140,17 +142,15 @@ class SessionRecordingInner extends React.Component<Props, State> {
           onMouseEnter={this.handleHoverActions}
           onMouseLeave={this.handleUnhoverActions}
         >
-          <StyledFlexWrapper
+          <StyledFlexWrapper flexDirection="row" marginHorizontal={Constants.UI.SPACING.marginXs}>
-            flexDirection='row'
+            {isRecording && (
-            marginHorizontal={Constants.UI.SPACING.marginXs}
+              <SessionIconButton
-          >{isRecording && (
+                iconType={SessionIconType.Pause}
-            <SessionIconButton
+                iconSize={SessionIconSize.Medium}
-              iconType={SessionIconType.Pause}
+                iconColor={Constants.UI.COLORS.DANGER_ALT}
-              iconSize={SessionIconSize.Medium}
+                onClick={actionPauseFn}
-              iconColor={Constants.UI.COLORS.DANGER_ALT}
+              />
-              onClick={actionPauseFn}
+            )}
-            />
-          )}
             {actionPauseAudio && (
               <SessionIconButton
                 iconType={SessionIconType.Pause}
@@ -165,7 +165,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
                 onClick={this.playAudio}
               />
             )}
-            { hasRecording && (
+            {hasRecording && (
               <SessionIconButton
                 iconType={SessionIconType.Delete2}
                 iconSize={SessionIconSize.Medium}
@@ -182,30 +182,26 @@ class SessionRecordingInner extends React.Component<Props, State> {
           )}
         </div>
 
-        { hasRecording && !isRecording ?
+        {hasRecording && !isRecording ? (
           <div className={classNames('session-recording--timer', !isRecording && 'playback-timer')}>
-            {
+            {displayTimeString + remainingTimeString}
-              displayTimeString + remainingTimeString
-            }
           </div>
-          :
+        ) : null}
-          null
-        }
 
-        {isRecording ?
+        {isRecording ? (
           <div className={classNames('session-recording--timer')}>
             {displayTimeString}
             <div className="session-recording--timer-light" />
           </div>
-          :
+        ) : null}
-          null
-        }
 
-        {!isRecording  && (
+        {!isRecording && (
-          <div className={classNames(
+          <div
-            "send-message-button",
+            className={classNames(
-            hasRecording && 'send-message-button---scale'
+              'send-message-button',
-            )}>
+              hasRecording && 'send-message-button---scale'
+            )}
+          >
             <SessionIconButton
               iconType={SessionIconType.Send}
               iconSize={SessionIconSize.Large}
@@ -214,7 +210,6 @@ class SessionRecordingInner extends React.Component<Props, State> {
             />
           </div>
         )}
-
       </div>
     );
   }
@@ -366,15 +361,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
   }
 
   /**
-   * Stops recording and sets up audio element, updates recording state.
+   * Creates an audio element using the recorded audio blob.
-   */
-  private async onStopRecordingClick() {
-    this.stopRecordingStream();
-    this.updateAudioElementAndDuration();
-  }
-
-  /**
-   * Creates an audio element using the recorded audio blob. 
    * Updates the duration for displaying audio duration.
    */
   private updateAudioElementAndDuration() {
@@ -384,8 +371,8 @@ class SessionRecordingInner extends React.Component<Props, State> {
 
     // ww adding record duration
     this.setState({
-      recordDuration: this.audioElement.duration
+      recordDuration: this.audioElement.duration,
-    })
+    });
 
     this.audioElement.loop = false;
     this.audioElement.onended = () => {

ts/components/session/settings/SessionSettings.tsx

@@ -253,11 +253,13 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
     return (
       <div className="session-settings__version-info">
         <span className="text-selectable">v{window.versionInfo.version}</span>
-        <span><SessionIconButton
+        <span>
-          iconSize={SessionIconSize.Medium}
+          <SessionIconButton
-          iconType={SessionIconType.Oxen}
+            iconSize={SessionIconSize.Medium}
-          onClick={openOxenWebsite}
+            iconType={SessionIconType.Oxen}
-        /></span>
+            onClick={openOxenWebsite}
+          />
+        </span>
         <span className="text-selectable">{window.versionInfo.commitHash}</span>
       </div>
     );