diff --git a/frontend/resources/images/icons/brand-github.svg b/frontend/resources/images/icons/brand-github.svg
index 91ce17a609..cfb34953e0 100644
--- a/frontend/resources/images/icons/brand-github.svg
+++ b/frontend/resources/images/icons/brand-github.svg
@@ -1,3 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/brand-gitlab.svg b/frontend/resources/images/icons/brand-gitlab.svg
index 04993577bd..591427ec6e 100644
--- a/frontend/resources/images/icons/brand-gitlab.svg
+++ b/frontend/resources/images/icons/brand-gitlab.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/brand-google.svg b/frontend/resources/images/icons/brand-google.svg
index dba95de0fe..eb61aab348 100644
--- a/frontend/resources/images/icons/brand-google.svg
+++ b/frontend/resources/images/icons/brand-google.svg
@@ -1 +1 @@
-
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/brand-openid.svg b/frontend/resources/images/icons/brand-openid.svg
index a335b66642..28dd05ed85 100644
--- a/frontend/resources/images/icons/brand-openid.svg
+++ b/frontend/resources/images/icons/brand-openid.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs
index 61fe0271b2..636be2cd6b 100644
--- a/frontend/src/app/main/ui/auth.cljs
+++ b/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])]]))
diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
index f993d5b7f8..3c81a7c43c 100644
--- a/frontend/src/app/main/ui/auth.scss
+++ b/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;
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
index 23e2ba11ca..0075c7f144 100644
--- a/frontend/src/app/main/ui/auth/common.scss
+++ b/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;
-}
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index cfd9d1d11f..79a8c599a5 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,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")]])]]))
diff --git a/frontend/src/app/main/ui/auth/recovery.cljs b/frontend/src/app/main/ui/auth/recovery.cljs
index 1425d9d1e6..85657eef6b 100644
--- a/frontend/src/app/main/ui/auth/recovery.cljs
+++ b/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")]]]])
diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs
index d1d72ed2dc..b2d116daf6 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.cljs
+++ b/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")]]]))
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 1143d59281..633ac1177c 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/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 "")]
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 53db074934..d29571542a 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/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 {
diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss
index 2545950f8e..d94cb4c285 100644
--- a/frontend/src/app/main/ui/dashboard/team_form.scss
+++ b/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;
diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss
index c225e3ae65..1496215ebc 100644
--- a/frontend/src/app/main/ui/onboarding/questions.scss
+++ b/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
diff --git a/frontend/src/app/main/ui/viewer/login.cljs b/frontend/src/app/main/ui/viewer/login.cljs
index a4f2c2f650..1a1e692dcf 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)}
+ [: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")]]]]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
index aeafdfecad..1756829e34 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/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;
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index b94cd8fb49..dd5e69fea6 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -58,8 +58,12 @@ msgid "auth.login-submit"
msgstr "Login"
#: src/app/main/ui/auth/login.cljs
-msgid "auth.login-title"
-msgstr "Great to see you again!"
+msgid "auth.login-account-title"
+msgstr "Log into my account"
+
+#: src/app/main/ui/auth/login.cljs
+msgid "auth.login-tagline"
+msgstr "Penpot is the free open-source design tool for Design and Code collaboration"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-github-submit"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index cec823c043..601bd792f4 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -61,8 +61,12 @@ msgid "auth.login-submit"
msgstr "Entrar"
#: src/app/main/ui/auth/login.cljs
-msgid "auth.login-title"
-msgstr "¡Un placer verte de nuevo!"
+msgid "auth.login-account-title"
+msgstr "Entrar en mi cuenta"
+
+#: src/app/main/ui/auth/login.cljs
+msgid "auth.login-tagline"
+msgstr "Penpot es la herramienta de diseño libre y open-source para la colaboración entre Diseño y Código"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-github-submit"