fix color no opacity for recording playback view

having an opacity on the bg color was making the source-atop composition not visible with the sweeping color

ts/components/session/conversation/SessionRecording.tsx

@@ -382,7 +382,6 @@ class SessionRecordingInner extends React.Component<Props, State> {
         this.pauseAudio();
         return;
       }
-
       requestAnimationFrame(drawSweepingTimeline);
     };
 
@@ -497,7 +496,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
     processor.onaudioprocess = () => {
       const streamParams = { stream, media, input, processor };
       this.setState({ streamParams });
-      const { textColorSubtle } = this.props.theme.colors;
+      const { textColorSubtleNoOpacity } = this.props.theme.colors;
 
       const {
         width,
@@ -554,7 +553,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
           const offsetY = Math.ceil(height / 2 - barHeight / 2);
 
           if (canvasContext) {
-            canvasContext.fillStyle = textColorSubtle;
+            canvasContext.fillStyle = textColorSubtleNoOpacity;
             this.drawRoundedRect(canvasContext, offsetX, offsetY, barHeight);
           }
         }
@@ -612,7 +611,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
       minBarHeight,
     } = this.state.canvasParams;
 
-    const { textColorSubtle } = this.props.theme.colors;
+    const { textColorSubtleNoOpacity } = this.props.theme.colors;
 
     const numBars = width / (barPadding + barWidth);
 
@@ -668,7 +667,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
           const offsetX = Math.ceil(i * (barWidth + barPadding));
           const offsetY = Math.ceil(height / 2 - barHeight / 2);
 
-          canvasContext.fillStyle = textColorSubtle;
+          canvasContext.fillStyle = textColorSubtleNoOpacity;
 
           this.drawRoundedRect(canvasContext, offsetX, offsetY, barHeight);
         }

ts/state/ducks/SessionTheme.tsx

@@ -49,6 +49,7 @@ export const lightTheme: DefaultTheme = {
     // text
     textColor: black,
     textColorSubtle: `${black}99`,
+    textColorSubtleNoOpacity: '#52514f',
     textColorOpposite: white,
     textHighlight: `${black}33`,
     // inbox
@@ -103,6 +104,7 @@ export const darkTheme = {
     // text
     textColor: white,
     textColorSubtle: `${white}99`,
+    textColorSubtleNoOpacity: '#7f7d7d',
     textColorOpposite: black,
     textHighlight: `${accentDarkTheme}99`,
     // inbox

ts/styled.d.ts

@@ -35,6 +35,7 @@ declare module 'styled-components' {
       // text
       textColor: string;
       textColorSubtle: string;
+      textColorSubtleNoOpacity: string;
       textColorOpposite: string;
       textHighlight: string;
       // inbox