Merge pull request #4320 from penpot/eva-login-tagline

♻️ Add tagline and some refactor to login page

frontend/src/app/main/ui/auth.cljs

@@ -30,7 +30,7 @@
          [:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
 
        (when show-all?
-         [:span (tr "labels.and")])
+         [:span (dm/str "  " (tr "labels.and") "  ")])
 
        (when show-privacy?
          [:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])])))
@@ -45,11 +45,12 @@
       (dom/set-html-title (tr "title.default")))
 
     [:main {:class (stl/css :auth-section)}
+     [:a {:href "#/" :class (stl/css :logo-btn)} i/logo]
      [:div {:class (stl/css :login-illustration)}
       i/login-illustration]
 
      [:section {:class (stl/css :auth-content)}
-      [:a {:href "#/" :class (stl/css :logo-btn)} i/logo]
+
       (case section
         :auth-register
         [:& register-page {:params params}]
@@ -69,6 +70,5 @@
         :auth-recovery
         [:& recovery-page {:params params}])
 
-      (when (or (= section :auth-login)
-                (= section :auth-register))
+      (when (= section :auth-register)
         [:& terms-login])]]))

frontend/src/app/main/ui/auth.scss

@@ -7,6 +7,7 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .auth-section {
+  position: relative;
   align-items: center;
   background: var(--panel-background-color);
   display: grid;
@@ -43,8 +44,9 @@
 
 .auth-content {
   grid-column: 4 / 6;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: $s-24;
   height: fit-content;
   max-width: $s-412;
   padding-bottom: $s-8;
@@ -53,6 +55,9 @@
 }
 
 .logo-btn {
+  position: absolute;
+  top: $s-20;
+  left: $s-20;
   display: flex;
   justify-content: flex-start;
   margin-bottom: $s-52;
@@ -68,8 +73,6 @@
 
 .terms-login {
   font-size: $fs-11;
-  position: absolute;
-  bottom: 0;
   width: 100%;
   display: flex;
   gap: $s-4;
@@ -77,7 +80,10 @@
 
   a {
     font-weight: $fw700;
-    color: $df-secondary;
+    color: $da-primary;
+    &:hover {
+      text-decoration: underline;
+    }
   }
   span {
     border-bottom: $s-1 solid transparent;

frontend/src/app/main/ui/auth/common.scss

@@ -6,36 +6,37 @@
 
 @use "common/refactor/common-refactor.scss" as *;
 
-.auth-form {
+.auth-form-wrapper {
   width: 100%;
-  padding-block-end: $s-16;
-
+  padding-block-end: 0;
+  display: grid;
+  gap: $s-24;
   form {
     display: flex;
     flex-direction: column;
     gap: $s-12;
-    margin-block-end: $s-24;
   }
 }
 
 .separator {
-  border-color: $db-quaternary;
-  margin: $s-24 0;
-}
-
-.error-wrapper {
-  padding-block-end: $s-8;
+  border-color: var(--modal-separator-backogrund-color);
+  margin: 0;
 }
 
 .auth-title {
   @include bigTitleTipography;
-  color: $df-primary;
+  color: var(--title-foreground-color-hover);
 }
 
 .auth-subtitle {
-  margin-top: $s-24;
-  font-size: $fs-14;
-  color: $df-secondary;
+  @include smallTitleTipography;
+  color: var(--title-foreground-color);
+}
+
+.auth-tagline {
+  @include smallTitleTipography;
+  margin: 0;
+  color: var(--title-foreground-color);
 }
 
 .form-field {
@@ -45,77 +46,102 @@
 }
 
 .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;
-  padding: $s-24 0;
-  border-top: $s-1 solid $db-quaternary;
+  padding: 0;
+  border-block-start: none;
+}
 
-  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;
-  }
-  &.register a {
-    @extend .button-primary;
+.demo-account-link,
+.go-back-link {
+  @extend .button-secondary;
+  @include uppercaseTitleTipography;
+  height: $s-40;
+}
+
+.links {
+  display: grid;
+  gap: $s-24;
+}
+
+.register,
+.account,
+.recovery-request {
+  display: flex;
+  justify-content: center;
+  gap: $s-8;
+  padding: 0;
+}
+
+.register-text,
+.account-text,
+.recovery-text {
+  @include smallTitleTipography;
+  text-align: right;
+  color: var(--title-foreground-color);
+}
+
+.register-link,
+.account-link,
+.recovery-link,
+.forgot-pass-link {
+  @include smallTitleTipography;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  display: inline;
+  color: var(--link-foreground-color);
+
+  &:hover {
+    text-decoration: underline;
   }
 }
 
 .forgot-password {
   display: flex;
   justify-content: flex-end;
-  a {
-    font-size: $fs-14;
-    color: $df-secondary;
-    font-weight: $fw400;
-  }
 }
 
 .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%;
-
+  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);
+    color: var(--button-foreground-color-focus);
+    background-color: var(--button-secondary-background-color-hover);
   }
 }
 
@@ -123,39 +149,3 @@
   display: flex;
   gap: $s-8;
 }
