From 8b06ea88f902230766813b8f172eb545e64861dc Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 28 Sep 2022 17:15:06 +1000
Subject: [PATCH] feat: initial styling for audio player

---
 stylesheets/_modules.scss                     | 74 +++++++++++++++++++
 stylesheets/_session_conversation.scss        | 30 ++------
 ts/components/conversation/H5AudioPlayer.tsx  | 14 +---
 .../message-content/ClickToTrustSender.tsx    |  2 +-
 4 files changed, 84 insertions(+), 36 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 0c6fca683..5c152cd20 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1251,3 +1251,77 @@
 .module-left-pane__virtual-list {
   outline: none;
 }
+
+// TODO Theming - Needs Improvement
+// Module H5AudioPlayer
+.module-message__container--outgoing {
+  .rhap_container {
+    .rhap_play-pause-button,
+    .session-button {
+      color: var(--message-bubbles-sent-text-color);
+      &:hover {
+        color: var(--message-bubbles-sent-text-color);
+      }
+    }
+  }
+
+  .rhap_volume-button {
+    color: var(--message-bubbles-sent-text-color);
+  }
+
+  .rhap_time {
+    color: var(--message-bubbles-sent-text-color);
+  }
+
+  .rhap_progress-bar {
+    background-color: var(--button-icon-stroke-color);
+  }
+
+  .rhap_progress-filled {
+    background-color: var(--button-icon-stroke-hover-color);
+  }
+
+  .rhap_download-progress {
+    background-color: var(--button-icon-stroke-hover-color);
+  }
+
+  .rhap_progress-indicator {
+    background: var(--primary-color);
+  }
+}
+
+.module-message__container--incoming {
+  .rhap_container {
+    .rhap_play-pause-button,
+    .session-button {
+      color: var(--message-bubbles-received-text-color);
+      &:hover {
+        color: var(--message-bubbles-received-text-color);
+      }
+    }
+  }
+
+  .rhap_volume-button {
+    color: var(--message-bubbles-received-text-color);
+  }
+
+  .rhap_time {
+    color: var(--message-bubbles-received-text-color);
+  }
+
+  .rhap_progress-bar {
+    background-color: var(--button-icon-stroke-color);
+  }
+
+  .rhap_progress-filled {
+    background-color: var(--button-icon-stroke-hover-color);
+  }
+
+  .rhap_download-progress {
+    background-color: var(--button-icon-stroke-hover-color);
+  }
+
+  .rhap_progress-indicator {
+    background: var(--primary-color);
+  }
+}
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index 73210d8ee..e5c740d3a 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -20,9 +20,10 @@
 
 @keyframes pulseLight {
   0% {
-    box-shadow: 0px 0px 0px 0px var(--color-destructive-alt);
+    box-shadow: 0px 0px 0px 0px var(--danger-color);
   }
 
+  // TODO Theming - Needs fixing
   50% {
     box-shadow: 0px 0px 12px 0px rgba(var(--color-destructive-alt-rgb), 1);
   }
@@ -330,10 +331,10 @@
       height: var(--margins-sm);
       width: var(--margins-sm);
       border-radius: 50%;
-      background-color: var(--color-destructive-alt);
+      background-color: var(--danger-color);
       margin: 0 var(--margins-sm);
 
-      @include pulse-color(var(--color-destructive-alt), 1s, infinite);
+      @include pulse-color(var(--danger-color), 1s, infinite);
     }
   }
 }
@@ -341,8 +342,7 @@
 /* ************ */
 /* AUDIO PLAYER */
 /* ************ */
-$rhap_theme-color: #212121 !default;
-$rhap_background-color: var(--color-transparent-color) !default;
+$rhap_background-color: var(--transparent-color) !default;
 $rhap_font-family: inherit !default;
 
 .rhap_container,
@@ -363,10 +363,6 @@ $rhap_font-family: inherit !default;
 
   svg {
     transition: fill var(--default-duration);
-
-    &:hover path {
-      fill: var(--color-white-color);
-    }
   }
 }
 
@@ -389,17 +385,11 @@ $rhap_font-family: inherit !default;
   display: none;
 }
 
-.rhap_volume-button {
-  color: subtle(var(--color-text));
-}
-
 .rhap_volume-container div[role='progressbar'] {
   display: none;
 }
 
 .rhap_time {
-  color: subtle(var(--color-text));
-
   font-size: 12px;
 }
 
@@ -409,14 +399,10 @@ $rhap_font-family: inherit !default;
   z-index: 0;
   width: 100%;
   height: 5px;
-  background-color: var(--color-text);
-
   border-radius: 2px;
 }
 
 .rhap_progress-filled {
-  background-color: rgba(var(--color-accent-rgb), 0.6);
-
   padding-left: 5px;
 }
 
@@ -424,8 +410,6 @@ $rhap_font-family: inherit !default;
   height: 100%;
   position: absolute;
   z-index: 1;
-  background-color: subtle(var(--color-text));
-
   border-radius: 2px;
 }
 
@@ -435,9 +419,7 @@ $rhap_font-family: inherit !default;
   height: 15px;
   top: -5px;
   margin-left: -10px;
-  background: var(--primary-color);
-  box-shadow: none;
-  box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important;
 }
 
 .rhap_controls-section {
diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx
index f3a55a4f9..c6c5fc291 100644
--- a/ts/components/conversation/H5AudioPlayer.tsx
+++ b/ts/components/conversation/H5AudioPlayer.tsx
@@ -16,13 +16,8 @@ import { SessionIcon } from '../icon';
 
 const StyledSpeedButton = styled.div`
   padding: var(--margins-xs);
-  opacity: 0.6;
   transition: none;
 
-  :hover {
-    opacity: 1;
-  }
-
   .session-button {
     transition: none;
     width: 34px;
@@ -80,6 +75,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
       dispatch(setNextMessageToPlayId(undefined));
       return;
     }
+
     // justEndedMessageIndex cannot be -1 nor 0, so it is >= 1
     const nextMessageIndex = justEndedMessageIndex - 1;
     // stop auto-playing when the audio messages change author.
@@ -128,12 +124,8 @@ export const AudioPlayerWithEncryptedFile = (props: {
         </StyledSpeedButton>,
       ]}
       customIcons={{
-        play: (
-          <SessionIcon iconType="play" iconSize="small" iconColor={'var(--color-text-subtle)'} />
-        ),
-        pause: (
-          <SessionIcon iconType="pause" iconSize="small" iconColor={'var(--color-text-subtle)'} />
-        ),
+        play: <SessionIcon iconType="play" iconSize="small" />,
+        pause: <SessionIcon iconType="pause" iconSize="small" />,
       }}
     />
   );
diff --git a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
index 2adefdd95..e3ae998b8 100644
--- a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
+++ b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
@@ -38,7 +38,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => {
         message: window.i18n('trustThisContactDialogDescription', [
           convo.getContactProfileNameOrShortenedPubKey(),
         ]),
-        okTheme: SessionButtonColor.Primary,
+        closeTheme: SessionButtonColor.Danger,
         onClickOk: async () => {
           convo.set({ isTrustedForAttachmentDownload: true });
           await convo.commit();