Merge branch 'audio-styles' into 'develop'

Fix: audio player track position opacity missing

Closes #1381

See merge request soapbox-pub/soapbox!2302

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Posts: fixed emojis being cut off in reactions modal.
+- Posts: fix audio player progress bar visibility.
 
 ## [3.2.0] - 2023-02-15
 
@@ -25,7 +26,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reactions: adds support for reacting to chat messages.
 - Groups: initial support for groups.
 - Profile: add RSS link to user profiles.
-- Posts: fix posts filtering.
 - Chats: reset chat message field height after sending a message.
 - Admin: allow to manage announcements.
 
@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - index.html: remove `referrer` meta tag so it doesn't conflict with backend's `Referrer-Policy` header.
 - Modals: fix media modal automatically switching to video.
 - Navigation: profile dropdown erratic behavior.
+- Posts: fix posts filtering.
 
 ### Removed
 - Admin: single user mode. Now the homepage can be redirected to any URL.

app/soapbox/features/audio/index.tsx

@@ -499,13 +499,13 @@ const Audio: React.FC<IAudio> = (props) => {
 
         <div
           className='video-player__seek__progress'
-          style={{ width: `${progress}%`, backgroundColor: _getAccentColor() }}
+          style={{ width: `${progress}%`, backgroundColor: accentColor }}
         />
 
         <span
           className={clsx('video-player__seek__handle', { active: dragging })}
           tabIndex={0}
-          style={{ left: `${progress}%`, backgroundColor: _getAccentColor() }}
+          style={{ left: `${progress}%`, backgroundColor: accentColor }}
           onKeyDown={handleAudioKeyDown}
         />
       </div>

app/styles/components/audio-player.scss

@@ -8,11 +8,11 @@
 
   .video-player__volume::before,
   .video-player__seek::before {
-    @apply bg-current opacity-[15];
+    @apply bg-white/10;
   }
 
   .video-player__seek__buffer {
-    @apply bg-current opacity-20;
+    @apply bg-white/20;
   }
 
   .video-player__buttons button {