From a5e8c0d8a9017634630e079bd857acafea5de4d9 Mon Sep 17 00:00:00 2001 From: Mia Arh Date: Fri, 5 Mar 2021 18:30:52 +0100 Subject: [PATCH 1/9] Redesign all auth forms and background --- auth/assets/public/style.css | 57 +++++-- .../templates/authorized-clients.html.tpl | 49 +++--- .../assets/templates/change-password.html.tpl | 37 ++--- auth/assets/templates/error-internal.html.tpl | 6 +- auth/assets/templates/inc_footer.html.tpl | 20 ++- auth/assets/templates/inc_header.html.tpl | 5 +- auth/assets/templates/inc_nav.html.tpl | 14 +- auth/assets/templates/login.html.tpl | 56 +++---- auth/assets/templates/logout.html.tpl | 10 +- .../oauth2-authorize-client.html.tpl | 32 ++-- .../password-reset-requested.html.tpl | 18 +-- .../pending-email-confirmation.html.tpl | 16 +- auth/assets/templates/profile.html.tpl | 114 +++++++------- .../templates/request-password-reset.html.tpl | 21 +-- auth/assets/templates/reset-password.html.tpl | 25 +-- auth/assets/templates/scenarios.yaml | 62 +++++++- auth/assets/templates/sessions.html.tpl | 142 +++++++----------- auth/assets/templates/signup.html.tpl | 72 ++++----- 18 files changed, 404 insertions(+), 352 deletions(-) diff --git a/auth/assets/public/style.css b/auth/assets/public/style.css index 0e6b8b653..158282bbe 100644 --- a/auth/assets/public/style.css +++ b/auth/assets/public/style.css @@ -1,6 +1,8 @@ :root { - --primary: #568ba2; + --primary: #4D7281; --primary-hover: #497689; + --light: #E4E9EF; + --danger: #E54122; } html { @@ -20,6 +22,8 @@ body { padding-top: 150px; padding-bottom: 100px; background: rgb(17, 25, 31); + font-family: 'Nunito', sans-serif; + } body::before { @@ -29,11 +33,10 @@ body::before { right: 0; top: 0; bottom: 0; - background: rgba(255, 255, 255, 0.23); } .logo { - height: 30px; + height: 45px; } .version { @@ -41,15 +44,23 @@ body::before { right: 0; } +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, label, .btn, a { + font-weight: 600; +} + /* over-ride default variables colors */ -a { - color: var(--primary); +a, label, .text-primary { + color: var(--primary) !important; } a:hover { color: var(--primary-hover); } +.text-danger { + color: var(--danger) !important; +} + .card, .card-header { border-radius: 1rem; @@ -66,10 +77,27 @@ a:hover { border-color: var(--primary-hover); } +.btn-light, +.bg-light, +.badge-light { + background-color: var(--light)!important; + border-color: var(--light); +} + +.btn-danger, +.bg-danger { + background-color: var(--danger)!important; + border-color: var(--danger); +} + +.btn-lg { + font-size: 1rem; +} + /* form styling*/ -.form-control, -.input-group-text { - border-radius: 0; +.form-control { + border: 2px solid var(--light); + padding: 1.25rem 0.75rem; } .form-control:focus { @@ -79,6 +107,17 @@ a:hover { .auth { width: 100%; - max-width: 750px; + max-width: 650px; margin: auto; } + +.footer { + bottom: 0; + z-index: -1; +} + +/* position bootstrap icons on buttons centrally */ +[class^="bi-"]::before, [class*=" bi-"]::before { + vertical-align: middle; + line-height: 1.6; +} diff --git a/auth/assets/templates/authorized-clients.html.tpl b/auth/assets/templates/authorized-clients.html.tpl index 8f627eb6c..9a01c1c34 100644 --- a/auth/assets/templates/authorized-clients.html.tpl +++ b/auth/assets/templates/authorized-clients.html.tpl @@ -1,42 +1,37 @@ {{ template "inc_header.html.tpl" . }} -
+
{{ template "inc_alerts.html.tpl" .alerts }} +

Authorized clients

-

Authorized clients

{{ .csrfField }} {{ range .authorizedClients}} -
-
-
- {{ .Name }} -
- Authorized on - -
-
-
- -
-
-
+
+
{{ .Name }}
+
+ Authorized on + +
+ +
{{ else }}
No authorized clients found diff --git a/auth/assets/templates/change-password.html.tpl b/auth/assets/templates/change-password.html.tpl index deeae3fc1..0d1770cce 100644 --- a/auth/assets/templates/change-password.html.tpl +++ b/auth/assets/templates/change-password.html.tpl @@ -1,22 +1,23 @@ {{ template "inc_header.html.tpl" . }} -
+
{{ template "inc_alerts.html.tpl" .alerts }} -

Change your password

+

Change your password

{{ .csrfField }} {{ if .form.error }} -