From 680b7f73be2d447797242db5b482fa50970578b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <100827540+reneaaron@users.noreply.github.com> Date: Wed, 1 Nov 2023 22:48:41 +0100 Subject: [PATCH] ui improvements & layout simplification (#153) * fix: copy, layout * fix: layout * fix: layout simplification * fix: show layout * fix: text colors * fix: decrease paddings on lg * fix: css * fix: margins, footer * fix: responsive button styles * fix: resolve merge problems in new form * fix: footer * fix: new form * fix: new & show pages --- .prettierignore | 1 - models.go | 6 +- public/css/application.css | 253 +++++++++++++++++++++++++++++++++ views/404.html | 5 +- views/about.html | 20 ++- views/apps/create.html | 2 +- views/apps/index.html | 34 ++--- views/apps/new.html | 208 +++++++++++++-------------- views/apps/show.html | 101 +++++++------ views/backends/alby/index.html | 15 +- views/backends/lnd/index.html | 2 +- views/layout.html | 112 ++++++--------- 12 files changed, 490 insertions(+), 269 deletions(-) diff --git a/.prettierignore b/.prettierignore index 81326da1..e69de29b 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +0,0 @@ -views/apps/show.html diff --git a/models.go b/models.go index 9db71b7a..aa5d3352 100644 --- a/models.go +++ b/models.go @@ -70,7 +70,7 @@ type User struct { type App struct { ID uint - UserId uint `validate:"required"` + UserId uint `validate:"required"` User User Name string `validate:"required"` Description string @@ -81,7 +81,7 @@ type App struct { type AppPermission struct { ID uint - AppId uint `validate:"required"` + AppId uint `validate:"required"` App App RequestMethod string `validate:"required"` MaxAmount int @@ -93,7 +93,7 @@ type AppPermission struct { type NostrEvent struct { ID uint - AppId uint `validate:"required"` + AppId uint `validate:"required"` App App NostrId string `validate:"required"` ReplyId string diff --git a/public/css/application.css b/public/css/application.css index 2014d6f4..57f9fef8 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -761,6 +761,16 @@ select { margin-bottom: 1.5rem; } +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + .mb-1 { margin-bottom: 0.25rem; } @@ -837,6 +847,42 @@ select { margin-top: 2rem; } +.mt-5 { + margin-top: 1.25rem; +} + +.mt-12 { + margin-top: 3rem; +} + +.mb-3 { + margin-bottom: 0.75rem; +} + +.mt-16 { + margin-top: 4rem; +} + +.mt-20 { + margin-top: 5rem; +} + +.mt-32 { + margin-top: 8rem; +} + +.mt-24 { + margin-top: 6rem; +} + +.ml-3 { + margin-left: 0.75rem; +} + +.ml-8 { + margin-left: 2rem; +} + .block { display: block; } @@ -873,6 +919,14 @@ select { height: 1.5rem; } +.h-\[56px\] { + height: 56px; +} + +.h-8 { + height: 2rem; +} + .w-1\/5 { width: 20%; } @@ -917,10 +971,34 @@ select { width: 100%; } +.w-24 { + width: 6rem; +} + +.w-40 { + width: 10rem; +} + +.w-32 { + width: 8rem; +} + +.w-20 { + width: 5rem; +} + +.w-16 { + width: 4rem; +} + .max-w-3xl { max-width: 48rem; } +.max-w-screen-lg { + max-width: 1024px; +} + .table-fixed { table-layout: fixed; } @@ -955,6 +1033,10 @@ select { grid-template-columns: repeat(6, minmax(0, 1fr)); } +.grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); +} + .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } @@ -987,6 +1069,18 @@ select { 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))); +} + +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1103,6 +1197,21 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-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)); +} + +.bg-gray-800 { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + .fill-current { fill: currentColor; } @@ -1177,6 +1286,16 @@ select { padding-right: 0.5rem; } +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + .pb-2 { padding-bottom: 0.5rem; } @@ -1213,6 +1332,22 @@ select { padding-top: 1rem; } +.pl-3 { + padding-left: 0.75rem; +} + +.pr-3 { + padding-right: 0.75rem; +} + +.pt-2 { + padding-top: 0.5rem; +} + +.pl-8 { + padding-left: 2rem; +} + .text-left { text-align: left; } @@ -1221,6 +1356,10 @@ select { text-align: center; } +.text-right { + text-align: right; +} + .font-headline { font-family: "Work Sans", "Inter var", Helvetica, Arial, sans-serif; } @@ -1271,6 +1410,10 @@ select { font-weight: 500; } +.font-semibold { + font-weight: 600; +} + .uppercase { text-transform: uppercase; } @@ -1279,6 +1422,10 @@ select { line-height: 1.625; } +.tracking-tight { + letter-spacing: -0.025em; +} + .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -1339,6 +1486,21 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-blue-700 { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); +} + +.text-purple-600 { + --tw-text-opacity: 1; + color: rgb(147 51 234 / var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } @@ -1405,11 +1567,21 @@ select { background-color: rgb(88 28 135 / var(--tw-bg-opacity)); } +.hover\:bg-gray-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + .hover\:text-gray-600:hover { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); } +.hover\:text-gray-300:hover { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1426,6 +1598,11 @@ select { --tw-ring-color: rgb(126 34 206 / 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); @@ -1465,6 +1642,16 @@ select { border-color: rgb(255 255 255 / 0.1); } + .dark\:border-gray-500 { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + } + + .dark\:border-neutral-700 { + --tw-border-opacity: 1; + border-color: rgb(64 64 64 / var(--tw-border-opacity)); + } + .dark\:border-l-gray-400 { --tw-border-opacity: 1; border-left-color: rgb(156 163 175 / var(--tw-border-opacity)); @@ -1505,6 +1692,11 @@ select { background-color: rgb(49 49 49 / var(--tw-bg-opacity)); } + .dark\:bg-gray-600 { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); + } + .dark\:text-gray-100 { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); @@ -1579,11 +1771,19 @@ select { --tw-ring-offset-color: #1f2937; } + .dark\:ring-offset-gray-700 { + --tw-ring-offset-color: #374151; + } + .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\:\[color-scheme\:dark\] { + color-scheme: dark; + } + .dark\:hover\:bg-surface-16dp:hover { --tw-bg-opacity: 1; background-color: rgb(56 56 56 / var(--tw-bg-opacity)); @@ -1598,6 +1798,10 @@ 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) { @@ -1613,6 +1817,10 @@ select { margin-top: 0px; } + .sm\:flex { + display: flex; + } + .sm\:w-\[250px\] { width: 250px; } @@ -1649,10 +1857,22 @@ select { margin-left: 0px; } + .md\:block { + display: block; + } + .md\:flex { display: flex; } + .md\:table-cell { + display: table-cell; + } + + .md\:hidden { + display: none; + } + .md\:flex-1 { flex: 1 1 0%; } @@ -1665,6 +1885,10 @@ select { grid-template-rows: repeat(1, minmax(0, 1fr)); } + .md\:p-8 { + padding: 2rem; + } + .md\:px-0 { padding-left: 0px; padding-right: 0px; @@ -1679,6 +1903,26 @@ select { padding-top: 1.5rem; padding-bottom: 1.5rem; } + + .md\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .md\:py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } + + .md\:px-12 { + padding-left: 3rem; + padding-right: 3rem; + } + + .md\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } } @media (min-width: 1024px) { @@ -1686,6 +1930,10 @@ select { width: 66.666667%; } + .lg\:p-8 { + padding: 2rem; + } + .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; @@ -1695,4 +1943,9 @@ select { padding-top: 3rem; padding-bottom: 3rem; } + + .lg\:px-0 { + padding-left: 0px; + padding-right: 0px; + } } \ No newline at end of file diff --git a/views/404.html b/views/404.html index 720869d6..d87030b7 100644 --- a/views/404.html +++ b/views/404.html @@ -1,7 +1,7 @@ {{define "body"}}

404 Page Not Found

@@ -9,5 +9,4 @@

404 Page Not F

- {{end}} - +{{end}} diff --git a/views/about.html b/views/about.html index fb30fd29..030b4501 100644 --- a/views/about.html +++ b/views/about.html @@ -1,7 +1,7 @@ {{define "body"}}

tl;dr

@@ -11,26 +11,26 @@

tl;dr

How to connect your app?

  1. - Create a new app connection: + Create a new app connection

    Enable the application by creating a permissioned connection to your wallet. This access can be revoked at any time.

  2. - Connect your app: + Connect your app

    Connect your application by adding the connection secret. Either by scanning the connect QR code or clicking a link.

  3. - Done: + Done

    Zapp and Boost! Your lightning wallet is available where you need it.
    @@ -41,7 +41,7 @@

    How to connect

FAQs

@@ -92,9 +92,8 @@

Can I run my own

-

For developers

Nostr Wallet Connect is an open protocol enabling applications to interact @@ -104,7 +103,7 @@

For developers app.

-

- {{end}} - +{{end}} diff --git a/views/apps/create.html b/views/apps/create.html index 8c674b5e..ef735c12 100644 --- a/views/apps/create.html +++ b/views/apps/create.html @@ -1,7 +1,7 @@ {{define "body"}}

{{.Name}}

diff --git a/views/apps/index.html b/views/apps/index.html index 4d7374fe..e749eb20 100644 --- a/views/apps/index.html +++ b/views/apps/index.html @@ -1,13 +1,10 @@ {{define "body"}} -
-
-

Your app connections

+
+

Connected apps

 Your app conne height="24" class="mr-2 text-white" /> - New connection + Connect app
-

-
Your app conne class="text-xs text-gray-900 uppercase bg-gray-50 dark:bg-surface-08dp dark:text-white rounded-t-lg" > - - - + + + - + {{if not .Apps}} - + {{else}} {{range .Apps}} - + - - @@ -64,6 +59,5 @@

Your app conne

NameLast AccessedName
- No active connections at the moment + No apps connected yet.
{{.Name}} + + Details
-
{{end}} diff --git a/views/apps/new.html b/views/apps/new.html index d6a9eb70..39395d3c 100644 --- a/views/apps/new.html +++ b/views/apps/new.html @@ -1,118 +1,120 @@ {{define "body"}} -
-

- {{if .Name}} - Connect to {{.Name}} - {{else}} - Connect a new app - {{end}} -

- - - -
-
- - - - - -

- Name of the app or purpose of the connection -

- - - - -
- -
-

Authorise the new app to

- -
-
-
    - {{range $key, $value := .RequestMethodHelper}} - + {{ end }} +
+
+ +
+ + Add connection expiry time
-
- {{ if .Pubkey }} -

- ⚠️ Only connect with apps you trust! +

+ + {{if .User.Email}} +

+ You're logged in as {{.User.Email}}

- {{ end }} + {{end}} +
-
- {{ if not .Pubkey }} +
+ {{ if not .Pubkey }} Cancel - {{ end }} - - -
- - - {{if .User.Email}} -

- You're logged in as {{.User.Email}}
-

- {{end}} -
+ {{ end }} + +
+ -{{end}} +{{end}} \ No newline at end of file