From cf3a556cd07346ef8aaa8cd35ab2a9a23804f765 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 May 2024 14:48:27 +0530
Subject: [PATCH] style: audio tag styling

---
 frontend/src/components/Modals/CallLogModal.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index 3aa7c4a8..006941fe 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -42,8 +42,8 @@
           <Tooltip v-else-if="field.tooltip" :text="field.tooltip">
             {{ field.value }}
           </Tooltip>
-          <div v-else-if="field.name == 'recording_url'">
-            <audio class="audio-control" controls :src="field.value"></audio>
+          <div class="w-full" v-else-if="field.name == 'recording_url'">
+            <audio class="audio-control w-full" controls :src="field.value"></audio>
           </div>
           <div v-else :class="field.color ? `text-${field.color}-600` : ''">
             {{ field.value }}
@@ -140,8 +140,8 @@ const detailFields = computed(() => {
     },
     {
       icon: h(FeatherIcon, {
-        name: 'play',
-        class: 'h-3.5 w-3.5',
+        name: 'play-circle',
+        class: 'h-4 w-4',
       }),
       name: 'recording_url',
       value: props.callLog.recording_url,
@@ -175,8 +175,12 @@ async function updateNote(_note) {
   height: 40px;
   outline: none;
   border-radius: 10px;
-  border: 1px solid gray;
   cursor: pointer;
+  background-color: rgb(237, 237, 237);
+}
+
+audio::-webkit-media-controls-panel {
+  background-color: rgb(237, 237, 237) !important;
 }
 
 .audio-control::-webkit-media-controls-panel {