fully match design

reAudioPlayer · Jan 8, 2024 · ee9028f · ee9028f
1 parent 18fd0d5
commit ee9028f
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 8 deletions.
diff --git a/dist/assets/index-_hjdk0vx.css b/dist/assets/index-_hjdk0vx.css
diff --git a/dist/assets/index-OL0q35Pf.js → dist/assets/index-dSC3sH6u.js b/dist/assets/index-OL0q35Pf.js → dist/assets/index-dSC3sH6u.js
diff --git a/dist/assets/index-ssf_1ATp.css b/dist/assets/index-ssf_1ATp.css
diff --git a/dist/index.html b/dist/index.html
@@ -26,8 +26,8 @@
     />
 
     <title>reAudioPlayer Insights</title>
-    <script type="module" crossorigin src="/insights/assets/index-OL0q35Pf.js"></script>
-    <link rel="stylesheet" crossorigin href="/insights/assets/index-_hjdk0vx.css">
+    <script type="module" crossorigin src="/insights/assets/index-dSC3sH6u.js"></script>
+    <link rel="stylesheet" crossorigin href="/insights/assets/index-ssf_1ATp.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/player/WaveAudio.vue b/src/components/player/WaveAudio.vue
@@ -15,8 +15,14 @@ const audio = ref<any>(null);
 const audioElement = ref<any>();
 
 onMounted(() => {
-  const waveColor = "white";
-  const progressColor = "green";
+  const fgBase = getComputedStyle(document.documentElement).getPropertyValue(
+    "--fg-base"
+  );
+  const waveColor = fgBase;
+  const fgSecondary = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--fg-secondary");
+  const progressColor = fgSecondary;
 
   // @ts-ignore
   audio.value = WaveSurfer.create({

diff --git a/src/views/Insights.vue b/src/views/Insights.vue
@@ -472,11 +472,11 @@ const formatLoudness = (loudness: number) => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 100%;
 
     .label {
       font-size: 0.8em;
       color: var(--fg-base-dk);
+      text-transform: uppercase;
     }
   }
 }