fix theme for voice messages and recording

stylesheets/_modules.scss

@@ -1982,7 +1982,10 @@
   top: 0;
   left: 0;
 
-  @include color-svg('../images/spinner-56.svg', $color-gray-60);
+  @include themify($themes) {
+    @include color-svg('../images/spinner-56.svg', themed('textColor'));
+  }
+
   z-index: 3;
   height: 56px;
   width: 56px;
@@ -2040,10 +2043,15 @@
 }
 
 .module-spinner__circle--incoming {
-  background-color: $color-white-04;
+  @include themify($themes) {
+    background-color: rgba(themed('receivedMessageText'), 0.2);
+  }
 }
-.module-spinner__arc--incoming {
-  background-color: $color-white;
+
+.module-spinner__circle--outgoing {
+  @include themify($themes) {
+    background-color: rgba(themed('sentMessageText'), 0.2);
+  }
 }
 
 // Module: Highlighted Message Body
@@ -2227,8 +2235,8 @@
 // All media query widths have 300px added to account for the left pane
 // And have been tweaked for smoother transitions
 
-// To limit messages with things forcing them wider, like long attachment names
 .module-message__container {
+  // To limit messages with things forcing them wider, like long attachment names
   max-width: 300px;
 }
 

stylesheets/_session_conversation.scss

@@ -410,6 +410,7 @@
     font-family: $session-font-default;
     font-weight: bold;
     font-size: 14px;
+    flex-shrink: 0;
 
     &.playback-timer {
       margin-right: $session-margin-sm;
@@ -442,8 +443,6 @@
 /* ************ */
 $rhap_theme-color: #212121 !default;
 $rhap_background-color: rgba(0, 0, 0, 0) !default;
-$rhap_bar-color: #232323 !default;
-$rhap_time-color: #dddddd !default;
 $rhap_font-family: inherit !default;
 
 .rhap_container,
@@ -477,6 +476,7 @@ $rhap_font-family: inherit !default;
 
 .rhap_current-time {
   margin: 0 5px 0 4px;
+  flex-shrink: 0;
 }
 
 .rhap_play-pause-button {
@@ -489,14 +489,21 @@ $rhap_font-family: inherit !default;
   display: none;
 }
 
+.rhap_volume-button {
+  @include themify($themes) {
+    color: subtle(themed('textColor'));
+  }
+}
+
 .rhap_volume-container div[role='progressbar'] {
   display: none;
 }
 
 .rhap_time {
-  color: $rhap_time-color;
+  @include themify($themes) {
+    color: subtle(themed('textColor'));
+  }
   font-size: 12px;
-  width: 32px;
 }
 
 .rhap_progress-bar {
@@ -505,22 +512,35 @@ $rhap_font-family: inherit !default;
   z-index: 0;
   width: 100%;
   height: 5px;
-  background-color: $rhap_bar-color;
+  @include themify($themes) {
+    background-color: rgba(themed('textColor'), 0.3);
+  }
   border-radius: 2px;
 }
 
 .rhap_progress-filled {
-  opacity: 0.6;
-  background-color: #00f782;
+  @include themify($themes) {
+    background-color: rgba(themed('accent'), 0.6);
+  }
   padding-left: 5px;
-  left: -5px;
+}
+
+// special case for light theme, outgoing message (accent color on accent color background is not readable)
+.light-theme .module-message--outgoing {
+  .rhap_progress-filled {
+    @include themify($themes) {
+      background-color: rgba(themed('textColor'), 0.6);
+    }
+  }
 }
 
 .rhap_download-progress {
   height: 100%;
   position: absolute;
   z-index: 1;
-  background-color: $rhap_bar-color;
+  @include themify($themes) {
+    background-color: subtle(themed('textColor'));
+  }
   border-radius: 2px;
 }
 

stylesheets/_theme_dark.scss

@@ -527,23 +527,6 @@
   .module-spinner__circle {
     background-color: $color-white-04;
   }
-  .module-spinner__arc {
-    background-color: $color-gray-05;
-  }
-
-  .module-spinner__circle--incoming {
-    background-color: $color-white-04;
-  }
-  .module-spinner__arc--incoming {
-    background-color: $color-gray-05;
-  }
-
-  .module-spinner__circle--outgoing {
-    background-color: $color-white-04;
-  }
-  .module-spinner__arc--outgoing {
-    background-color: $color-gray-05;
-  }
 
   .module-search-results__conversations-header {
     color: $color-gray-05;

stylesheets/themes.scss

@@ -26,7 +26,7 @@ $themes: (
       inputBackground: rgba($inputBackgroundColor, 0.12),
     // text
       textColor: $black,
-    textColorSubtle: #a0a0a0,
+    textColorSubtle: rgba($black, 0.6),
     textColorOpposite: $white,
     textHighlight: rgba($black, 0.2),
     // inbox
@@ -76,7 +76,7 @@ $themes: (
       inputBackground: rgba($inputBackgroundColor, 0.12),
     // text
       textColor: $white,
-    textColorSubtle: #a0a0a0,
+    textColorSubtle: rgba($white, 0.6),
     textColorOpposite: $black,
     textHighlight: rgba($accentDarkTheme, 0.6),
     // inbox

ts/components/conversation/Message.tsx

@@ -308,7 +308,7 @@ class MessageInner extends React.PureComponent<Props, State> {
                 <SessionIcon
                   iconType={SessionIconType.Play}
                   iconSize={SessionIconSize.Small}
-                  iconColor="#868686"
+                  iconColor={this.props.theme.colors.textColorSubtle}
                   theme={this.props.theme}
                 />
               ),
@@ -316,7 +316,7 @@ class MessageInner extends React.PureComponent<Props, State> {
                 <SessionIcon
                   iconType={SessionIconType.Pause}
                   iconSize={SessionIconSize.Small}
-                  iconColor="#868686"
+                  iconColor={this.props.theme.colors.textColorSubtle}
                   theme={this.props.theme}
                 />
               ),

ts/state/ducks/SessionTheme.tsx

@@ -48,7 +48,7 @@ export const lightTheme: DefaultTheme = {
     inputBackground: '#8E8E93331F',
     // text
     textColor: black,
-    textColorSubtle: '#a0a0a0',
+    textColorSubtle: `${black}99`,
     textColorOpposite: white,
     textHighlight: `${black}33`,
     // inbox
@@ -102,7 +102,7 @@ export const darkTheme = {
     inputBackground: '#8e8e931F',
     // text
     textColor: white,
-    textColorSubtle: '#a0a0a0',
+    textColorSubtle: `${white}99`,
     textColorOpposite: black,
     textHighlight: `${accentDarkTheme}99`,
     // inbox