From 31fa67369f0001ae72e3a036a8ef4a4275cba956 Mon Sep 17 00:00:00 2001
From: Michael Bumann <hello@michaelbumann.com>
Date: Mon, 10 Jul 2023 09:05:24 +0200
Subject: [PATCH 1/9] No more default protocol-redirect

as more apps are implementing NWC now it does not properly work anymore to open the correct app there.
the default app is no longer the used app
---
 views/apps/create.html | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/views/apps/create.html b/views/apps/create.html
index e6b98442..c57963f7 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -92,23 +92,16 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
 <script type="text/javascript">
   // notify the opener if present of the success full connect
   window.addEventListener("load", (event) => {
-    
-    // if there is no opener we redirect to the protocol link
-    // this fails if the user does not support it and the user sees the normal
-    if (!window.opener) {
-      // delay execution a bit to make sure the page can finish loading
-      setTimeout(function () {
-        document.location = "{{.PairingUri}}";
-      }, 250);
-      return;
+
+    if (window.opener) {
+      window.opener.postMessage(
+        {
+          type: "nwc:success",
+          payload: {success: true},
+        },
+        "*"
+      );
     }
-    window.opener.postMessage(
-      {
-        type: "nwc:success",
-        payload: { success: true },
-      },
-      "*"
-    );
   });
 
   window.addEventListener("DOMContentLoaded", (event) => {

From f5652fa3d079e5f29b1c774dac39c3fa3b737a9d Mon Sep 17 00:00:00 2001
From: Michael Bumann <hello@michaelbumann.com>
Date: Tue, 19 Sep 2023 21:58:21 +0400
Subject: [PATCH 2/9] Publish nwc:success event

This allows apps that embed a webview for example to enable the connection
to listen to this event an know when the connection was successfuly enabled.
---
 views/apps/create.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/views/apps/create.html b/views/apps/create.html
index c57963f7..ccf49095 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -93,6 +93,12 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
   // notify the opener if present of the success full connect
   window.addEventListener("load", (event) => {
 
+    // dispatch a success event which can be listened to by the opener or by the app that embeddes the webview
+    // this gives thoes apps the chance to know the user has enabled the connection
+    const event = new CustomEvent("nwc:success", { detail: {} });
+    window.dispatchEvent(event);
+
+    // notify the opener of the successful connection
     if (window.opener) {
       window.opener.postMessage(
         {

From 243b7c2716b6e3d8918ee806b173b9905d4a7e0c Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 4 Oct 2023 13:05:05 +0530
Subject: [PATCH 3/9] feat: ui for copying and redirecting

---
 public/css/application.css | 188 +++++++++++++++++--------------------
 public/images/copy.svg     |   4 -
 public/images/visible.svg  |   4 -
 views/apps/create.html     | 146 ++++++++++++----------------
 views/layout.html          |   2 +-
 5 files changed, 145 insertions(+), 199 deletions(-)
 delete mode 100644 public/images/copy.svg
 delete mode 100644 public/images/visible.svg

diff --git a/public/css/application.css b/public/css/application.css
index 741712d7..63712e4d 100644
--- a/public/css/application.css
+++ b/public/css/application.css
@@ -726,6 +726,10 @@ select {
   pointer-events: none;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -734,6 +738,10 @@ select {
   position: relative;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -757,11 +765,6 @@ select {
   margin-bottom: 1rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -802,18 +805,14 @@ select {
   margin-right: 0.5rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .mt-10 {
   margin-top: 2.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -826,10 +825,6 @@ select {
   margin-top: 2rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -858,10 +853,6 @@ select {
   height: 1rem;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
 .w-1\/5 {
   width: 20%;
 }
@@ -874,10 +865,6 @@ select {
   width: 1rem;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -894,10 +881,19 @@ select {
   width: 65px;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full {
   width: 100%;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .table-fixed {
   table-layout: fixed;
 }
@@ -978,6 +974,10 @@ select {
   border-width: 1px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -986,10 +986,6 @@ select {
   border-top-width: 1px;
 }
 
-.border-t-4 {
-  border-top-width: 4px;
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1000,9 +996,14 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-green-500 {
+.border-orange-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+  border-color: rgb(254 215 170 / var(--tw-border-opacity));
+}
+
+.border-purple-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 51 234 / var(--tw-border-opacity));
 }
 
 .border-red-400 {
@@ -1025,9 +1026,14 @@ select {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-green-100 {
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
 .bg-orange-50 {
@@ -1045,8 +1051,8 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.fill-current {
-  fill: currentColor;
+.bg-origin-border {
+  background-origin: border-box;
 }
 
 .p-2 {
@@ -1061,8 +1067,8 @@ select {
   padding: 0.75rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
+.p-4 {
+  padding: 1rem;
 }
 
 .px-1 {
@@ -1075,6 +1081,11 @@ select {
   padding-right: 2.5rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1090,11 +1101,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -1205,6 +1211,10 @@ select {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1248,11 +1258,6 @@ select {
   color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.text-green-700 {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
-
 .text-orange-700 {
   --tw-text-opacity: 1;
   color: rgb(194 65 12 / var(--tw-text-opacity));
@@ -1291,12 +1296,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1315,11 +1314,6 @@ select {
   transition-duration: 150ms;
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1340,11 +1334,6 @@ select {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.focus\:border-purple-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1372,6 +1361,11 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-primary:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(248 196 85 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -1386,11 +1380,6 @@ select {
     border-color: rgb(107 114 128 / var(--tw-border-opacity));
   }
 
-  .dark\:border-gray-600 {
-    --tw-border-opacity: 1;
-    border-color: rgb(75 85 99 / var(--tw-border-opacity));
-  }
-
   .dark\:border-gray-700 {
     --tw-border-opacity: 1;
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1405,26 +1394,11 @@ select {
     border-color: rgb(255 255 255 / 0.1);
   }
 
-  .dark\:border-gray-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(31 41 55 / var(--tw-border-opacity));
-  }
-
   .dark\:bg-gray-600 {
     --tw-bg-opacity: 1;
     background-color: rgb(75 85 99 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-gray-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(20 83 45 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-orange-900 {
     --tw-bg-opacity: 1;
     background-color: rgb(124 45 18 / var(--tw-bg-opacity));
@@ -1465,11 +1439,6 @@ select {
     color: rgb(156 163 175 / var(--tw-text-opacity));
   }
 
-  .dark\:text-green-400 {
-    --tw-text-opacity: 1;
-    color: rgb(74 222 128 / var(--tw-text-opacity));
-  }
-
   .dark\:text-neutral-200 {
     --tw-text-opacity: 1;
     color: rgb(229 229 229 / var(--tw-text-opacity));
@@ -1500,11 +1469,6 @@ select {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
-  .dark\:text-gray-200 {
-    --tw-text-opacity: 1;
-    color: rgb(229 231 235 / var(--tw-text-opacity));
-  }
-
   .dark\:placeholder-gray-400::-moz-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175 / var(--tw-placeholder-opacity));
@@ -1537,16 +1501,6 @@ select {
     color: rgb(209 213 219 / var(--tw-text-opacity));
   }
 
-  .dark\:focus\:border-purple-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(168 85 247 / var(--tw-border-opacity));
-  }
-
-  .dark\:focus\:ring-purple-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
-  }
-
   .dark\:focus\:ring-purple-600:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
@@ -1621,17 +1575,45 @@ select {
 }
 
 @media (min-width: 1024px) {
+  .lg\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
   .lg\:w-8\/12 {
     width: 66.666667%;
   }
 
+  .lg\:p-6 {
+    padding: 1.5rem;
+  }
+
   .lg\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
   }
 
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .lg\:py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
+
+  .lg\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
\ No newline at end of file
diff --git a/public/images/copy.svg b/public/images/copy.svg
deleted file mode 100644
index 473a627e..00000000
--- a/public/images/copy.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="6" y="6" width="10" height="14" rx="1.5" fill="currentColor"/>
-<path d="M8.06427 5.06427C8.20216 5.02247 8.34846 5 8.5 5H15.5C16.3284 5 17 5.67157 17 6.5V17.5C17 17.6515 16.9775 17.7978 16.9357 17.9357C17.5517 17.7491 18 17.1769 18 16.5V5.5C18 4.67157 17.3284 4 16.5 4H9.5C8.82312 4 8.25095 4.44835 8.06427 5.06427Z" fill="currentColor"/>
-</svg>
diff --git a/public/images/visible.svg b/public/images/visible.svg
deleted file mode 100644
index 3d9ca936..00000000
--- a/public/images/visible.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 14.7614 16.9706 17 12 17C7.02944 17 3 14.7614 3 12C3 9.23858 7.02944 7 12 7C16.9706 7 21 9.23858 21 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="white"/>
-</svg>
diff --git a/views/apps/create.html b/views/apps/create.html
index 6dc86ffe..9c40d7ca 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -1,90 +1,61 @@
 {{define "body"}}
 
 <div
-  class="w-full lg:w-8/12 mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
+  class="w-full max-w-sm mx-auto bg-white rounded-md shadow p-4 lg:px-8 lg:py-6 mb-10 dark:bg-surface-02dp"
 >
-  <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
+  <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white">Pair with app to finalize</h2>
 
-  <div
-    class="bg-green-100 border-t-4 border-green-500 rounded-md px-4 py-3 shadow-md mb-8 dark:bg-green-900"
-    role="alert"
-  >
-    <div class="flex items-center text-green-700 dark:text-green-400">
-      <div class="py-1">
-        <svg
-          class="fill-current h-6 w-6 mr-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-        >
-          <path
-            d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
-          ></path>
-        </svg>
-      </div>
-      <div>
-        <p class="font-bold">App connection created</p>
-      </div>
-    </div>
-  </div>
+  <div class="font-medium text-xs text-center mb-6 dark:text-white">Open, paste or scan your connection’s pairing secret in the desired app to finalise the connection.</div>
 
-  {{if not (eq .PairingSecret "")}}
-  <p class="mb-4 dark:text-white">Use the pairing secret to connect to your app.</p>
+  <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false"
+  class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-3 py-2 rounded-md shadow text-white transition mb-4">
+    <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M13.6281 5.03035L20.9945 12.43L20.9956 12.431C21.4028 12.84 21.8601 13.0639 22.279 13.1062C22.6711 13.1459 23.0667 13.0322 23.4219 12.6949L19.4029 2.22631C18.9491 1.2345 17.6421 0.998839 16.8705 1.7739L13.6281 5.03035ZM20.5966 12.8277L20.5967 12.8278L20.5965 12.828C21.5558 13.7914 22.8871 14.0212 23.8507 13.0622L20.5884 16.3091L19.0591 17.8312L17.9915 18.8938L16.1182 17.0137C17.026 15.6333 16.8781 13.76 15.6662 12.5406L14.3908 11.2573C14.2095 11.0748 13.9176 11.074 13.7351 11.2553L13.1055 11.8809L11.5093 10.2748C11.2323 9.99609 10.7744 10.0126 10.5176 10.3196C10.2928 10.5907 10.3315 10.9906 10.5786 11.2392L12.1549 12.8252L10.9035 14.0685L9.3073 12.4624C9.03028 12.1837 8.5705 12.1981 8.31561 12.5072C8.0928 12.7764 8.13155 13.1762 8.37864 13.4249L9.95488 15.0109L9.32725 15.6346C9.14479 15.8159 9.14392 16.1077 9.32522 16.2902L10.6006 17.5735C11.8123 18.7927 13.6847 18.9526 15.0709 18.054L16.9452 19.9351L16.3577 20.5197L14.3527 22.5153C13.3889 23.4743 11.8301 23.4707 10.8708 22.5072L0.717064 12.3077C-0.242097 11.344 -0.238627 9.78546 0.725161 8.82627L6.96087 2.61994C7.92465 1.66089 9.4834 1.66451 10.4427 2.62803L20.5966 12.8277Z"
+        fill="currentColor" />
+    </svg>
+    Open in supported app
+  </button>
 
-  <p class=" text-orange-700 bg-orange-50 dark:text-orange-400 dark:bg-orange-900 py-3 px-4 mb-6 rounded-md">
-    ⚠️ This pairing secret is only shown once. Don’t show it to anyone. Use it
-    only with apps you trust.
-  </p>
+  {{if not (eq .PairingSecret "")}}
+    <button id="copy-button" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4">
+      <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+        fill="currentColor">
+        <rect width="10" height="14" x="6" y="6" rx="1.5"></rect>
+        <path
+          d="M8.064 5.064A1.5 1.5 0 018.5 5h7A1.5 1.5 0 0117 6.5v11a1.5 1.5 0 01-.064.436A1.5 1.5 0 0018 16.5v-11A1.5 1.5 0 0016.5 4h-7a1.5 1.5 0 00-1.436 1.064z"></path>
+      </svg>
+      <span id="copy-text">Copy pairing secret</span>
+    </button>
 
-  <p class="text-l font-bold">
-    <a
-      onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false"
-      class="inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-3 rounded-md shadow text-white transition"
-      href="#"
-    >
-      <img
-        src="public/images/visible.svg"
-        width="24"
-        height="24"
-        class="mr-2"
-      />
+    <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
+      <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+        fill="currentColor">
+        <path d="M12 14a2 2 0 100-4 2 2 0 000 4z"></path>
+        <path fill-rule="evenodd"
+          d="M21 12c0 2.761-4.03 5-9 5s-9-2.239-9-5 4.03-5 9-5 9 2.239 9 5zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
+          clip-rule="evenodd"></path>
+      </svg>
       Reveal pairing secret
-    </a>
-  </p>
+    </button>
   {{end}}
 
-  <div
-    class="hidden my-6 mx-auto rounded-lg border border-gray-300 dark:border-white/10 p-6"
-    style="width: 432px"
-    id="pairing-details"
-  >
-    <p class="my-4 w-full">
-      <input
-        type="text"
-        id="pairing-input"
-        value="{{.PairingUri}}"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-surface-00dp dark:border-neutral-800 dark:placeholder-gray-400 dark:text-white"
-      />
-    </p>
-
-    <a
-      href="#"
-      id="copy-link"
-      class="w-full text-center bg-white border cursor-pointer dark:bg-surface-02dp dark:border-white/10 dark:hover:bg-surface-16dp duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-gray-100 flex items-center justify-center px-5 py-3 rounded-md shadow text-gray-700 dark:text-neutral-300 transition mb-6"
-    >
-      <svg 
-        class="fill-current h-6 w-6 mr-4"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-      >
-        <rect id="copy-icon-rect" x="6" y="6" width="10" height="14" rx="1.5" stroke="currentColor" fill="transparent"/>
-        <path d="M8.06427 5.06427C8.20216 5.02247 8.34846 5 8.5 5H15.5C16.3284 5 17 5.67157 17 6.5V17.5C17 17.6515 16.9775 17.7978 16.9357 17.9357C17.5517 17.7491 18 17.1769 18 16.5V5.5C18 4.67157 17.3284 4 16.5 4H9.5C8.82312 4 8.25095 4.44835 8.06427 5.06427Z" fill="currentColor"/>
-      </svg>
-      <span id="copy-text">Copy Secret</span>
-    </a>
+  <p class="w-fit text-xs border border-orange-200 text-orange-700 bg-orange-50 dark:text-orange-400 dark:bg-orange-900 px-3 py-2 mx-auto rounded-md">
+    ⚠️ Connect only with apps you trust!
+  </p>
 
-    <a href="{{.PairingUri}}" target="_blank" id="pairing-link">
-      <div id="connect-qrcode"></div>
-    </a>
+  <div class="flex fixed inset-0 items-center justify-center hidden" id="pairing-details">
+    <div onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="fixed inset-0 bg-gray-900 opacity-50"></div>
+    <div class="bg-white p-4 lg:px-6 rounded shadow relative">
+      <h2 class="mb-4 font-semibold text-lg lg:text-xl font-headline dark:text-white">Scan QR Code in the app to pair</h2>
+      <a href="{{.PairingUri}}" target="_blank" id="pairing-link" class="block border-4 border-purple-600 rounded-lg p-4 lg:p-6">
+        <div id="connect-qrcode"></div>
+      </a>
+      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false"
+      class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-gray-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mt-4">
+        Close
+      </button>
+    </div>
   </div>
 </div>
 
@@ -95,8 +66,8 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
 
     // dispatch a success event which can be listened to by the opener or by the app that embeddes the webview
     // this gives thoes apps the chance to know the user has enabled the connection
-    const event = new CustomEvent("nwc:success", { detail: {} });
-    window.dispatchEvent(event);
+    const nwcEvent = new CustomEvent("nwc:success", { detail: {} });
+    window.dispatchEvent(nwcEvent);
 
     // notify the opener of the successful connection
     if (window.opener) {
@@ -115,24 +86,23 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
       {
         fill: window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFF" : "#000",
         text: "{{.PairingUri}}",
-        size: 384, // in pixels
+        size: 250, // in pixels
       }, //window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFF" : 
       document.getElementById("connect-qrcode")
     );
 
     document
-      .getElementById("copy-link")
+      .getElementById("copy-button")
       .addEventListener("click", async (event) => {
         event.preventDefault();
+        const copyButton = document.getElementById("copy-button")
         const copyText = document.getElementById("copy-text");
-        const copyIcon = document.getElementById("copy-icon-rect");
-        const value = document.getElementById("pairing-input").value;
 
         if (navigator.clipboard && window.isSecureContext) {
-          navigator.clipboard.writeText(value);
+          navigator.clipboard.writeText("{{.PairingUri}}");
         } else {
           const textArea = document.createElement("textarea");
-          textArea.value = value;
+          textArea.value = "{{.PairingUri}}";
           textArea.style.position = "absolute";
           textArea.style.opacity = 0;
           document.body.appendChild(textArea);
@@ -140,11 +110,13 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
           await document.execCommand("copy");
           textArea.remove();
         }
-        copyIcon.style.fill = "currentColor";
-        copyText.textContent = "Copied"
+
+        const classesToToggle = ["hover:bg-gray-50", "bg-green-600", "bg-white", "text-white", "text-purple-700"];
+        classesToToggle.forEach(className => copyButton.classList.toggle(className));
+        copyText.textContent = "Copied to clipboard!"
         setTimeout(() => {
-          copyIcon.style.fill = "transparent"
-          copyText.textContent = "Copy Secret"
+        classesToToggle.forEach(className => copyButton.classList.toggle(className));
+          copyText.textContent = "Copy pairing secret"
         }, 2000);
       });
   });
diff --git a/views/layout.html b/views/layout.html
index ecbd8fde..b6e60545 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -12,7 +12,7 @@
 
   <body class="bg-gray-50 dark:bg-surface-00dp">
     <nav
-      class="bg-white border-b border-gray-200 mb-4 dark:bg-surface-01dp dark:border-white/10"
+      class="bg-white border-b border-gray-200 mb-4 lg:mb-6 dark:bg-surface-01dp dark:border-white/10"
       data-controller="navbar"
     >
       <div class="container mx-auto">

From e9bc0a28255195b11728e1bf2e959cbea5da93d2 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 4 Oct 2023 13:45:32 +0530
Subject: [PATCH 4/9] feat: add redirect uri

---
 views/apps/create.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/views/apps/create.html b/views/apps/create.html
index 9c40d7ca..9eb57fcf 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -7,15 +7,14 @@ <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white"
 
   <div class="font-medium text-xs text-center mb-6 dark:text-white">Open, paste or scan your connection’s pairing secret in the desired app to finalise the connection.</div>
 
-  <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false"
-  class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-3 py-2 rounded-md shadow text-white transition mb-4">
+  <a href="{{.PairingUri}}" class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-3 py-2 rounded-md shadow text-white transition mb-4">
     <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" clip-rule="evenodd"
         d="M13.6281 5.03035L20.9945 12.43L20.9956 12.431C21.4028 12.84 21.8601 13.0639 22.279 13.1062C22.6711 13.1459 23.0667 13.0322 23.4219 12.6949L19.4029 2.22631C18.9491 1.2345 17.6421 0.998839 16.8705 1.7739L13.6281 5.03035ZM20.5966 12.8277L20.5967 12.8278L20.5965 12.828C21.5558 13.7914 22.8871 14.0212 23.8507 13.0622L20.5884 16.3091L19.0591 17.8312L17.9915 18.8938L16.1182 17.0137C17.026 15.6333 16.8781 13.76 15.6662 12.5406L14.3908 11.2573C14.2095 11.0748 13.9176 11.074 13.7351 11.2553L13.1055 11.8809L11.5093 10.2748C11.2323 9.99609 10.7744 10.0126 10.5176 10.3196C10.2928 10.5907 10.3315 10.9906 10.5786 11.2392L12.1549 12.8252L10.9035 14.0685L9.3073 12.4624C9.03028 12.1837 8.5705 12.1981 8.31561 12.5072C8.0928 12.7764 8.13155 13.1762 8.37864 13.4249L9.95488 15.0109L9.32725 15.6346C9.14479 15.8159 9.14392 16.1077 9.32522 16.2902L10.6006 17.5735C11.8123 18.7927 13.6847 18.9526 15.0709 18.054L16.9452 19.9351L16.3577 20.5197L14.3527 22.5153C13.3889 23.4743 11.8301 23.4707 10.8708 22.5072L0.717064 12.3077C-0.242097 11.344 -0.238627 9.78546 0.725161 8.82627L6.96087 2.61994C7.92465 1.66089 9.4834 1.66451 10.4427 2.62803L20.5966 12.8277Z"
         fill="currentColor" />
     </svg>
     Open in supported app
-  </button>
+  </a>
 
   {{if not (eq .PairingSecret "")}}
     <button id="copy-button" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4">

From c395c1d30716c65e8e7b6ec6a9e582bdd381b5d6 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 1 Nov 2023 03:47:36 +0530
Subject: [PATCH 5/9] chore: consistent widths

---
 public/css/application.css | 24 +++++++-------
 views/apps/create.html     | 64 ++++++++++++++++++++------------------
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/public/css/application.css b/public/css/application.css
index 63712e4d..2ef85e7b 100644
--- a/public/css/application.css
+++ b/public/css/application.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -31,7 +31,6 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -48,8 +47,6 @@ html {
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
 }
 
 /*
@@ -602,9 +599,6 @@ select {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -652,9 +646,6 @@ select {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -739,7 +730,10 @@ select {
 }
 
 .inset-0 {
-  inset: 0px;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
 }
 
 .left-0 {
@@ -894,6 +888,14 @@ select {
   max-width: 24rem;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .table-fixed {
   table-layout: fixed;
 }
diff --git a/views/apps/create.html b/views/apps/create.html
index 9eb57fcf..115402b2 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -1,43 +1,45 @@
 {{define "body"}}
 
 <div
-  class="w-full max-w-sm mx-auto bg-white rounded-md shadow p-4 lg:px-8 lg:py-6 mb-10 dark:bg-surface-02dp"
+  class="w-full max-w-3xl mx-auto bg-white rounded-md shadow p-4 lg:px-8 lg:py-6 mb-10 dark:bg-surface-02dp"
 >
   <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white">Pair with app to finalize</h2>
 
-  <div class="font-medium text-xs text-center mb-6 dark:text-white">Open, paste or scan your connection’s pairing secret in the desired app to finalise the connection.</div>
+  <div class="font-medium text-sm text-center mb-6 dark:text-white">Open, paste or scan your connection’s pairing secret in the desired app to finalise the connection.</div>
 
-  <a href="{{.PairingUri}}" class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-3 py-2 rounded-md shadow text-white transition mb-4">
-    <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M13.6281 5.03035L20.9945 12.43L20.9956 12.431C21.4028 12.84 21.8601 13.0639 22.279 13.1062C22.6711 13.1459 23.0667 13.0322 23.4219 12.6949L19.4029 2.22631C18.9491 1.2345 17.6421 0.998839 16.8705 1.7739L13.6281 5.03035ZM20.5966 12.8277L20.5967 12.8278L20.5965 12.828C21.5558 13.7914 22.8871 14.0212 23.8507 13.0622L20.5884 16.3091L19.0591 17.8312L17.9915 18.8938L16.1182 17.0137C17.026 15.6333 16.8781 13.76 15.6662 12.5406L14.3908 11.2573C14.2095 11.0748 13.9176 11.074 13.7351 11.2553L13.1055 11.8809L11.5093 10.2748C11.2323 9.99609 10.7744 10.0126 10.5176 10.3196C10.2928 10.5907 10.3315 10.9906 10.5786 11.2392L12.1549 12.8252L10.9035 14.0685L9.3073 12.4624C9.03028 12.1837 8.5705 12.1981 8.31561 12.5072C8.0928 12.7764 8.13155 13.1762 8.37864 13.4249L9.95488 15.0109L9.32725 15.6346C9.14479 15.8159 9.14392 16.1077 9.32522 16.2902L10.6006 17.5735C11.8123 18.7927 13.6847 18.9526 15.0709 18.054L16.9452 19.9351L16.3577 20.5197L14.3527 22.5153C13.3889 23.4743 11.8301 23.4707 10.8708 22.5072L0.717064 12.3077C-0.242097 11.344 -0.238627 9.78546 0.725161 8.82627L6.96087 2.61994C7.92465 1.66089 9.4834 1.66451 10.4427 2.62803L20.5966 12.8277Z"
-        fill="currentColor" />
-    </svg>
-    Open in supported app
-  </a>
-
-  {{if not (eq .PairingSecret "")}}
-    <button id="copy-button" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4">
-      <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-        fill="currentColor">
-        <rect width="10" height="14" x="6" y="6" rx="1.5"></rect>
-        <path
-          d="M8.064 5.064A1.5 1.5 0 018.5 5h7A1.5 1.5 0 0117 6.5v11a1.5 1.5 0 01-.064.436A1.5 1.5 0 0018 16.5v-11A1.5 1.5 0 0016.5 4h-7a1.5 1.5 0 00-1.436 1.064z"></path>
+  <div class="mx-auto max-w-xs flex flex-col">
+    <a href="{{.PairingUri}}" class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-3 py-2 rounded-md shadow text-white transition mb-4">
+      <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M13.6281 5.03035L20.9945 12.43L20.9956 12.431C21.4028 12.84 21.8601 13.0639 22.279 13.1062C22.6711 13.1459 23.0667 13.0322 23.4219 12.6949L19.4029 2.22631C18.9491 1.2345 17.6421 0.998839 16.8705 1.7739L13.6281 5.03035ZM20.5966 12.8277L20.5967 12.8278L20.5965 12.828C21.5558 13.7914 22.8871 14.0212 23.8507 13.0622L20.5884 16.3091L19.0591 17.8312L17.9915 18.8938L16.1182 17.0137C17.026 15.6333 16.8781 13.76 15.6662 12.5406L14.3908 11.2573C14.2095 11.0748 13.9176 11.074 13.7351 11.2553L13.1055 11.8809L11.5093 10.2748C11.2323 9.99609 10.7744 10.0126 10.5176 10.3196C10.2928 10.5907 10.3315 10.9906 10.5786 11.2392L12.1549 12.8252L10.9035 14.0685L9.3073 12.4624C9.03028 12.1837 8.5705 12.1981 8.31561 12.5072C8.0928 12.7764 8.13155 13.1762 8.37864 13.4249L9.95488 15.0109L9.32725 15.6346C9.14479 15.8159 9.14392 16.1077 9.32522 16.2902L10.6006 17.5735C11.8123 18.7927 13.6847 18.9526 15.0709 18.054L16.9452 19.9351L16.3577 20.5197L14.3527 22.5153C13.3889 23.4743 11.8301 23.4707 10.8708 22.5072L0.717064 12.3077C-0.242097 11.344 -0.238627 9.78546 0.725161 8.82627L6.96087 2.61994C7.92465 1.66089 9.4834 1.66451 10.4427 2.62803L20.5966 12.8277Z"
+          fill="currentColor" />
       </svg>
-      <span id="copy-text">Copy pairing secret</span>
-    </button>
+      Open in supported app
+    </a>
 
-    <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
-      <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-        fill="currentColor">
-        <path d="M12 14a2 2 0 100-4 2 2 0 000 4z"></path>
-        <path fill-rule="evenodd"
-          d="M21 12c0 2.761-4.03 5-9 5s-9-2.239-9-5 4.03-5 9-5 9 2.239 9 5zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
-          clip-rule="evenodd"></path>
-      </svg>
-      Reveal pairing secret
-    </button>
-  {{end}}
+    {{if not (eq .PairingSecret "")}}
+      <button id="copy-button" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4">
+        <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          fill="currentColor">
+          <rect width="10" height="14" x="6" y="6" rx="1.5"></rect>
+          <path
+            d="M8.064 5.064A1.5 1.5 0 018.5 5h7A1.5 1.5 0 0117 6.5v11a1.5 1.5 0 01-.064.436A1.5 1.5 0 0018 16.5v-11A1.5 1.5 0 0016.5 4h-7a1.5 1.5 0 00-1.436 1.064z"></path>
+        </svg>
+        <span id="copy-text">Copy pairing secret</span>
+      </button>
+
+      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
+        <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          fill="currentColor">
+          <path d="M12 14a2 2 0 100-4 2 2 0 000 4z"></path>
+          <path fill-rule="evenodd"
+            d="M21 12c0 2.761-4.03 5-9 5s-9-2.239-9-5 4.03-5 9-5 9 2.239 9 5zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
+            clip-rule="evenodd"></path>
+        </svg>
+        Reveal pairing secret
+      </button>
+    {{end}}
+  </div>
 
   <p class="w-fit text-xs border border-orange-200 text-orange-700 bg-orange-50 dark:text-orange-400 dark:bg-orange-900 px-3 py-2 mx-auto rounded-md">
     ⚠️ Connect only with apps you trust!

From 49f6a28d726834ecbcbcbd5aa34c1b9d67feef83 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 1 Nov 2023 04:01:45 +0530
Subject: [PATCH 6/9] fix: dark mode

---
 views/apps/create.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/views/apps/create.html b/views/apps/create.html
index 115402b2..dfc8fd29 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -18,7 +18,7 @@ <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white"
     </a>
 
     {{if not (eq .PairingSecret "")}}
-      <button id="copy-button" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4">
+      <button id="copy-button" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4">
         <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="currentColor">
           <rect width="10" height="14" x="6" y="6" rx="1.5"></rect>
@@ -28,7 +28,7 @@ <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white"
         <span id="copy-text">Copy pairing secret</span>
       </button>
 
-      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
+      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
         <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="currentColor">
           <path d="M12 14a2 2 0 100-4 2 2 0 000 4z"></path>
@@ -47,7 +47,7 @@ <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white"
 
   <div class="flex fixed inset-0 items-center justify-center hidden" id="pairing-details">
     <div onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="fixed inset-0 bg-gray-900 opacity-50"></div>
-    <div class="bg-white p-4 lg:px-6 rounded shadow relative">
+    <div class="bg-white dark:bg-surface-02dp p-4 lg:px-6 rounded shadow relative">
       <h2 class="mb-4 font-semibold text-lg lg:text-xl font-headline dark:text-white">Scan QR Code in the app to pair</h2>
       <a href="{{.PairingUri}}" target="_blank" id="pairing-link" class="block border-4 border-purple-600 rounded-lg p-4 lg:p-6">
         <div id="connect-qrcode"></div>

From f865ad196ccd1053f08ed308b2f44615cb4b44eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 1 Nov 2023 23:40:48 +0100
Subject: [PATCH 7/9] fix: create layout

---
 views/apps/create.html | 30 ++++++++++++++++--------------
 views/apps/new.html    |  6 ------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/views/apps/create.html b/views/apps/create.html
index 24e03bcd..f5470a5e 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -1,14 +1,16 @@
 {{define "body"}}
 
-<div
-  class="bg-white rounded-md shadow p-4 lg:p-8 dark:bg-surface-02dp"
->
-  <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white">Pair with app to finalize</h2>
 
-  <div class="font-medium text-sm text-center mb-6 dark:text-white">Open, paste or scan your connection’s pairing secret in the desired app to finalise the connection.</div>
+<div class="w-full max-w-screen-sm mx-auto">
+  <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white text-center">
+    🚀 Almost there, just one more step
+  </h2>
+  <div class="font-medium text-center mb-8 dark:text-white">
+    Complete the setup by pasting or scanning your connection's pairing secret in the desired app to finalise the connection.
+  </div>
 
-  <div class="mx-auto max-w-xs flex flex-col">
-    <a href="{{.PairingUri}}" class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-3 py-2 rounded-md shadow text-white transition mb-4">
+<div class="flex flex-col">
+    <a href="{{.PairingUri}}" class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-4 rounded-md shadow text-white transition mb-2">
       <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd"
           d="M13.6281 5.03035L20.9945 12.43L20.9956 12.431C21.4028 12.84 21.8601 13.0639 22.279 13.1062C22.6711 13.1459 23.0667 13.0322 23.4219 12.6949L19.4029 2.22631C18.9491 1.2345 17.6421 0.998839 16.8705 1.7739L13.6281 5.03035ZM20.5966 12.8277L20.5967 12.8278L20.5965 12.828C21.5558 13.7914 22.8871 14.0212 23.8507 13.0622L20.5884 16.3091L19.0591 17.8312L17.9915 18.8938L16.1182 17.0137C17.026 15.6333 16.8781 13.76 15.6662 12.5406L14.3908 11.2573C14.2095 11.0748 13.9176 11.074 13.7351 11.2553L13.1055 11.8809L11.5093 10.2748C11.2323 9.99609 10.7744 10.0126 10.5176 10.3196C10.2928 10.5907 10.3315 10.9906 10.5786 11.2392L12.1549 12.8252L10.9035 14.0685L9.3073 12.4624C9.03028 12.1837 8.5705 12.1981 8.31561 12.5072C8.0928 12.7764 8.13155 13.1762 8.37864 13.4249L9.95488 15.0109L9.32725 15.6346C9.14479 15.8159 9.14392 16.1077 9.32522 16.2902L10.6006 17.5735C11.8123 18.7927 13.6847 18.9526 15.0709 18.054L16.9452 19.9351L16.3577 20.5197L14.3527 22.5153C13.3889 23.4743 11.8301 23.4707 10.8708 22.5072L0.717064 12.3077C-0.242097 11.344 -0.238627 9.78546 0.725161 8.82627L6.96087 2.61994C7.92465 1.66089 9.4834 1.66451 10.4427 2.62803L20.5966 12.8277Z"
@@ -16,9 +18,13 @@ <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white"
       </svg>
       Open in supported app
     </a>
+    <div class="text-center text-xs dark:text-neutral-500">
+      Only connect with apps you trust!
+    </div>
 
     {{if not (eq .PairingSecret "")}}
-      <button id="copy-button" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4">
+      <div class="dark:text-white text-sm text-center mt-8 mb-1">Manually pair app ↓</div>
+      <button id="copy-button" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mt-2 mb-2">
         <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="currentColor">
           <rect width="10" height="14" x="6" y="6" rx="1.5"></rect>
@@ -28,7 +34,7 @@ <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white"
         <span id="copy-text">Copy pairing secret</span>
       </button>
 
-      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
+      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
         <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="currentColor">
           <path d="M12 14a2 2 0 100-4 2 2 0 000 4z"></path>
@@ -36,15 +42,11 @@ <h2 class="font-semibold text-xl text-center font-headline mb-6 dark:text-white"
             d="M21 12c0 2.761-4.03 5-9 5s-9-2.239-9-5 4.03-5 9-5 9 2.239 9 5zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
             clip-rule="evenodd"></path>
         </svg>
-        Reveal pairing secret
+        QR code
       </button>
     {{end}}
   </div>
 
-  <p class="w-fit text-xs border border-orange-200 text-orange-700 bg-orange-50 dark:text-orange-400 dark:bg-orange-900 px-3 py-2 mx-auto rounded-md">
-    ⚠️ Connect only with apps you trust!
-  </p>
-
   <div class="flex fixed inset-0 items-center justify-center hidden" id="pairing-details">
     <div onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="fixed inset-0 bg-gray-900 opacity-50"></div>
     <div class="bg-white dark:bg-surface-02dp p-4 lg:px-6 rounded shadow relative">
diff --git a/views/apps/new.html b/views/apps/new.html
index 39395d3c..fd9486f1 100644
--- a/views/apps/new.html
+++ b/views/apps/new.html
@@ -8,12 +8,6 @@ <h2 class="font-bold text-2xl font-headline mb-4 dark:text-white">
   {{end}}
 </h2>
 
-{{ if .Pubkey }}
-  <p class="rounded-md text-orange-700 bg-orange-50 dark:text-orange-200 dark:bg-orange-900 p-3 mb-3">
-    ⚠️ Only connect with apps you trust!
-  </p>
-{{ end }}
-
 <form method="POST" action="/apps" accept-charset="UTF-8">
   <div class="bg-white dark:bg-surface-02dp rounded-md shadow p-4 md:p-8 ">
       <div>

From 466a740119f977467454458f803799852a4f5316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 1 Nov 2023 23:45:19 +0100
Subject: [PATCH 8/9] fix: copy

---
 views/apps/create.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/views/apps/create.html b/views/apps/create.html
index f5470a5e..e538f082 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -3,10 +3,10 @@
 
 <div class="w-full max-w-screen-sm mx-auto">
   <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white text-center">
-    🚀 Almost there, just one more step
+    🚀 Almost there
   </h2>
   <div class="font-medium text-center mb-8 dark:text-white">
-    Complete the setup by pasting or scanning your connection's pairing secret in the desired app to finalise the connection.
+    Complete the last step of the setup by pasting or scanning your connection's pairing secret in the desired app to finalise the connection.
   </div>
 
 <div class="flex flex-col">
@@ -18,13 +18,13 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white text-center">
       </svg>
       Open in supported app
     </a>
-    <div class="text-center text-xs dark:text-neutral-500">
+    <div class="text-center text-xs text-gray-600 dark:text-neutral-500">
       Only connect with apps you trust!
     </div>
 
     {{if not (eq .PairingSecret "")}}
       <div class="dark:text-white text-sm text-center mt-8 mb-1">Manually pair app ↓</div>
-      <button id="copy-button" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mt-2 mb-2">
+      <button id="copy-button" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mt-2 mb-2">
         <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="currentColor">
           <rect width="10" height="14" x="6" y="6" rx="1.5"></rect>
@@ -34,7 +34,7 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white text-center">
         <span id="copy-text">Copy pairing secret</span>
       </button>
 
-      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
+      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
         <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="currentColor">
           <path d="M12 14a2 2 0 100-4 2 2 0 000 4z"></path>

From 72d5a43f2ea2e6f8056951d6c63a4da7eeff9d6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 1 Nov 2023 23:46:02 +0100
Subject: [PATCH 9/9] fix: copy

---
 public/css/application.css | 351 +++++++++++++++++++++++--------------
 views/apps/create.html     |   2 +-
 2 files changed, 218 insertions(+), 135 deletions(-)

diff --git a/public/css/application.css b/public/css/application.css
index 2ef85e7b..3c2439fa 100644
--- a/public/css/application.css
+++ b/public/css/application.css
@@ -744,9 +744,12 @@ select {
   order: 9999;
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3;
 }
 
 .mx-auto {
@@ -754,11 +757,6 @@ select {
   margin-right: auto;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -791,6 +789,10 @@ select {
   margin-left: 0.5rem;
 }
 
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+
 .ml-6 {
   margin-left: 1.5rem;
 }
@@ -799,6 +801,18 @@ select {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -807,6 +821,10 @@ select {
   margin-top: 0.5rem;
 }
 
+.mt-24 {
+  margin-top: 6rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -819,6 +837,14 @@ select {
   margin-top: 2rem;
 }
 
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
 .block {
   display: block;
 }
@@ -839,6 +865,10 @@ select {
   display: table;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -847,18 +877,34 @@ select {
   height: 1rem;
 }
 
-.w-1\/5 {
-  width: 20%;
+.w-16 {
+  width: 4rem;
 }
 
-.w-2\/5 {
-  width: 40%;
+.w-24 {
+  width: 6rem;
 }
 
 .w-4 {
   width: 1rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-56 {
+  width: 14rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -875,27 +921,34 @@ select {
   width: 65px;
 }
 
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .w-full {
   width: 100%;
 }
 
-.max-w-sm {
-  max-width: 24rem;
+.w-64 {
+  width: 16rem;
+}
+
+.w-96 {
+  width: 24rem;
 }
 
-.max-w-3xl {
-  max-width: 48rem;
+.max-w-screen-lg {
+  max-width: 1024px;
 }
 
 .max-w-xs {
   max-width: 20rem;
 }
 
+.max-w-screen-sm {
+  max-width: 640px;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .table-fixed {
   table-layout: fixed;
 }
@@ -904,6 +957,12 @@ select {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .list-inside {
   list-style-position: inside;
 }
@@ -916,20 +975,24 @@ select {
   list-style-type: disc;
 }
 
-.flex-col {
-  flex-direction: column;
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
-.items-center {
-  align-items: center;
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
-.justify-end {
-  justify-content: flex-end;
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
 }
 
 .justify-center {
@@ -940,6 +1003,16 @@ select {
   justify-content: space-between;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -976,6 +1049,10 @@ select {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-4 {
   border-width: 4px;
 }
@@ -984,6 +1061,10 @@ select {
   border-bottom-width: 1px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -998,14 +1079,14 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-orange-200 {
+.border-purple-600 {
   --tw-border-opacity: 1;
-  border-color: rgb(254 215 170 / var(--tw-border-opacity));
+  border-color: rgb(147 51 234 / var(--tw-border-opacity));
 }
 
-.border-purple-600 {
+.border-purple-700 {
   --tw-border-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-border-opacity));
+  border-color: rgb(126 34 206 / var(--tw-border-opacity));
 }
 
 .border-red-400 {
@@ -1013,14 +1094,9 @@ select {
   border-color: rgb(248 113 113 / var(--tw-border-opacity));
 }
 
-.bg-blue-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
-}
-
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+.border-l-gray-200 {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
 .bg-gray-50 {
@@ -1038,9 +1114,9 @@ select {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
-.bg-orange-50 {
+.bg-purple-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
 }
 
 .bg-purple-700 {
@@ -1065,24 +1141,20 @@ select {
   padding: 0.625rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1123,16 +1195,12 @@ select {
   padding-bottom: 1rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
-.pl-10 {
-  padding-left: 2.5rem;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
+.pb-4 {
+  padding-bottom: 1rem;
 }
 
 .pl-5 {
@@ -1143,12 +1211,12 @@ select {
   padding-left: 1.5rem;
 }
 
-.pr-10 {
-  padding-right: 2.5rem;
+.pr-3 {
+  padding-right: 0.75rem;
 }
 
-.pr-4 {
-  padding-right: 1rem;
+.pt-1 {
+  padding-top: 0.25rem;
 }
 
 .pt-4 {
@@ -1163,6 +1231,10 @@ select {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .font-headline {
   font-family: "Work Sans", "Inter var", Helvetica, Arial, sans-serif;
 }
@@ -1230,11 +1302,6 @@ select {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1245,29 +1312,29 @@ select {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.text-gray-700 {
+.text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
+  color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.text-gray-900 {
+.text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-green-500 {
+.text-gray-800 {
   --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
+  color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
-.text-orange-700 {
+.text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgb(194 65 12 / var(--tw-text-opacity));
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-purple-600 {
+.text-green-500 {
   --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
+  color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
 .text-purple-700 {
@@ -1284,6 +1351,10 @@ select {
   text-decoration-line: underline;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1347,11 +1418,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-purple-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-purple-700:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity));
@@ -1377,9 +1443,9 @@ select {
     border-color: rgb(255 255 255 / 0.1);
   }
 
-  .dark\:border-gray-500 {
+  .dark\:border-gray-400 {
     --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+    border-color: rgb(156 163 175 / var(--tw-border-opacity));
   }
 
   .dark\:border-gray-700 {
@@ -1387,23 +1453,33 @@ select {
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
   }
 
+  .dark\:border-neutral-700 {
+    --tw-border-opacity: 1;
+    border-color: rgb(64 64 64 / var(--tw-border-opacity));
+  }
+
   .dark\:border-neutral-800 {
     --tw-border-opacity: 1;
     border-color: rgb(38 38 38 / var(--tw-border-opacity));
   }
 
+  .dark\:border-purple-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(216 180 254 / var(--tw-border-opacity));
+  }
+
   .dark\:border-white\/10 {
     border-color: rgb(255 255 255 / 0.1);
   }
 
-  .dark\:bg-gray-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+  .dark\:border-l-gray-400 {
+    --tw-border-opacity: 1;
+    border-left-color: rgb(156 163 175 / var(--tw-border-opacity));
   }
 
-  .dark\:bg-orange-900 {
+  .dark\:bg-purple-900 {
     --tw-bg-opacity: 1;
-    background-color: rgb(124 45 18 / var(--tw-bg-opacity));
+    background-color: rgb(88 28 135 / var(--tw-bg-opacity));
   }
 
   .dark\:bg-surface-00dp {
@@ -1456,14 +1532,14 @@ select {
     color: rgb(163 163 163 / var(--tw-text-opacity));
   }
 
-  .dark\:text-orange-400 {
+  .dark\:text-purple-400 {
     --tw-text-opacity: 1;
-    color: rgb(251 146 60 / var(--tw-text-opacity));
+    color: rgb(192 132 252 / var(--tw-text-opacity));
   }
 
-  .dark\:text-purple-400 {
+  .dark\:text-purple-500 {
     --tw-text-opacity: 1;
-    color: rgb(192 132 252 / var(--tw-text-opacity));
+    color: rgb(168 85 247 / var(--tw-text-opacity));
   }
 
   .dark\:text-white {
@@ -1471,6 +1547,11 @@ select {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
+  .dark\:text-neutral-500 {
+    --tw-text-opacity: 1;
+    color: rgb(115 115 115 / var(--tw-text-opacity));
+  }
+
   .dark\:placeholder-gray-400::-moz-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175 / var(--tw-placeholder-opacity));
@@ -1481,16 +1562,13 @@ select {
     color: rgb(156 163 175 / var(--tw-placeholder-opacity));
   }
 
-  .dark\:ring-offset-gray-700 {
-    --tw-ring-offset-color: #374151;
-  }
-
   .dark\:ring-offset-gray-800 {
     --tw-ring-offset-color: #1f2937;
   }
 
-  .dark\:\[color-scheme\:dark\] {
-    color-scheme: dark;
+  .dark\:invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 
   .dark\:hover\:bg-surface-16dp:hover {
@@ -1507,10 +1585,6 @@ select {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
   }
-
-  .dark\:focus\:ring-offset-gray-700:focus {
-    --tw-ring-offset-color: #374151;
-  }
 }
 
 @media (min-width: 640px) {
@@ -1526,10 +1600,6 @@ select {
     margin-top: 0px;
   }
 
-  .sm\:flex {
-    display: flex;
-  }
-
   .sm\:w-\[250px\] {
     width: 250px;
   }
@@ -1542,10 +1612,6 @@ select {
     justify-content: center;
   }
 
-  .sm\:pr-0 {
-    padding-right: 0px;
-  }
-
   .sm\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -1558,21 +1624,43 @@ select {
 }
 
 @media (min-width: 768px) {
-  .md\:ml-0 {
-    margin-left: 0px;
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
   }
 
   .md\:flex {
     display: flex;
   }
 
-  .md\:flex-1 {
-    flex: 1 1 0%;
+  .md\:table-cell {
+    display: table-cell;
   }
 
-  .md\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
+  .md\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .md\:grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
+  .md\:p-8 {
+    padding: 2rem;
+  }
+
+  .md\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .md\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
 }
 
@@ -1581,14 +1669,19 @@ select {
     margin-bottom: 1.5rem;
   }
 
-  .lg\:w-8\/12 {
-    width: 66.666667%;
-  }
-
   .lg\:p-6 {
     padding: 1.5rem;
   }
 
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+
+  .lg\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .lg\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
@@ -1599,21 +1692,11 @@ select {
     padding-right: 1.5rem;
   }
 
-  .lg\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
   .lg\:py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
-  .lg\:py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
   .lg\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
diff --git a/views/apps/create.html b/views/apps/create.html
index e538f082..47560ac6 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -3,7 +3,7 @@
 
 <div class="w-full max-w-screen-sm mx-auto">
   <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white text-center">
-    🚀 Almost there
+    🚀 Almost there!
   </h2>
   <div class="font-medium text-center mb-8 dark:text-white">
     Complete the last step of the setup by pasting or scanning your connection's pairing secret in the desired app to finalise the connection.