refactor(Audio): use linear-gradient as progressbar

apa512 · Aug 3, 2022 · 474666a · 474666a
1 parent 2131e6d
commit 474666a
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/src/components/Attachment/Audio.tsx b/src/components/Attachment/Audio.tsx
@@ -66,7 +66,12 @@ const AudioV1 = ({ og }: AudioProps) => {
           </span>
           <span className='str-chat__audio__content--subtitle'>{text}</span>
           <div className='str-chat__audio__content--progress'>
-            <div data-testid='audio-progress' style={{ width: `${progress}%` }} />
+            <div
+              data-progress={progress}
+              data-testid='audio-progress'
+              role='progressbar'
+              style={{ width: `${progress}%` }}
+            />
           </div>
         </div>
       </div>
@@ -96,14 +101,20 @@ type ProgressBarProps = {
 export const ProgressBar = ({ onClick, progress }: ProgressBarProps) => (
   <div
     className='str-chat__message-attachment-audio-widget--progress-track'
+    data-progress={progress}
+    data-testid='audio-progress'
     onClick={onClick}
     role='progressbar'
+    style={{
+      background: `linear-gradient(
+		 to right, 
+		 var(--str-chat__primary-color),
+		 var(--str-chat__primary-color) ${progress}%,
+		 var(--str-chat__disabled-color) ${progress}%,
+		 var(--str-chat__disabled-color)
+	  )`,
+    }}
   >
-    <div
-      className='str-chat__message-attachment-audio-widget--progress-indicator'
-      data-testid='audio-progress'
-      style={{ width: `${progress}%` }}
-    />
     <div
       className='str-chat__message-attachment-audio-widget--progress-slider'
       style={{ left: `${progress}px` }}