refactor: update AudioPlayer styles with CSS variables and improve VideoGallery rendering

web/app/components/base/audio-gallery/AudioPlayer.module.css

@@ -2,15 +2,15 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: #ffffff;
+  background-color: var(--color-components-chat-input-audio-bg-alt);
   border-radius: 10px;
   padding: 8px;
   min-width: 240px;
   max-width: 420px;
   max-height: 40px;
   backdrop-filter: blur(5px);
-  border: 1px solid rgba(16, 24, 40, 0.08);
+  border: 1px solid var(--color-components-panel-border-subtle);
-  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
+  box-shadow: 0 1px 2px var(--color-shadow-shadow-3);
   gap: 8px;
 }
 
@@ -19,8 +19,8 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: #296DFF;
+  background-color: var(--color-components-button-primary-bg);
-  color: white;
+  color: var(--color-components-chat-input-audio-bg-alt);
   border: none;
   cursor: pointer;
   align-items: center;
@@ -30,16 +30,15 @@
 }
 
 .playButton:hover {
-  background-color: #3367d6;
+  background-color: var(--color-components-button-primary-bg-hover);
 }
 
 .playButton:disabled {
-  background-color: #bdbdbf;
+  background-color: var(--color-components-button-primary-bg-disabled);
 }
 
 .audioControls {
   flex-grow: 1;
-  
 }
 
 .progressBarContainer {
@@ -76,8 +75,8 @@
 
 .timeDisplay {
   /* position: absolute; */
-  color: #296DFF;
+  color: var(--color-text-accent-secondary);
-  border-radius: 2px;
+  font-size: 12px;
   order: 0;
   height: 100%;
   width: 50px;
@@ -97,7 +96,6 @@
 } */
 
 .duration {
-  background-color: rgba(255, 255, 255, 0.8);
   padding: 2px 4px;
   border-radius: 10px;
 }
@@ -114,6 +112,6 @@
 }
 
 .playButton svg path,
-.playButton svg rect{
+.playButton svg rect {
-   fill:currentColor;
+  fill: currentColor;
-}
+}

web/app/components/base/video-gallery/index.tsx

@@ -6,7 +6,7 @@ type Props = {
 }
 
 const VideoGallery: React.FC<Props> = ({ srcs }) => {
-  return (<><br/>{srcs.map((src, index) => (<><br/><VideoPlayer key={`video_${index}`} src={src}/></>))}</>)
+  return (<><br/>{srcs.map((src, index) => (<React.Fragment key={`video_${index}`}><br/><VideoPlayer src={src}/></React.Fragment>))}</>)
 }
 
 export default React.memo(VideoGallery)