From ba1453104ff5cdf25a075bd8796445e358496ca5 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 9 May 2025 19:53:06 +0800
Subject: [PATCH] UI tweaks to QR scanner

- Removed QR code border
- Changed QR code size to eliminate whitespace baked into image
- Removed scanning frame
- Removed camera selector button
- Restyled camera stop buttons in both web and Capacitor for consistency
- Added iOS safe area to Capacitor camera overlay
---
 src/views/ContactQRScanShowView.vue | 44 +++++++++--------------------
 src/views/ContactQRScanView.vue     |  8 +++---
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index cb5733e6..3ff8a68c 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -42,7 +42,7 @@
 
     <div
       v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
-      class="block w-[90vw] max-w-[40vh] mx-auto my-4 border border-slate-500"
+      class="block w-[90vw] max-w-[40vh] mx-auto my-4"
       @click="onCopyUrlToClipboard()"
     >
       <!--
@@ -51,8 +51,8 @@
       -->
       <QRCodeVue3
         :value="qrValue"
-        :width="640"
-        :height="640"
+        :width="606"
+        :height="606"
         :corners-square-options="{ type: 'square' }"
         :dots-options="{ type: 'square', color: '#000' }"
       />
@@ -141,34 +141,16 @@
           @camera-off="onCameraOff"
         />
 
-        <!-- Scanning Frame -->
-        <div
-          class="absolute inset-0 border-2"
-          :class="{
-            'border-blue-500': !error && !isScanning,
-            'border-green-500 animate-pulse': isScanning,
-            'border-red-500': error,
-          }"
-          style="opacity: 0.5; pointer-events: none"
-        ></div>
-
-        <!-- Camera Switch Button -->
-        <button
-          class="absolute bottom-4 left-4 bg-white rounded-full p-2 leading-none shadow-lg"
-          title="Switch camera"
-          @click="toggleCamera"
-        >
-          <font-awesome icon="camera-rotate" class="size-6 text-gray-600" />
-        </button>
-
-        <!-- Camera Stop Button -->
-        <button
-          class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg"
-          title="Stop camera"
-          @click="stopScanning"
-        >
-          <font-awesome icon="xmark" class="size-6 text-gray-600" />
-        </button>
+        <div class="absolute bottom-4 inset-x-0 flex justify-center items-center">
+          <!-- Camera Stop Button -->
+          <button
+            class="text-center text-slate-600 leading-none bg-white p-2 rounded-full drop-shadow-lg"
+            title="Stop camera"
+            @click="stopScanning"
+          >
+            <font-awesome icon="xmark" class="size-6" />
+          </button>
+        </div>
       </div>
       <div
         v-else
diff --git a/src/views/ContactQRScanView.vue b/src/views/ContactQRScanView.vue
index 3f37842d..8113f845 100644
--- a/src/views/ContactQRScanView.vue
+++ b/src/views/ContactQRScanView.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="relativew-[100vw] h-[100vh]">
-    <div class="absolute inset-x-0 bottom-0 bg-black/50 p-6">
+    <div class="absolute inset-x-0 bottom-0 bg-black/50 p-6 pb-[calc(env(safe-area-inset-bottom)+1.5rem)]">
       <p class="text-center text-white mb-3">
         Point your camera at a TimeSafari contact QR code to scan it
         automatically.
@@ -9,12 +9,12 @@
 
       <p v-if="error" class="text-center text-rose-300 mb-3">{{ error }}</p>
 
-      <div class="text-center">
+      <div class="flex justify-center items-center">
         <button
-          class="text-center text-white leading-none bg-slate-400 p-2 rounded-full"
+          class="text-center text-slate-600 leading-none bg-white p-2 rounded-full drop-shadow-lg"
           @click="handleBack"
         >
-          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
+          <font-awesome icon="xmark" class="size-6"></font-awesome>
         </button>
       </div>
     </div>