diff --git a/CHANGES.md b/CHANGES.md index 79fce9c8c..7ed20e4f2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ ### :sparkles: New features - Set an artboard as the file thumbnail [Taiga #1526](https://tree.taiga.io/project/penpot/us/1526) +- Social login redesign [Taiga #2974](https://tree.taiga.io/project/penpot/task/2974) - Add border radius to our artboars [Taiga #2056](https://tree.taiga.io/project/penpot/us/2056) - Allow send multiple team invitations at once [Taiga #2798](https://tree.taiga.io/project/penpot/us/2798) - Persist color palette and color picker across refresh [Taiga #1660](https://tree.taiga.io/project/penpot/issue/1660) diff --git a/frontend/resources/images/icons/brand-google.svg b/frontend/resources/images/icons/brand-google.svg new file mode 100644 index 000000000..dba95de0f --- /dev/null +++ b/frontend/resources/images/icons/brand-google.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss index fa79a3995..574343485 100644 --- a/frontend/resources/styles/main/layouts/login.scss +++ b/frontend/resources/styles/main/layouts/login.scss @@ -72,20 +72,44 @@ width: 412px; .auth-buttons { - margin-top: $size-6; + margin: $size-6 0 $size-4 0; + display: flex; + justify-content: center; + column-gap: 17px; } form { - margin: 2rem 0; + margin: 2rem 0 0.5rem 0; } } + .btn-large { + flex-grow: 1; + font-size: 14px; + font-family: sourcesanspro; + font-style: normal; + font-weight: normal; + } + .btn-google-auth { + background-color: #4285f4; + color: $color-white; margin-bottom: $size-4; text-decoration: none; + .logo { + width: 20px; + height: 20px; + margin-right: 1rem; + } + &:hover { + background-color: #2065d7; + color: $color-white; + } } .btn-gitlab-auth { + background-color: #fc6d26; + color: $color-white; margin-bottom: $size-4; text-decoration: none; @@ -94,9 +118,16 @@ height: 20px; margin-right: 1rem; } + + &:hover { + background-color: #ee5f18; + color: $color-white; + } } .btn-github-auth { + background-color: #4c4c4c; + color: $color-white; margin-bottom: $size-4; text-decoration: none; @@ -105,6 +136,15 @@ height: 20px; margin-right: 1rem; } + + &:hover { + background-color: #2f2f2f; + color: $color-white; + } + } + + .link-oidc { + text-align: center; } .separator { @@ -112,6 +152,18 @@ justify-content: center; width: 100%; text-transform: uppercase; + text-align: center; + + .text { + margin: 0 10px; + color: $color-gray-40; + } + + .line { + border: 1px solid $color-gray-10; + flex-grow: 10; + margin: auto; + } } .links { diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs index 936d5ebb0..ab371860b 100644 --- a/frontend/src/app/main/ui/auth/login.cljs +++ b/frontend/src/app/main/ui/auth/login.cljs @@ -25,8 +25,7 @@ (def show-alt-login-buttons? (or cf/google-client-id cf/gitlab-client-id - cf/github-client-id - cf/oidc-client-id)) + cf/github-client-id)) (s/def ::email ::us/email) (s/def ::password ::us/not-empty-string) @@ -136,28 +135,32 @@ [{:keys [params] :as props}] [:div.auth-buttons (when cf/google-client-id - [:a.btn-ocean.btn-large.btn-google-auth + [:a.btn-primary.btn-large.btn-google-auth {:on-click #(login-with-oauth % :google params)} + [:img.logo + {:src "/images/icons/brand-google.svg"}] (tr "auth.login-with-google-submit")]) (when cf/gitlab-client-id - [:a.btn-ocean.btn-large.btn-gitlab-auth + [:a.btn-primary.btn-large.btn-gitlab-auth {:on-click #(login-with-oauth % :gitlab params)} [:img.logo {:src "/images/icons/brand-gitlab.svg"}] (tr "auth.login-with-gitlab-submit")]) (when cf/github-client-id - [:a.btn-ocean.btn-large.btn-github-auth + [:a.btn-primary.btn-large.btn-github-auth {:on-click #(login-with-oauth % :github params)} [:img.logo {:src "/images/icons/brand-github.svg"}] - (tr "auth.login-with-github-submit")]) + (tr "auth.login-with-github-submit")])]) - (when cf/oidc-client-id - [:a.btn-ocean.btn-large.btn-github-auth - {:on-click #(login-with-oauth % :oidc params)} - (tr "auth.login-with-oidc-submit")])]) +(mf/defc login-button-oidc + [{:keys [params] :as props}] + (when cf/oidc-client-id + [:div.link-entry.link-oidc + [:a {:on-click #(login-with-oauth % :oidc params)} + (tr "auth.login-with-oidc-submit")]])) (mf/defc login-page [{:keys [params] :as props}] @@ -166,15 +169,30 @@ [:h1 {:data-test "login-title"} (tr "auth.login-title")] [:div.subtitle (tr "auth.login-subtitle")] - [:& login-form {:params params}] - (when show-alt-login-buttons? [:* - [:span.separator (tr "labels.or")] + [:span.separator + [:span.line] + [:span.text (tr "labels.continue-with")] + [:span.line]] [:div.buttons - [:& login-buttons {:params params}]]]) + [:& login-buttons {:params params}]] + [:span.separator + [:span.line] + [:span.text (tr "labels.or")] + [:span.line]]]) + + [:& login-form {:params params}] + + (when cf/oidc-client-id + [:div.links + [:& login-button-oidc]]) + + [:span.separator + [:span.line]] + [:div.links [:div.link-entry [:a {:on-click #(st/emit! (rt/nav :auth-recovery-request)) diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs index 84ed3de24..5030bbefa 100644 --- a/frontend/src/app/main/ui/auth/register.cljs +++ b/frontend/src/app/main/ui/auth/register.cljs @@ -121,14 +121,30 @@ (when (contains? @cf/flags :demo-warning) [:& demo-warning]) + (when login/show-alt-login-buttons? + [:* + [:span.separator + [:span.line] + [:span.text (tr "labels.continue-with")] + [:span.line]] + + [:div.buttons + [:& login/login-buttons {:params params}]] + + [:span.separator + [:span.line] + [:span.text (tr "labels.or")] + [:span.line]]]) + [:& register-form {:params params}] - (when login/show-alt-login-buttons? - [:* - [:span.separator (tr "labels.or")] + (when cf/oidc-client-id + [:div.links + [:& login/login-button-oidc]]) + + [:span.separator + [:span.line]] - [:div.buttons - [:& login/login-buttons {:params params}]]]) [:div.links [:div.link-entry diff --git a/frontend/translations/en.po b/frontend/translations/en.po index bcd036717..60397b970 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -67,15 +67,15 @@ msgstr "Great to see you again!" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-github-submit" -msgstr "Login with GitHub" +msgstr "GitHub" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-gitlab-submit" -msgstr "Login with Gitlab" +msgstr "Gitlab" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-google-submit" -msgstr "Login with Google" +msgstr "Google" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-ldap-submit" @@ -1231,8 +1231,11 @@ msgstr "Old password" msgid "labels.only-yours" msgstr "Only yours" +msgid "labels.continue-with" +msgstr "Continue with" + msgid "labels.or" -msgstr "or" +msgstr "or email" #: src/app/main/ui/dashboard/team.cljs, src/app/main/ui/dashboard/team.cljs msgid "labels.owner" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index f557a462b..f444b8c8d 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -69,15 +69,15 @@ msgstr "¡Un placer verte de nuevo!" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-github-submit" -msgstr "Entrar con Github" +msgstr "Github" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-gitlab-submit" -msgstr "Entrar con Gitlab" +msgstr "Gitlab" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-google-submit" -msgstr "Entrar con Google" +msgstr "Google" #: src/app/main/ui/auth/login.cljs msgid "auth.login-with-ldap-submit" @@ -1232,8 +1232,11 @@ msgstr "Contraseña anterior" msgid "labels.only-yours" msgstr "Sólo los tuyos" +msgid "labels.continue-with" +msgstr "Continúa con" + msgid "labels.or" -msgstr "o" +msgstr "o email" #: src/app/main/ui/dashboard/team.cljs, src/app/main/ui/dashboard/team.cljs msgid "labels.owner"