From ce8218dc47528009af64a1adc1ef8803c0efae47 Mon Sep 17 00:00:00 2001
From: Baghaztra <baghaztra21@gmail.com>
Date: Mon, 27 Oct 2025 22:00:16 +0700
Subject: [PATCH] Update PhotoUploader.vue

---
 resources/js/components/PhotoUploader.vue | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/resources/js/components/PhotoUploader.vue b/resources/js/components/PhotoUploader.vue
index 32509cf..ea783a3 100644
--- a/resources/js/components/PhotoUploader.vue
+++ b/resources/js/components/PhotoUploader.vue
@@ -135,12 +135,12 @@
     <!-- Camera Modal -->
     <div
       v-if="showCamera"
-      class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]"
+      class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999] p-4"
     >
-      <div class="bg-white rounded-lg shadow-lg p-4 relative">
+      <div class="bg-white rounded-lg shadow-lg p-4 relative w-full max-w-md">
         <h3 class="text-lg font-semibold mb-3 text-center">Ambil Foto</h3>
         
-        <div class="relative bg-black rounded overflow-hidden" style="width: 400px; height: 400px;">
+        <div class="relative bg-black rounded overflow-hidden w-full aspect-square">
           <video 
             ref="video" 
             autoplay 
@@ -156,17 +156,8 @@
             "
           ></video>
           
-          <!-- Square Crop Overlay with Darkened Outside Area -->
+          <!-- Square Crop Overlay -->
           <div class="absolute inset-0 pointer-events-none">
-            <!-- Top dark overlay -->
-            <div class="absolute top-0 left-0 right-0 bg-black/60" style="height: 0;"></div>
-            <!-- Bottom dark overlay -->
-            <div class="absolute bottom-0 left-0 right-0 bg-black/60" style="height: 0;"></div>
-            <!-- Left dark overlay -->
-            <div class="absolute top-0 bottom-0 left-0 bg-black/60" style="width: 0;"></div>
-            <!-- Right dark overlay -->
-            <div class="absolute top-0 bottom-0 right-0 bg-black/60" style="width: 0;"></div>
-            
             <!-- Crop area border -->
             <div class="absolute inset-0 border-2 border-blue-500"></div>
             
@@ -181,11 +172,11 @@
         </div>
         
         <canvas ref="canvas" class="hidden"></canvas>
-        <div class="mt-3 flex justify-between">
-          <button @click="closeCamera" class="px-4 py-2 bg-gray-400 text-white rounded">
+        <div class="mt-3 flex justify-between gap-2">
+          <button @click="closeCamera" class="flex-1 px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500 transition-colors">
             Batal
           </button>
-          <button @click="capturePhoto" class="px-4 py-2 bg-blue-500 text-white rounded">
+          <button @click="capturePhoto" class="flex-1 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
             Ambil Foto
           </button>
         </div>