From 844128b1e81f58be9245bdf8a35fe0c5362f6f51 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 18 Jul 2024 12:24:55 +0530
Subject: [PATCH] fix: added play & pause icon

---
 .../src/components/Activities/AudioPlayer.vue    | 13 +++++++------
 frontend/src/components/Icons/PauseIcon.vue      | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/Icons/PauseIcon.vue

diff --git a/frontend/src/components/Activities/AudioPlayer.vue b/frontend/src/components/Activities/AudioPlayer.vue
index 1bad8977..8ede3c02 100644
--- a/frontend/src/components/Activities/AudioPlayer.vue
+++ b/frontend/src/components/Activities/AudioPlayer.vue
@@ -1,14 +1,13 @@
 <template>
-  <div class="player w-full text-sm text-gray-600">
-    <div class="player-controls flex items-center gap-2">
+  <div class="w-full text-sm text-gray-600">
+    <div class="flex items-center gap-2">
       <Button variant="ghost" @click="playPause">
         <template #icon>
-          <FeatherIcon class="size-4" :name="isPaused ? 'play' : 'pause'" />
+          <PlayIcon v-if="isPaused" class="size-4 text-gray-600" />
+          <PauseIcon v-else class="size-4 text-gray-600" />
         </template>
       </Button>
-      <div
-        class="player-timeline flex gap-2 items-center justify-between flex-1"
-      >
+      <div class="flex gap-2 items-center justify-between flex-1">
         <input
           class="w-full slider !h-[0.5] bg-gray-200 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
           :style="{
@@ -83,6 +82,8 @@
 </template>
 
 <script setup>
+import PlayIcon from '@/components/Icons/PlayIcon.vue'
+import PauseIcon from '@/components/Icons/PauseIcon.vue'
 import VolumnLowIcon from '@/components/Icons/VolumnLowIcon.vue'
 import VolumnHighIcon from '@/components/Icons/VolumnHighIcon.vue'
 import MuteIcon from '@/components/Icons/MuteIcon.vue'
diff --git a/frontend/src/components/Icons/PauseIcon.vue b/frontend/src/components/Icons/PauseIcon.vue
new file mode 100644
index 00000000..84166010
--- /dev/null
+++ b/frontend/src/components/Icons/PauseIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 4.5V11.5C6 12.3284 5.32843 13 4.5 13C3.67157 13 3 12.3284 3 11.5V4.5C3 3.67157 3.67157 3 4.5 3C5.32843 3 6 3.67157 6 4.5ZM2 4.5C2 3.11929 3.11929 2 4.5 2C5.88071 2 7 3.11929 7 4.5V11.5C7 12.8807 5.88071 14 4.5 14C3.11929 14 2 12.8807 2 11.5V4.5ZM13 4.5V11.5C13 12.3284 12.3284 13 11.5 13C10.6716 13 10 12.3284 10 11.5V4.5C10 3.67157 10.6716 3 11.5 3C12.3284 3 13 3.67157 13 4.5ZM9 4.5C9 3.11929 10.1193 2 11.5 2C12.8807 2 14 3.11929 14 4.5V11.5C14 12.8807 12.8807 14 11.5 14C10.1193 14 9 12.8807 9 11.5V4.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>