From 3a658ab7e255dcb9aac974d90b592579d78f529e Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Wed, 17 Jul 2024 16:44:30 +0530
Subject: [PATCH] Camera Upload UI fixes (#487)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 .../forms/components/CameraUpload.vue         | 68 ++++---------------
 1 file changed, 15 insertions(+), 53 deletions(-)

diff --git a/client/components/forms/components/CameraUpload.vue b/client/components/forms/components/CameraUpload.vue
index a5876b5c..1876b369 100644
--- a/client/components/forms/components/CameraUpload.vue
+++ b/client/components/forms/components/CameraUpload.vue
@@ -32,20 +32,10 @@
           class="text-white cursor-pointer"
           @click="cancelCamera"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
+          <Icon
+            name="heroicons:x-mark"
             class="w-8 h-8"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M6 18 18 6M6 6l12 12"
-            />
-          </svg>
+          />
         </span>
       </div>
     </div>
@@ -54,25 +44,10 @@
       class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
       @click="openCameraUpload"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
+      <Icon
+        name="heroicons:camera"
         class="w-6 h-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
-        />
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
-        />
-      </svg>
+      />
       <p class="text-center font-bold">
         Allow Camera Permission
       </p>
@@ -80,13 +55,12 @@
         You need to allow camera permission before you can take pictures. Go to
         browser settings to enable camera permission on this page.
       </p>
-      <button
-        class="text-xs p-1 px-2 bg-blue-600 rounded"
-        type="button"
+      <UButton
+        color="white"
         @click.stop="cancelCamera"
       >
         Got it!
-      </button>
+      </UButton>
     </div>
 
     <div
@@ -102,34 +76,22 @@
       class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
       @click="openCameraUpload"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
+      <Icon
+        name="heroicons:video-camera-slash"
         class="w-6 h-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M12 18.75H4.5a2.25 2.25 0 0 1-2.25-2.25V9m12.841 9.091L16.5 19.5m-1.409-1.409c.407-.407.659-.97.659-1.591v-9a2.25 2.25 0 0 0-2.25-2.25h-9c-.621 0-1.184.252-1.591.659m12.182 12.182L2.909 5.909M1.5 4.5l1.409 1.409"
-        />
-      </svg>
-
+      />
       <p class="text-center font-bold">
         Camera Device Error
       </p>
       <p class="text-xs">
         An unknown error occurred when trying to start Webcam device.
       </p>
-      <button
-        class="text-xs p-1 px-2 bg-blue-600 rounded"
-        type="button"
+      <UButton
+        color="white"
         @click.stop="cancelCamera"
       >
         Go back
-      </button>
+      </UButton>
     </div>
   </div>
 </template>