💄 Social login redesign

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)

frontend/resources/images/icons/brand-google.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="5345 -1143 500 500"><path fill="#fff" fill-rule="evenodd" d="M5845-887c0-18-1-35-4-51h-240v96h137c-6 32-24 58-51 76v63h82c49-44 76-108 76-184z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5601-643c68 0 126-22 168-60l-82-63a156 156 0 0 1-229-79h-85v64c42 82 128 138 228 138z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5458-845a148 148 0 0 1 0-95v-65h-85a246 246 0 0 0 0 224z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5601-1043c37 0 71 12 97 37l73-72a256 256 0 0 0-399 73l86 65c20-59 76-103 143-103z" clip-rule="evenodd"/></svg>

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 {

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/github-client-id))
-      cf/oidc-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
+(mf/defc login-button-oidc
-     [:a.btn-ocean.btn-large.btn-github-auth
+  [{:keys [params] :as props}]
-      {:on-click #(login-with-oauth % :oidc params)}
+  (when cf/oidc-client-id
-      (tr "auth.login-with-oidc-submit")])])
+    [: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))

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?
+   (when cf/oidc-client-id
-      [:*
+     [:div.links
-       [:span.separator (tr "labels.or")]
+      [:& login/login-button-oidc]])
+
+   [:span.separator
+    [:span.line]]
 
-       [:div.buttons
-        [:& login/login-buttons {:params params}]]])
 
    [:div.links
     [:div.link-entry

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"

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"