From c9fd261e0e25ce44b0111ec5032de09da1feff68 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 4 Jan 2021 12:08:45 +1100
Subject: [PATCH] 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 | 9 ++++-----
 ts/state/ducks/SessionTheme.tsx                         | 2 ++
 ts/styled.d.ts                                          | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx
index e99440790..053e808d4 100644
--- a/ts/components/session/conversation/SessionRecording.tsx
+++ b/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);
         }
diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx
index f65eb5523..f5db120df 100644
--- a/ts/state/ducks/SessionTheme.tsx
+++ b/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
diff --git a/ts/styled.d.ts b/ts/styled.d.ts
index b8e5b60c1..afd7d30bb 100644
--- a/ts/styled.d.ts
+++ b/ts/styled.d.ts
@@ -35,6 +35,7 @@ declare module 'styled-components' {
       // text
       textColor: string;
       textColorSubtle: string;
+      textColorSubtleNoOpacity: string;
       textColorOpposite: string;
       textHighlight: string;
       // inbox