From a75c32fa673f67ebf6e3871b2efb0c8ec1dd43d0 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 22 Mar 2024 17:16:32 +0100 Subject: [PATCH] :recycle: Refactor css --- frontend/src/app/main/ui/auth/common.scss | 114 +++++++----------- frontend/src/app/main/ui/auth/login.cljs | 20 +-- frontend/src/app/main/ui/auth/recovery.cljs | 5 +- .../app/main/ui/auth/recovery_request.cljs | 3 +- frontend/src/app/main/ui/auth/register.cljs | 11 +- frontend/src/app/main/ui/viewer/login.cljs | 14 ++- 6 files changed, 72 insertions(+), 95 deletions(-) diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss index a6b9e2f74..0075c7f14 100644 --- a/frontend/src/app/main/ui/auth/common.scss +++ b/frontend/src/app/main/ui/auth/common.scss @@ -19,28 +19,24 @@ } .separator { - border-color: $db-quaternary; + border-color: var(--modal-separator-backogrund-color); margin: 0; } -.error-wrapper { - padding-block-end: $s-8; -} - .auth-title { @include bigTitleTipography; - color: $df-primary; + color: var(--title-foreground-color-hover); } .auth-subtitle { - font-size: $fs-14; - color: $df-secondary; + @include smallTitleTipography; + color: var(--title-foreground-color); } .auth-tagline { @include smallTitleTipography; margin: 0; - color: $df-secondary; + color: var(--title-foreground-color); } .form-field { @@ -50,46 +46,32 @@ } .buttons-stack { - display: flex; - flex-direction: column; + display: grid; gap: $s-8; - - button, - :global(.btn-primary) { - @extend .button-primary; - font-size: $fs-11; - height: $s-40; - text-transform: uppercase; - width: 100%; - } } -.link-entry { +.login-button, +.login-ldap-button { + @extend .button-primary; + @include uppercaseTitleTipography; + height: $s-40; + width: 100%; +} + +.demo-account, +.go-back { display: flex; flex-direction: column; gap: $s-12; - border-top: $s-1 solid $db-quaternary; - - span { - text-align: center; - font-size: $fs-14; - color: $df-secondary; - } - a { - @extend .button-secondary; - height: $s-40; - text-transform: uppercase; - font-size: $fs-11; - } -} - -.go-back { - border-top: none; -} - -.demo-account { padding: 0; - border-top: none; + border-block-start: none; +} + +.demo-account-link, +.go-back-link { + @extend .button-secondary; + @include uppercaseTitleTipography; + height: $s-40; } .links { @@ -98,7 +80,8 @@ } .register, -.account { +.account, +.recovery-request { display: flex; justify-content: center; gap: $s-8; @@ -106,21 +89,23 @@ } .register-text, -.account-text { +.account-text, +.recovery-text { + @include smallTitleTipography; text-align: right; - font-size: $fs-14; - color: $df-secondary; + color: var(--title-foreground-color); } .register-link, -.account-link { +.account-link, +.recovery-link, +.forgot-pass-link { + @include smallTitleTipography; text-align: left; background-color: transparent; border: none; display: inline; - font-size: $fs-14; - color: $da-primary; - font-weight: $fw400; + color: var(--link-foreground-color); &:hover { text-decoration: underline; @@ -130,42 +115,33 @@ .forgot-password { display: flex; justify-content: flex-end; - a { - font-size: $fs-14; - color: $da-primary; - font-weight: $fw400; - } - &:hover { - text-decoration: underline; - } } .submit-btn, .register-btn, .recover-btn { @extend .button-primary; - font-size: $fs-11; + @include uppercaseTitleTipography; height: $s-40; - text-transform: uppercase; width: 100%; } .login-btn { - border-radius: $br-8; - font-size: $fs-14; + @include smallTitleTipography; display: flex; align-items: center; gap: $s-6; width: 100%; - background-color: $db-tertiary; - color: var(--app-white); + border-radius: $br-8; + background-color: var(--button-secondary-background-color-rest); + color: var(--button-foreground-color-focus); span { - padding-top: $s-2; + padding-block-start: $s-2; } &:hover { - color: var(--app-white); - background-color: $db-quaternary; + color: var(--button-foreground-color-focus); + background-color: var(--button-secondary-background-color-hover); } } @@ -173,7 +149,3 @@ display: flex; gap: $s-8; } - -.banner { - margin: $s-16 0; -} diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs index 530dc2142..79a8c599a 100644 --- a/frontend/src/app/main/ui/auth/login.cljs +++ b/frontend/src/app/main/ui/auth/login.cljs @@ -38,10 +38,9 @@ (mf/defc demo-warning {::mf/props :obj} [] - [:div {:class (stl/css :banner)} - [:& context-notification - {:type :warning - :content (tr "auth.demo-warning")}]]) + [:& context-notification + {:type :warning + :content (tr "auth.demo-warning")}]) (defn- login-with-oidc [event provider params] @@ -166,12 +165,11 @@ [:* (when-let [message @error] - [:div {:class (stl/css :error-wrapper)} - [:& context-notification - {:type :warning - :content message - :data-test "login-banner" - :role "alert"}]]) + [:& context-notification + {:type :warning + :content message + :data-test "login-banner" + :role "alert"}]) [:& fm/form {:on-submit on-submit :class (stl/css :login-form) @@ -195,6 +193,7 @@ (contains? cf/flags :login-with-password))) [:div {:class (stl/css :fields-row :forgot-password)} [:& lk/link {:action on-recovery-request + :class (stl/css :forgot-pass-link) :data-test "forgot-password"} (tr "auth.forgot-password")]]) @@ -209,6 +208,7 @@ (when (contains? cf/flags :login-with-ldap) [:> fm/submit-button* {:label (tr "auth.login-with-ldap-submit") + :class (stl/css :login-ldap-button) :on-click on-submit-ldap}])]]])) (mf/defc login-buttons diff --git a/frontend/src/app/main/ui/auth/recovery.cljs b/frontend/src/app/main/ui/auth/recovery.cljs index a17ab8b0e..85657eef6 100644 --- a/frontend/src/app/main/ui/auth/recovery.cljs +++ b/frontend/src/app/main/ui/auth/recovery.cljs @@ -93,6 +93,7 @@ [:& recovery-form {:params params}] [:div {:class (stl/css :links)} - [:div {:class (stl/css :link-entry :go-back)} - [:a {:on-click #(st/emit! (rt/nav :auth-login))} + [:div {:class (stl/css :go-back)} + [:a {:on-click #(st/emit! (rt/nav :auth-login)) + :class (stl/css :go-back-link)} (tr "profile.recovery.go-to-login")]]]]) diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs index 4e2bbff99..b2d116daf 100644 --- a/frontend/src/app/main/ui/auth/recovery_request.cljs +++ b/frontend/src/app/main/ui/auth/recovery_request.cljs @@ -103,7 +103,8 @@ [:& recovery-form {:params params :on-success-callback on-success-callback}] [:hr {:class (stl/css :separator)}] - [:div {:class (stl/css :link-entry :go-back)} + [:div {:class (stl/css :go-back)} [:& lk/link {:action go-back + :class (stl/css :go-back-link) :data-test "go-back-link"} (tr "labels.go-back")]]])) diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs index 51327de3f..633ac1177 100644 --- a/frontend/src/app/main/ui/auth/register.cljs +++ b/frontend/src/app/main/ui/auth/register.cljs @@ -153,7 +153,6 @@ [:div {:class (stl/css :links)} [:div {:class (stl/css :account)} [:span {:class (stl/css :account-text)} (tr "auth.already-have-account") " "] - [:& lk/link {:action #(st/emit! (rt/nav :auth-login {} params)) :class (stl/css :account-link) :data-test "login-here-link"} @@ -162,8 +161,9 @@ (when (contains? cf/flags :demo-users) [:* [:hr {:class (stl/css :separator)}] - [:div {:class (stl/css :link-entry :demo-account)} - [:& lk/link {:action #(st/emit! (du/create-demo-profile))} + [:div {:class (stl/css :demo-account)} + [:& lk/link {:action #(st/emit! (du/create-demo-profile)) + :class (stl/css :demo-account-link)} (tr "auth.create-demo-account")]]])]]) ;; --- PAGE: register validation @@ -270,8 +270,9 @@ [:& register-validate-form {:params params}] [:div {:class (stl/css :links)} - [:div {:class (stl/css :link-entry :go-back)} - [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} {}))} + [:div {:class (stl/css :go-back)} + [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} {})) + :class (stl/css :go-back-link)} (tr "labels.go-back")]]]]) (mf/defc register-success-page diff --git a/frontend/src/app/main/ui/viewer/login.cljs b/frontend/src/app/main/ui/viewer/login.cljs index 3649d0195..1a1e692dc 100644 --- a/frontend/src/app/main/ui/viewer/login.cljs +++ b/frontend/src/app/main/ui/viewer/login.cljs @@ -78,19 +78,21 @@ :on-click close} i/close]] [:div {:class (stl/css :modal-content)} - (case current-section :login [:div {:class (stl/css :form-container)} [:& login-methods {:on-success-callback success-login :origin :viewer}] [:div {:class (stl/css :links)} - [:div {:class (stl/css :link-entry :recovery-request)} + [:div {:class (stl/css :recovery-request)} [:a {:on-click set-section + :class (stl/css :recovery-link) :data-value "recovery-request"} (tr "auth.forgot-password")]] - [:div {:class (stl/css :link-entry :register)} - [:span (tr "auth.register") " "] + [:div {:class (stl/css :register)} + [:span {:class (stl/css :register-text)} + (tr "auth.register") " "] [:a {:on-click set-section + :class (stl/css :register-link) :data-value "register"} (tr "auth.register-submit")]]]] @@ -98,7 +100,7 @@ [:div {:class (stl/css :form-container)} [:& register-methods {:on-success-callback success-register}] [:div {:class (stl/css :links)} - [:div {:class (stl/css :link-entry :account)} + [:div {:class (stl/css :account)} [:span (tr "auth.already-have-account") " "] [:a {:on-click set-section :data-value "login"} @@ -109,7 +111,7 @@ [:& register-validate-form {:params {:token @register-token} :on-success-callback success-email-sent}] [:div {:class (stl/css :links)} - [:div {:class (stl/css :link-entry :register)} + [:div {:class (stl/css :register)} [:a {:on-click set-section :data-value "register"} (tr "labels.go-back")]]]]