Improvements to contact QR scanner UI

Plus some narrow-screen fixes to NotificationGroup

src/App.vue

@@ -4,7 +4,7 @@
   <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
-      class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end"
+      class="fixed top-4 right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
     >
       <Notification
         v-slot="{ notifications, close }"

src/views/ContactQRScanShowView.vue

@@ -1,18 +1,25 @@
 <template>
-  <QuickNav selected="Profile" />
   <!-- 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-semibold relative px-7">
         <!-- Back -->
         <a
-          class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
+          @click="handleBack"
         >
           <font-awesome icon="chevron-left" class="fa-fw" />
         </a>
 
-        Your Contact Info
+        <!-- Quick Help -->
+        <a
+          class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
+          @click="toastQRCodeHelp()"
+        >
+          <font-awesome icon="circle-question" class="fa-fw" />
+        </a>
+
+        Share Contact Info
       </h1>
     </div>
 
@@ -35,7 +42,7 @@
 
     <div
       v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
-      class="block w-[67vw] max-w-[33vh] mx-auto my-2"
+      class="block w-[90vw] max-w-[40vh] mx-auto my-4 border border-slate-500"
       @click="onCopyUrlToClipboard()"
     >
       <!--
@@ -49,11 +56,8 @@
         :corners-square-options="{ type: 'square' }"
         :dots-options="{ type: 'square', color: '#000' }"
       />
-      <div class="text-center text-sm text-gray-500">
-        Click the QR code to copy your contact info to your clipboard.
     </div>
-    </div>
+    <div v-else-if="activeDid" class="text-center my-4">
-    <div v-else-if="activeDid" class="text-center">
       <!-- Not an ETHR DID so force them to paste it. (Passkey Peer DIDs are too big.) -->
       <span class="text-blue-500" @click="onCopyDidToClipboard()">
         Click here to copy your DID to your clipboard.
@@ -62,7 +66,7 @@
         Then give it to them so they can paste it in their list of People.
       </span>
     </div>
-    <div v-else class="text-center">
+    <div v-else class="text-center my-4">
       You have no identitifiers yet, so
       <router-link
         :to="{ name: 'start' }"
@@ -74,13 +78,10 @@
       If you don't that first, these contacts won't see your activity.
     </div>
 
-    <div class="text-center">
+    <div class="text-center my-6">
-      <h2 class="text-2xl text-center font-semibold mt-6 mb-2">
-        Scan Contact Info
-      </h2>
       <div
         v-if="isScanning"
-        class="relative aspect-square rounded-xl overflow-hidden bg-slate-800 w-[67vw] max-w-[33vh] mx-auto"
+        class="relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto"
       >
         <!-- Status Message -->
         <div
@@ -153,27 +154,38 @@
 
         <!-- Camera Switch Button -->
         <button
-          class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg"
+          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>
-      <div v-else class="mt-4">
+      <div
+        v-else
+        class="flex items-center justify-center aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto">
         <button
           v-if="isNativePlatform"
-          class="bg-blue-500 text-white px-4 py-2 rounded-md"
+          class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white text-lg px-3 py-2 rounded-lg"
           @click="$router.push({ name: 'contact-qr-scan' })"
         >
-          Start Scanning
+          Scan QR Code
         </button>
         <button
           v-else
-          class="bg-blue-500 text-white px-4 py-2 rounded-md"
+          class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white text-lg px-3 py-2 rounded-lg"
           @click="startScanning"
         >
-          Start Scanning
+          Scan QR Code
         </button>
       </div>
     </div>
@@ -187,6 +199,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 import { Capacitor } from "@capacitor/core";
 import { QrcodeStream } from "vue-qrcode-reader";
+import type { RouteLocationNormalized, NavigationGuardNext } from "vue-router";
 
 import QuickNav from "../components/QuickNav.vue";
 import UserNameDialog from "../components/UserNameDialog.vue";
@@ -292,6 +305,11 @@ export default class ContactQRScanShow extends Vue {
     }
   }
 
+  async handleBack(): Promise<void> {
+    await this.cleanupScanner();
+    this.$router.back();
+  }
+
   async startScanning() {
     if (this.isCleaningUp) {
       logger.debug("Cannot start scanning during cleanup");
@@ -649,6 +667,17 @@ export default class ContactQRScanShow extends Vue {
       });
   }
 
+  toastQRCodeHelp() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        text: "Click the QR code to copy your contact info to your clipboard.",
+      },
+      5000,
+    );
+  }
+
   onCopyDidToClipboard() {
     //this.onScanDetect([{ rawValue: this.qrValue }]); // good for testing
     useClipboard()