From d7dcc510735c7c88e997311ddb31545934710321 Mon Sep 17 00:00:00 2001 From: im-adithya Date: Mon, 29 May 2023 18:45:53 +0530 Subject: [PATCH 1/4] fix: dark theme for nwc --- public/css/application.css | 210 +++++++++++++++++++++ public/images/alby-logo-with-text-dark.svg | 1 + public/images/copy.svg | 4 +- public/js/qr-creator.js | 2 +- views/about.html | 42 ++--- views/apps/create.html | 35 ++-- views/apps/index.html | 22 +-- views/apps/new.html | 16 +- views/apps/new_with_pubkey.html | 16 +- views/apps/show.html | 65 +++---- views/backends/alby/index.html | 9 +- views/backends/lnd/index.html | 10 +- views/layout.html | 29 ++- 13 files changed, 346 insertions(+), 115 deletions(-) create mode 100644 public/images/alby-logo-with-text-dark.svg diff --git a/public/css/application.css b/public/css/application.css index 473c9a6b..7c8c5cae 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -930,6 +930,17 @@ select { justify-content: space-between; } +.divide-y > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); +} + .overflow-hidden { overflow: hidden; } @@ -942,6 +953,10 @@ select { border-radius: 0.375rem; } +.rounded-sm { + border-radius: 0.125rem; +} + .rounded-b { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; @@ -1093,6 +1108,11 @@ select { padding-bottom: 1rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .pb-4 { padding-bottom: 1rem; } @@ -1117,6 +1137,10 @@ select { padding-right: 1rem; } +.pt-4 { + padding-top: 1rem; +} + .text-left { text-align: left; } @@ -1228,10 +1252,30 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity)); +} + +.text-green-700 { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } +.placeholder-gray-500::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(107 114 128 / var(--tw-placeholder-opacity)); +} + +.placeholder-gray-500::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(107 114 128 / var(--tw-placeholder-opacity)); +} + .opacity-50 { opacity: 0.5; } @@ -1266,6 +1310,10 @@ select { transition-duration: 150ms; } +.duration-300 { + transition-duration: 300ms; +} + .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1286,21 +1334,47 @@ select { background-color: rgb(88 28 135 / var(--tw-bg-opacity)); } +.hover\:text-gray-600:hover { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + .focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-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; } +.focus\:ring-1:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + .focus\:ring-blue-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); } +.focus\:ring-purple-100:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(243 232 255 / var(--tw-ring-opacity)); +} + +.focus\:ring-purple-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity)); +} + .focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -1312,6 +1386,10 @@ select { } @media (prefers-color-scheme: dark) { + .dark\:divide-white\/10 > :not([hidden]) ~ :not([hidden]) { + border-color: rgb(255 255 255 / 0.1); + } + .dark\:border-gray-600 { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); @@ -1327,6 +1405,20 @@ select { border-color: rgb(38 38 38 / var(--tw-border-opacity)); } + .dark\:border-white\/10 { + border-color: rgb(255 255 255 / 0.1); + } + + .dark\:border-neutral-500 { + --tw-border-opacity: 1; + border-color: rgb(115 115 115 / var(--tw-border-opacity)); + } + + .dark\:border-red-100 { + --tw-border-opacity: 1; + border-color: rgb(254 226 226 / var(--tw-border-opacity)); + } + .dark\:bg-gray-700 { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); @@ -1337,11 +1429,66 @@ select { background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } + .dark\:bg-surface-00dp { + --tw-bg-opacity: 1; + background-color: rgb(18 18 18 / var(--tw-bg-opacity)); + } + + .dark\:bg-surface-01dp { + --tw-bg-opacity: 1; + background-color: rgb(31 31 31 / var(--tw-bg-opacity)); + } + .dark\:bg-surface-02dp { --tw-bg-opacity: 1; background-color: rgb(36 36 36 / var(--tw-bg-opacity)); } + .dark\:bg-surface-03dp { + --tw-bg-opacity: 1; + background-color: rgb(38 38 38 / var(--tw-bg-opacity)); + } + + .dark\:bg-surface-04dp { + --tw-bg-opacity: 1; + background-color: rgb(41 41 41 / var(--tw-bg-opacity)); + } + + .dark\:bg-surface-06dp { + --tw-bg-opacity: 1; + background-color: rgb(46 46 46 / var(--tw-bg-opacity)); + } + + .dark\:bg-surface-08dp { + --tw-bg-opacity: 1; + background-color: rgb(49 49 49 / var(--tw-bg-opacity)); + } + + .dark\:bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + + .dark\:bg-orange-900 { + --tw-bg-opacity: 1; + background-color: rgb(124 45 18 / var(--tw-bg-opacity)); + } + + .dark\:bg-green-900 { + --tw-bg-opacity: 1; + background-color: rgb(20 83 45 / var(--tw-bg-opacity)); + } + + .dark\:bg-green-950 { + --tw-bg-opacity: 1; + background-color: rgb(5 46 22 / var(--tw-bg-opacity)); + } + + .dark\:text-gray-100 { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); + } + .dark\:text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -1352,11 +1499,41 @@ select { color: rgb(229 229 229 / var(--tw-text-opacity)); } + .dark\:text-neutral-400 { + --tw-text-opacity: 1; + color: rgb(163 163 163 / 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\:text-purple-400 { + --tw-text-opacity: 1; + color: rgb(192 132 252 / var(--tw-text-opacity)); + } + + .dark\:text-neutral-300 { + --tw-text-opacity: 1; + color: rgb(212 212 212 / var(--tw-text-opacity)); + } + + .dark\:text-orange-400 { + --tw-text-opacity: 1; + color: rgb(251 146 60 / var(--tw-text-opacity)); + } + + .dark\:text-green-400 { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity)); + } + .dark\:placeholder-gray-400::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); @@ -1367,20 +1544,45 @@ select { color: rgb(156 163 175 / var(--tw-placeholder-opacity)); } + .dark\:placeholder-neutral-600::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(82 82 82 / var(--tw-placeholder-opacity)); + } + + .dark\:placeholder-neutral-600::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(82 82 82 / var(--tw-placeholder-opacity)); + } + .dark\:hover\:bg-surface-16dp:hover { --tw-bg-opacity: 1; background-color: rgb(56 56 56 / var(--tw-bg-opacity)); } + .dark\:hover\:text-gray-300:hover { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); + } + .dark\:focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); } + .dark\:focus\:border-purple-500:focus { + --tw-border-opacity: 1; + border-color: rgb(168 85 247 / var(--tw-border-opacity)); + } + .dark\:focus\:ring-blue-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); } + + .dark\:focus\:ring-purple-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity)); + } } @media (min-width: 640px) { @@ -1408,6 +1610,14 @@ select { justify-content: center; } + .sm\:overflow-hidden { + overflow: hidden; + } + + .sm\:rounded-md { + border-radius: 0.375rem; + } + .sm\:pr-0 { padding-right: 0px; } diff --git a/public/images/alby-logo-with-text-dark.svg b/public/images/alby-logo-with-text-dark.svg new file mode 100644 index 00000000..7ab50b6c --- /dev/null +++ b/public/images/alby-logo-with-text-dark.svg @@ -0,0 +1 @@ + diff --git a/public/images/copy.svg b/public/images/copy.svg index 96d7a484..473a627e 100644 --- a/public/images/copy.svg +++ b/public/images/copy.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/js/qr-creator.js b/public/js/qr-creator.js index 1d75ddb7..ae65eb6c 100644 --- a/public/js/qr-creator.js +++ b/public/js/qr-creator.js @@ -15,7 +15,7 @@ var g = a, x = c.left + b * h, u = c.top + r * h, p = r, q = b, f = d.a, k = x + h, m = u + h, D = p - 1, E = p + 1, n = q - 1, l = q + 1, y = Math.floor(Math.min(.5, Math.max(0, c.R)) * h), v = f(p, q), I = f(D, n), w = f(D, q); D = f(D, l); var F = f(p, l); l = f(E, l); q = f(E, q); E = f(E, n); p = f(p, n); x = Math.round(x); u = Math.round(u); k = Math.round(k); m = Math.round(m); v ? C(g, x, u, k, m, y, !w && !p, !w && !F, !q && !F, !q && !p) : z(g, x, u, k, m, y, w && p && I, w && F && D, q && F && l, q && p && E) } A(a, c); a.fill(); return t - } var v = { minVersion: 1, maxVersion: 40, ecLevel: "L", left: 0, top: 0, size: 200, fill: "#000", background: null, text: "no text", radius: .5, quiet: 0 }; G = function(t, c) { + } var v = { minVersion: 1, maxVersion: 40, ecLevel: "L", left: 0, top: 0, size: 200, fill: (window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFF" : "000"), background: null, text: "no text", radius: .5, quiet: 0 }; G = function(t, c) { var a = {}; Object.assign(a, v, t); a.N = a.minVersion; a.K = a.maxVersion; a.v = a.ecLevel; a.left = a.left; a.top = a.top; a.size = a.size; a.fill = a.fill; a.background = a.background; a.text = a.text; a.R = a.radius; a.P = a.quiet; if (c instanceof HTMLCanvasElement) { if (c.width !== a.size || c.height !== a.size) c.width = a.size, c.height = a.size; c.getContext("2d").clearRect(0, 0, c.width, c.height); y(c, a) } else t = document.createElement("canvas"), t.width = a.size, t.height = a.size, a = y(t, a), c.appendChild(a) } diff --git a/views/about.html b/views/about.html index 8525692e..1f1882ca 100644 --- a/views/about.html +++ b/views/about.html @@ -1,20 +1,20 @@ {{define "body"}}
-

tl;dr

-

+

tl;dr

+

Nostr Wallet Connect (NWC) is a way for applications like Nostr clients to access a remote Lightning wallet through a standardized protocol. For instance, you can link your Alby account with any other application using this feature.

-

How to connect your app?

-
    +

    How to connect your app?

    +
    1. Create a new app connection:

      @@ -41,13 +41,13 @@

      How to connect your app?

-

FAQs

+

FAQs

-

How does it work?

-

+

How does it work?

+

Nostr Wallet Connect uses the existing Nostr infrastructure to allow applications to communicate with lightning wallets. This makes it easy for developers to integrate and gives the users full flexibility on choice. @@ -60,15 +60,15 @@

How does it work?

>

-

Which apps support it?

-

+

Which apps support it?

+

Amethyst is the first Nostr Client to fully support Nostr Wallet Connect. More are working on support for it and are following shortly.

-

Is it open source?

-

+

Is it open source?

+

Of course! Nostr Wallet Connect is an open standard and our implementation is Is it open source? >

-

Can I run my own?

-

+

Can I run my own?

+

Yes, Nostr Wallet Connect is for every wallet and can easily be self-hosted.
We are looking for contributors to add support for more wallet backends. If @@ -92,11 +92,11 @@

Can I run my own?

-

For developers

-

+

For developers

+

Nostr Wallet Connect is an open protocol enabling applications to interact with bitcoin lightning wallets. It allows users to connect their existing wallets to your application allowing you to easily integrate bitcoin @@ -104,7 +104,7 @@

For developers

app.

-