Complete: unified QR display + capture

src/lib/fontawesome.ts

@@ -17,6 +17,7 @@ import {
   faBurst,
   faCalendar,
   faCamera,
+  faCameraRotate,
   faCaretDown,
   faChair,
   faCheck,
@@ -97,6 +98,7 @@ library.add(
   faBurst,
   faCalendar,
   faCamera,
+  faCameraRotate,
   faCaretDown,
   faChair,
   faCheck,

src/main.ts

@@ -21,6 +21,7 @@ import {
   faBurst,
   faCalendar,
   faCamera,
+  faCameraRotate,
   faCaretDown,
   faChair,
   faCheck,
@@ -101,6 +102,7 @@ library.add(
   faBurst,
   faCalendar,
   faCamera,
+  faCameraRotate,
   faCaretDown,
   faChair,
   faCheck,

src/views/ContactQRScanShowView.vue

@@ -3,7 +3,7 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <div class="mb-2">
-      <h1 class="text-2xl text-center font-light relative px-7">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
         <!-- Back -->
         <a
           class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
@@ -18,7 +18,7 @@
 
     <p
       v-if="!givenName"
-      class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
+      class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 my-4"
     >
       <span class="text-red">Beware!</span>
       You aren't sharing your name, so quickly
@@ -35,7 +35,7 @@
 
     <div
       v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
-      class="text-center"
+      class="block w-[67vw] max-w-[33vh] mx-auto my-2"
       @click="onCopyUrlToClipboard()"
     >
       <!--
@@ -44,13 +44,14 @@
       -->
       <QRCodeVue3
         :value="qrValue"
-        :corners-square-options="{ type: 'extra-rounded' }"
+        :width="640"
-        :dots-options="{ type: 'square' }"
+        :height="640"
-        class="flex justify-center"
+        :corners-square-options="{ type: 'square' }"
+        :dots-options="{ type: 'square', color: '#000' }"
       />
-      <span>
+      <div class="text-center text-sm text-gray-500">
         Click the QR code to copy your contact info to your clipboard.
-      </span>
+      </div>
     </div>
     <div v-else-if="activeDid" class="text-center">
       <!-- Not an ETHR DID so force them to paste it. (Passkey Peer DIDs are too big.) -->
@@ -74,11 +75,11 @@
     </div>
 
     <div class="text-center">
-      <h1 class="text-2xl text-center font-light pt-6">Scan Contact Info</h1>
+      <h2 class="text-2xl text-center font-semibold mt-6 mb-2">Scan Contact Info</h2>
-      <div v-if="isScanning" class="relative aspect-square max-w-sm mx-auto">
+      <div v-if="isScanning" class="relative aspect-square rounded-xl overflow-hidden bg-slate-800 w-[67vw] max-w-[33vh] mx-auto">
         <!-- Status Message -->
         <div
-          class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-center py-2 z-10"
+          class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-sm text-center py-2 z-10"
         >
           <div
             v-if="isInitializing"
@@ -116,8 +117,8 @@
             ></span>
             <span>Position QR code in the frame</span>
           </p>
-          <p v-else-if="error" class="text-red-300">
+          <p v-else-if="error" class="text-red-400">
-            <span class="font-medium">Error:</span> {{ error }}
+            Error: {{ error }}
           </p>
           <p v-else class="flex items-center justify-center space-x-2">
             <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
@@ -147,64 +148,31 @@
           style="opacity: 0.5; pointer-events: none"
         ></div>
 
-        <!-- Debug Info -->
-        <div
-          class="absolute bottom-16 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center py-1"
-        >
-          Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} | Status:
-          {{ cameraStatus }}
-        </div>
-
         <!-- Camera Switch Button -->
         <button
-          class="absolute bottom-4 right-4 bg-white rounded-full p-2 shadow-lg"
+          class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg"
           title="Switch camera"
           @click="toggleCamera"
         >
-          <svg
+          <font-awesome icon="camera-rotate" class="size-6 text-gray-600" />
-            class="h-6 w-6 text-gray-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 
-              011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 
-              01-2-2V9z"
-            />
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
-            />
-          </svg>
         </button>
       </div>
-      <div v-else>
+      <div class="mt-4" v-else>
         <button
           v-if="isNativePlatform"
-          class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
+          class="bg-blue-500 text-white px-4 py-2 rounded-md"
           @click="$router.push({ name: 'contact-qr-scan' })"
         >
           Start Scanning
         </button>
         <button
           v-else
-          class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
+          class="bg-blue-500 text-white px-4 py-2 rounded-md"
           @click="startScanning"
         >
           Start Scanning
         </button>
       </div>
-      <span v-if="error" class="text-red-500 block mt-2">{{ error }}</span>
-      <span v-else class="block mt-2">
-        If you do not see a scanning camera window here, check your camera
-        permissions.
-      </span>
     </div>
   </section>
 </template>