-
-.btn-google-auth {
-  color: var(--google-login-foreground);
-  background-color: var(--google-login-background);
-  &:hover {
-    background: var(--google-login-background-hover);
-  }
-}
-
-.btn-github-auth {
-  color: var(--github-login-foreground);
-  background: var(--github-login-background);
-  &:hover {
-    background: var(--github-login-background-hover);
-  }
-}
-
-.btn-oidc-auth {
-  color: var(--oidc-login-foreground);
-  background: var(--oidc-login-background);
-  &:hover {
-    background: var(--oidc-login-background-hover);
-  }
-}
-
-.btn-gitlab-auth {
-  color: var(--gitlab-login-foreground);
-  background: var(--gitlab-login-background);
-  &:hover {
-    background: var(--gitlab-login-background-hover);
-  }
-}
-
-.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,14 +165,15 @@
 
     [:*
      (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 :form form}
+     [:& fm/form {:on-submit on-submit
+                  :class (stl/css :login-form)
+                  :form form}
       [:div {:class (stl/css :fields-row)}
        [:& fm/input
         {:name :email
@@ -193,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")]])
 
@@ -207,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
@@ -255,11 +257,11 @@
            (when (k/enter? event)
              (login-oidc event))))]
     (when (contains? cf/flags :login-with-oidc)
-      [:div {:class (stl/css :link-entry :link-oidc)}
-       [:a {:tab-index "0"
-            :on-key-down handle-key-down
-            :on-click login-oidc}
-        (tr "auth.login-with-oidc-submit")]])))
+      [:button {:tab-index "0"
+                :class (stl/css :link-entry :link-oidc)
+                :on-key-down handle-key-down
+                :on-click login-oidc}
+       (tr "auth.login-with-oidc-submit")])))
 
 (mf/defc login-methods
   [{:keys [params on-success-callback origin] :as props}]
@@ -282,35 +284,29 @@
   [{:keys [params] :as props}]
   (let [go-register
         (mf/use-fn
-         #(st/emit! (rt/nav :auth-register {} params)))
+         #(st/emit! (rt/nav :auth-register {} params)))]
 
-        on-create-demo-profile
-        (mf/use-fn
-         #(st/emit! (du/create-demo-profile)))]
-
-    [:div {:class (stl/css :auth-form)}
+    [:div {:class (stl/css :auth-form-wrapper)}
      [:h1 {:class (stl/css :auth-title)
-           :data-test "login-title"} (tr "auth.login-title")]
+           :data-test "login-title"} (tr "auth.login-account-title")]
+
+     [:p {:class (stl/css :auth-tagline)}
+      (tr "auth.login-tagline")]
 
      (when (contains? cf/flags :demo-warning)
        [:& demo-warning])
 
-     [:hr {:class (stl/css :separator)}]
-
      [:& login-methods {:params params}]
 
+     [:hr {:class (stl/css :separator)}]
+
      [:div {:class (stl/css :links)}
       (when (contains? cf/flags :registration)
-        [: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") " "]
          [:& lk/link {:action go-register
+                      :class (stl/css :register-link)
                       :data-test "register-submit"}
-          (tr "auth.register-submit")]])]
-
-     (when (contains? cf/flags :demo-users)
-       [:div {:class (stl/css :link-entry :demo-account)}
-        [:span (tr "auth.create-demo-profile") " "]
-        [:& lk/link {:action on-create-demo-profile
-                     :data-test "demo-account-link"}
-         (tr "auth.create-demo-account")]])]))
+          (tr "auth.register-submit")]])]]))
 

