chore: further changes

getAlby · Oct 31, 2023 · e6b8dee · e6b8dee
1 parent 8acf82e
commit e6b8dee
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 43 deletions.
diff --git a/public/css/application.css b/public/css/application.css
@@ -733,6 +733,14 @@ select {
   order: 9999;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -909,6 +917,10 @@ select {
   width: 100%;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
 .table-fixed {
   table-layout: fixed;
 }
@@ -939,8 +951,12 @@ select {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
 .flex-col {
@@ -1087,6 +1103,11 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-purple-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(88 28 135 / var(--tw-bg-opacity));
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1111,11 +1132,6 @@ select {
   padding: 1.5rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
@@ -1255,10 +1271,6 @@ select {
   font-weight: 500;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -1343,6 +1355,10 @@ select {
   opacity: 0.6;
 }
 
+.opacity-80 {
+  opacity: 0.8;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1355,6 +1371,11 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.grayscale {
+  --tw-grayscale: grayscale(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);
+}
+
 .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;
@@ -1429,6 +1450,11 @@ select {
     border-color: rgb(255 255 255 / 0.1);
   }
 
+  .dark\:border-gray-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  }
+
   .dark\:border-gray-700 {
     --tw-border-opacity: 1;
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1443,6 +1469,26 @@ select {
     border-color: rgb(255 255 255 / 0.1);
   }
 
+  .dark\:border-purple-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(192 132 252 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-purple-100 {
+    --tw-border-opacity: 1;
+    border-color: rgb(243 232 255 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-purple-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(233 213 255 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-purple-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(216 180 254 / var(--tw-border-opacity));
+  }
+
   .dark\:bg-green-900 {
     --tw-bg-opacity: 1;
     background-color: rgb(20 83 45 / var(--tw-bg-opacity));
@@ -1473,6 +1519,21 @@ select {
     background-color: rgb(49 49 49 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-gray-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-gray-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-purple-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(88 28 135 / var(--tw-bg-opacity));
+  }
+
   .dark\:text-gray-100 {
     --tw-text-opacity: 1;
     color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -1518,11 +1579,21 @@ select {
     color: rgb(192 132 252 / var(--tw-text-opacity));
   }
 
+  .dark\:text-purple-500 {
+    --tw-text-opacity: 1;
+    color: rgb(168 85 247 / var(--tw-text-opacity));
+  }
+
   .dark\:text-white {
     --tw-text-opacity: 1;
     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));
@@ -1537,6 +1608,11 @@ select {
     --tw-ring-offset-color: #1f2937;
   }
 
+  .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 {
     --tw-bg-opacity: 1;
     background-color: rgb(56 56 56 / var(--tw-bg-opacity));
@@ -1594,6 +1670,10 @@ select {
 }
 
 @media (min-width: 768px) {
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
   .md\:ml-0 {
     margin-left: 0px;
   }
@@ -1606,6 +1686,14 @@ select {
     flex: 1 1 0%;
   }
 
+  .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\:px-0 {
     padding-left: 0px;
     padding-right: 0px;

diff --git a/views/404.html b/views/404.html
@@ -1,7 +1,7 @@
 {{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-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
 >
   <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">404 Page Not Found</h3>
   <p class="leading-relaxed dark:text-neutral-400">

diff --git a/views/about.html b/views/about.html
@@ -1,7 +1,7 @@
 {{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-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
 >
   <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">tl;dr</h3>
   <p class="leading-relaxed dark:text-neutral-400">
@@ -11,7 +11,7 @@ <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">tl;dr</h3>
 </div>
 
 <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-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
 >
   <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">How to connect your app?</h3>
   <ol class="list-decimal list-inside leading-relaxed dark:text-neutral-400">
@@ -41,7 +41,7 @@ <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">How to connect
 </div>
 
 <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-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
 >
 
   <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">FAQs</h3>
@@ -92,7 +92,7 @@ <h4 class="font-bold text-l font-headline mt-6 dark:text-white">Can I run my own
 </div>
 
 <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-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
 >
 
   <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">For developers</h3>

diff --git a/views/apps/create.html b/views/apps/create.html
@@ -1,7 +1,7 @@
 {{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-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
 >
   <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
 

diff --git a/views/apps/index.html b/views/apps/index.html
@@ -1,7 +1,7 @@
 {{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-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp"
 >
   <div class="mb-6 flex justify-between">
     <h2 class="font-bold text-2xl font-headline py-2 dark:text-white">Your app connections</h2>

diff --git a/views/apps/new.html b/views/apps/new.html
@@ -1,6 +1,6 @@
 {{define "body"}}
 
-<div class="mx-auto bg-white rounded-md shadow p-4 md:px-8 md:py-6 mb-10 dark:bg-surface-02dp">
+<div class="w-full max-w-3xl mx-auto bg-white rounded-md shadow p-4 md:px-8 md:py-6 mb-10 dark:bg-surface-02dp">
   <h2 class="font-bold text-2xl font-headline mb-6 dark:text-white text-center">
     {{if .Name}}
       Connect to {{.Name}}
@@ -41,14 +41,14 @@ <h2 class="font-bold text-2xl font-headline mb-6 dark:text-white text-center">
 
     <div class="flex justify-between items-center mb-2 text-gray-800 dark:text-white">
       <p class="text-lg font-medium">Authorise the new app to:</p>
-      <img id="edit" class="inline cursor-pointer w-6" src="/public/images/edit.svg"/>
+      <img id="edit" class="dark:invert opacity-80 inline cursor-pointer w-6" src="/public/images/edit.svg"/>
     </div>
     <div id="request-method-options">
       <ul class="flex flex-col w-full">
         {{range $key, $value := .RequestMethodHelper}}
           <li class="w-full mb-2 {{if eq $key "pay_invoice"}}order-last{{end}}">
             <div class="flex items-center">
-              <img class="w-5 mr-3" src="/public/images/{{ $value.Icon }}.svg"/>
+              <img class="dark:invert opacity-80 w-5 mr-3" src="/public/images/{{ $value.Icon }}.svg"/>
               <input {{if $value.Checked }} checked {{end}} id="{{$key}}" type="checkbox" value="{{ $key }}" class="hidden w-4 h-4 mr-4 text-purple-700 bg-gray-50 border border-gray-300 rounded focus:ring-purple-700 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-surface-00dp dark:border-gray-700 cursor-pointer">
               <label for="{{$key}}" class="pointer-events-none text-gray-800 dark:text-gray-300 cursor-pointer">{{$value.Description}}</label>
             </div>
@@ -57,25 +57,25 @@ <h2 class="font-bold text-2xl font-headline mb-6 dark:text-white text-center">
       </ul>
     </div>
     <div id="budget-allowance" class="mb-6 pt-1 pb-2 pl-5 ml-2.5 border-l-2 border-l-gray-200">
-      <p class="text-gray-600 mb-2 text-sm">Monthly budget</p>
-      <div id="budget-allowance-limits" class="grid grid-cols-5 gap-2 text-xs text-gray-800 dark:text-white">
-        <div data-limit="10000" class="cursor-pointer rounded border-2 border-gray-200 text-center py-4">10k<br>sats</div>
-        <div data-limit="50000" class="cursor-pointer rounded border-2 border-gray-200 text-center py-4">50k<br>sats</div>
-        <div data-limit="100000" class="cursor-pointer rounded border-2 border-gray-200 text-center py-4">100k<br>sats</div>
-        <div data-limit="1000000" class="cursor-pointer rounded border-2 border-gray-200 text-center py-4">1M<br>sats</div>
-        <div data-limit="0" class="cursor-pointer rounded border-2 text-center py-4 border-purple-700 text-purple-700 bg-purple-100">Unlimited<br>#reckless</b></div>
+      <p class="text-gray-600 dark:text-neutral-400 mb-2 text-sm">Monthly budget</p>
+      <div id="budget-allowance-limits" class="grid grid-cols-6 grid-rows-2 md:grid-rows-1 md:grid-cols-5 gap-2 text-xs text-gray-800 dark:text-neutral-200">
+        <div data-limit="10000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">10k<br>sats</div>
+        <div data-limit="50000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">50k<br>sats</div>
+        <div data-limit="100000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">100k<br>sats</div>
+        <div data-limit="1000000" class="col-span-3 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1M<br>sats</div>
+        <div data-limit="0" class="col-span-3 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4 border-purple-700 dark:border-purple-300 text-purple-700 dark:text-white bg-purple-100 dark:bg-purple-900">Unlimited<br>#reckless</b></div>
       </div>
     </div>
 
-    <div id="expiry-toggle" class="cursor-pointer text-sm font-medium text-purple-700">+ Add connection expiry time</div>
+    <div id="expiry-toggle" class="cursor-pointer text-sm font-medium text-purple-700  dark:text-purple-500">+ Add connection expiry time</div>
 
-    <div id="expiry" class="hidden text-gray-800 dark:text-white">
+    <div id="expiry" class="hidden text-gray-800 dark:text-neutral-200">
       <p class="text-lg font-medium mb-2">Connection expiry time</p>
-      <div id="expiry-days" class="grid grid-cols-4 gap-2 text-xs text-gray-800">
-        <div data-days="7" class="cursor-pointer rounded border-2 border-gray-200 text-center py-4">7 days</div>
-        <div data-days="30" class="cursor-pointer rounded border-2 border-gray-200 text-center py-4">30 days</div>
-        <div data-days="365" class="cursor-pointer rounded border-2 border-gray-200 text-center py-4">365 days</div>
-        <div data-days="0" class="cursor-pointer rounded border-2 text-center py-4 border-purple-700 text-purple-700 bg-purple-100">Never</div>
+      <div id="expiry-days" class="grid grid-cols-4 gap-2 text-xs">
+        <div data-days="7" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">7 days</div>
+        <div data-days="30" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">30 days</div>
+        <div data-days="365" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">365 days</div>
+        <div data-days="0" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4 border-purple-700 dark:border-purple-300 text-purple-700 dark:text-white bg-purple-100 dark:bg-purple-900">Never</div>
       </div>
     </div>
 
@@ -161,9 +161,9 @@ <h2 class="font-bold text-2xl font-headline mb-6 dark:text-white text-center">
   budgetAllowanceLimits.forEach(limit => {
     limit.addEventListener("click", function(e) {
       budgetAllowanceLimits.forEach(div => {
-        div.classList.remove("border-purple-700", "text-purple-700", "bg-purple-100");
+        div.classList.remove("border-purple-700", "dark:border-purple-300", "text-purple-700", "dark:text-white", "bg-purple-100", "dark:bg-purple-900");
       })
-      limit.classList.add("border-purple-700", "text-purple-700", "bg-purple-100");
+      limit.classList.add("border-purple-700", "dark:border-purple-300", "text-purple-700", "dark:text-white", "bg-purple-100", "dark:bg-purple-900");
       maxAmount.value = limit.getAttribute('data-limit')
     })
   })
@@ -184,9 +184,9 @@ <h2 class="font-bold text-2xl font-headline mb-6 dark:text-white text-center">
   expiryDays.forEach(day => {
     day.addEventListener("click", function(e) {
       expiryDays.forEach(div => {
-        div.classList.remove("border-purple-700", "text-purple-700", "bg-purple-100");
+        div.classList.remove("border-purple-700", "dark:border-purple-300", "text-purple-700", "dark:text-white", "bg-purple-100", "dark:bg-purple-900");
       })
-      day.classList.add("border-purple-700", "text-purple-700", "bg-purple-100");
+      day.classList.add("border-purple-700", "dark:border-purple-300", "text-purple-700", "dark:text-white", "bg-purple-100", "dark:bg-purple-900");
       let days = parseInt(day.getAttribute('data-days'));
       if (days == 0) {
         expiresAt.value = "";

diff --git a/views/apps/show.html b/views/apps/show.html
@@ -1,7 +1,7 @@
 {{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">
+<div class="w-full max-w-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mb-10 dark:bg-surface-02dp">
   <a class="mb-2 block dark:text-white" href="/apps">
     &slarr;
     Back

diff --git a/views/backends/alby/index.html b/views/backends/alby/index.html
@@ -1,7 +1,7 @@
 {{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 mt-10 dark:bg-surface-02dp"
+  class="w-full max-w-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mt-10 dark:bg-surface-02dp"
 >
   <div class="text-center">
     <img

diff --git a/views/backends/lnd/index.html b/views/backends/lnd/index.html
@@ -1,6 +1,6 @@
 {{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 mt-10 dark:bg-surface-02dp">
+<div class="w-full max-w-3xl mx-auto bg-white rounded-md shadow px-4 lg:px-12 py-4 lg:py-12 mt-10 dark:bg-surface-02dp">
   <div class="text-center">
     <img alt="Nostr Wallet Connect logo" class="mx-auto mb-4" width="128" height="120"
       src="/public/images/nwc-logo.svg" />