♻️ Refactor css

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;
-}

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

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")]]]])

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")]]]))

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

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")]]]]