frontend/src/app/main/ui/auth/recovery.cljs

@@ -61,7 +61,9 @@
                                        (fm/validate-not-empty :password-1 (tr "auth.password-not-empty"))
                                        (fm/validate-not-empty :password-2 (tr "auth.password-not-empty"))]
                           :initial params)]
-    [:& fm/form {:on-submit on-submit :form form}
+    [:& fm/form {:on-submit on-submit
+                 :class (stl/css :recovery-form)
+                 :form form}
      [:div {:class (stl/css :fields-row)}
       [:& fm/input {:type "password"
                     :name :password-1
@@ -84,13 +86,14 @@
 
 (mf/defc recovery-page
   [{:keys [params] :as props}]
-  [:div {:class (stl/css :auth-form)}
+  [:div {:class (stl/css :auth-form-wrapper)}
    [:h1 {:class (stl/css :auth-title)} "Forgot your password?"]
    [:div {:class (stl/css :auth-subtitle)} "Please enter your new password"]
    [:hr {:class (stl/css :separator)}]
    [:& recovery-form {:params params}]
 
    [:div {:class (stl/css :links)}
-    [:div {:class (stl/css :link-entry)}
-     [: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

@@ -76,6 +76,7 @@
              (st/emit! (du/request-profile-recovery params)))))]
 
     [:& fm/form {:on-submit on-submit
+                 :class (stl/css :recovery-request-form)
                  :form form}
      [:div {:class (stl/css :fields-row)}
       [:& fm/input {:name :email
@@ -95,14 +96,15 @@
   [{:keys [params on-success-callback go-back-callback] :as props}]
   (let [default-go-back #(st/emit! (rt/nav :auth-login))
         go-back (or go-back-callback default-go-back)]
-    [:div {:class (stl/css :auth-form)}
+    [:div {:class (stl/css :auth-form-wrapper)}
      [:h1 {:class (stl/css :auth-title)} (tr "auth.recovery-request-title")]
      [:div {:class (stl/css :auth-subtitle)} (tr "auth.recovery-request-subtitle")]
      [:hr {:class (stl/css :separator)}]
 
      [:& recovery-form {:params params :on-success-callback on-success-callback}]
-
-     [:div {:class (stl/css :link-entry)}
+     [:hr {:class (stl/css :separator)}]
+     [: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

@@ -132,19 +132,18 @@
   [{:keys [params on-success-callback]}]
   [:*
    (when login/show-alt-login-buttons?
-     [:*
-      [:hr {:class (stl/css :separator)}]
-      [:& login/login-buttons {:params params}]])
+     [:& login/login-buttons {:params params}])
    [:hr {:class (stl/css :separator)}]
    [:& register-form {:params params :on-success-callback on-success-callback}]])
 
 (mf/defc register-page
   {::mf/props :obj}
   [{:keys [params]}]
-  [:div {:class (stl/css :auth-form)}
+  [:div {:class (stl/css :auth-form-wrapper)}
    [:h1 {:class (stl/css :auth-title)
          :data-test "registration-title"} (tr "auth.register-title")]
-   [:div {:class (stl/css :auth-subtitle)} (tr "auth.register-subtitle")]
+   [:p {:class (stl/css :auth-tagline)}
+    (tr "auth.login-tagline")]
 
    (when (contains? cf/flags :demo-warning)
      [:& login/demo-warning])
@@ -152,18 +151,20 @@
    [:& register-methods {:params params}]
 
    [:div {:class (stl/css :links)}
-    [:div {:class (stl/css :link-entry :account)}
-     [:span (tr "auth.already-have-account") " "]
-
+    [: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"}
       (tr "auth.login-here")]]
 
     (when (contains? cf/flags :demo-users)
-      [:div {:class (stl/css :link-entry :demo-users)}
-       [:span (tr "auth.create-demo-profile") " "]
-       [:& lk/link {:action  #(st/emit! (du/create-demo-profile))}
-        (tr "auth.create-demo-account")]])]])
+      [:*
+       [:hr {:class (stl/css :separator)}]
+       [: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
 
@@ -228,7 +229,8 @@
                   (rx/subs! on-success
                             (partial handle-register-error form))))))]
 
-    [:& fm/form {:on-submit on-submit :form form}
+    [:& fm/form {:on-submit on-submit :form form
+                 :class (stl/css :register-validate-form)}
      [:div {:class (stl/css :fields-row)}
       [:& fm/input {:name :fullname
                     :label (tr "auth.fullname")
@@ -258,7 +260,7 @@
 
 (mf/defc register-validate-page
   [{:keys [params]}]
-  [:div {:class (stl/css :auth-form)}
+  [:div {:class (stl/css :auth-form-wrapper)}
    [:h1 {:class (stl/css :auth-title)
          :data-test "register-title"} (tr "auth.register-title")]
    [:div {:class (stl/css :auth-subtitle)} (tr "auth.register-subtitle")]
@@ -268,13 +270,14 @@
    [:& 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
   [{:keys [params]}]
-  [:div {:class (stl/css :auth-form :register-success)}
+  [:div {:class (stl/css :auth-form-wrapper :register-success)}
    [:div {:class (stl/css :notification-icon)} i/icon-verify]
    [:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]
    [:div {:class (stl/css :notification-text-email)} (:email params "")]

frontend/src/app/main/ui/components/forms.scss

@@ -50,7 +50,6 @@
   cursor: pointer;
   color: var(--modal-title-foreground-color);
   text-transform: uppercase;
-  margin-bottom: $s-8;
   input {
     @extend .input-element;
     color: var(--input-foreground-color-active);
@@ -144,8 +143,9 @@
 
 .hint {
   @include bodySmallTypography;
-  color: var(--modal-text-foreground-color);
   width: 99%;
+  margin-block-start: $s-8;
+  color: var(--modal-text-foreground-color);
 }
 
 .checkbox {

frontend/src/app/main/ui/dashboard/team_form.scss

@@ -37,6 +37,7 @@
 
 .group-name-input {
   @extend .input-element-label;
+  margin-bottom: $s-8;
   label {
     @include flexColumn;
     @include bodySmallTypography;

frontend/src/app/main/ui/onboarding/questions.scss

@@ -127,6 +127,7 @@
   height: $s-32;
   width: calc(100% - $s-24);
   margin-inline-start: $s-24;
+  margin-block-end: $s-8;
 }
 
 // STEP-4

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)}
+           [: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)}
-            [: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)}
+           [: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)}
+           [:div {:class (stl/css :register)}
             [:a {:on-click set-section
                  :data-value "register"}
              (tr "labels.go-back")]]]]

frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss

@@ -49,6 +49,7 @@
 }
 .input-wrapper {
   @extend .input-with-label;
+  margin-bottom: $s-8;
 }
 .action-buttons {
   @extend .modal-action-btns;