From a7e18b9fb799a95dc0ec3ed29e571b728c283902 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 16 May 2023 00:46:51 +0200 Subject: [PATCH] Rework Oauth login buttons, swap github logo to monocolor (#24740) Diff without whitespace: https://github.com/go-gitea/gitea/pull/24740/files?diff=unified&w=1 - Use SVGs for GitHub and GitLab oauth providers - Replace section wrapping with a divider - Rework icon rendering, increase size from 32px to 40px Before: Screenshot 2023-05-15 at 21 54 23 After (more providers): Screenshot 2023-05-15 at 21 51 21 Screenshot 2023-05-15 at 21 56 45 Ref: https://codeberg.org/Codeberg/Community/issues/1023 --------- Co-authored-by: Giteabot --- public/img/svg/gitea-github.svg | 1 - public/img/svg/gitea-gitlab.svg | 2 +- public/img/svg/gitea-openid.svg | 1 + templates/repo/migrate/migrate.tmpl | 10 +- templates/user/auth/signin_inner.tmpl | 165 ++++++++++++++------------ web_src/css/base.css | 8 ++ web_src/css/form.css | 26 ---- web_src/css/helpers.css | 2 + web_src/svg/gitea-github.svg | 1 - web_src/svg/gitea-gitlab.svg | 2 +- web_src/svg/gitea-openid.svg | 1 + 11 files changed, 111 insertions(+), 108 deletions(-) delete mode 100644 public/img/svg/gitea-github.svg create mode 100644 public/img/svg/gitea-openid.svg delete mode 100644 web_src/svg/gitea-github.svg create mode 100644 web_src/svg/gitea-openid.svg diff --git a/public/img/svg/gitea-github.svg b/public/img/svg/gitea-github.svg deleted file mode 100644 index ee3c9fdafc..0000000000 --- a/public/img/svg/gitea-github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/svg/gitea-gitlab.svg b/public/img/svg/gitea-gitlab.svg index 2891da094f..742370ac9a 100644 --- a/public/img/svg/gitea-gitlab.svg +++ b/public/img/svg/gitea-gitlab.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/img/svg/gitea-openid.svg b/public/img/svg/gitea-openid.svg new file mode 100644 index 0000000000..f8e313f515 --- /dev/null +++ b/public/img/svg/gitea-openid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/repo/migrate/migrate.tmpl b/templates/repo/migrate/migrate.tmpl index 44769e60bd..01245322f8 100644 --- a/templates/repo/migrate/migrate.tmpl +++ b/templates/repo/migrate/migrate.tmpl @@ -6,7 +6,15 @@
{{range .Services}} - {{svg (printf "gitea-%s" .Name) 184}} + {{if eq .Name "github"}} + {{svg "octicon-mark-github" 184 "gt-p-4"}} + {{else if eq .Name "gitlab"}} + {{svg "gitea-gitlab" 184 "gt-p-4"}} + {{else if eq .Name "gitbucket"}} + {{svg "gitea-gitbucket" 184 "gt-p-4"}} + {{else}} + {{svg (printf "gitea-%s" .Name) 184}} + {{end}}
{{.Title}} diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl index f14bac10ee..ceafc257ea 100644 --- a/templates/user/auth/signin_inner.tmpl +++ b/templates/user/auth/signin_inner.tmpl @@ -1,78 +1,89 @@ - {{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}} - {{template "base/alert" .}} - {{end}} -

- {{if .LinkAccountMode}} - {{.locale.Tr "auth.oauth_signin_title"}} - {{else}} - {{.locale.Tr "auth.login_userpass"}} - {{end}} -

-
-
- {{.CsrfTokenHtml}} -
- - -
- {{if or (not .DisablePassword) .LinkAccountMode}} -
- - -
- {{end}} - {{if not .LinkAccountMode}} -
- -
- - -
-
- {{end}} - - {{template "user/auth/captcha" .}} - -
- - - {{.locale.Tr "auth.forgot_password"}} -
- - {{if .ShowRegistrationButton}} -
- - {{.locale.Tr "auth.sign_up_now" | Str2html}} -
- {{end}} - - {{if and .OrderedOAuth2Names .OAuth2Providers}} -
-
-
-
-
-

{{.locale.Tr "sign_in_with"}}

- {{range $key := .OrderedOAuth2Names}} - {{$provider := index $.OAuth2Providers $key}} - - - {{end}} -
-
-
-
- {{end}} -
+{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}} +{{template "base/alert" .}} +{{end}} +

+ {{if .LinkAccountMode}} + {{.locale.Tr "auth.oauth_signin_title"}} + {{else}} + {{.locale.Tr "auth.login_userpass"}} + {{end}} +

+
+
+ {{.CsrfTokenHtml}} +
+ + +
+ {{if or (not .DisablePassword) .LinkAccountMode}} +
+ + +
+ {{end}} + {{if not .LinkAccountMode}} +
+ +
+ +
+
+ {{end}} + + {{template "user/auth/captcha" .}} + +
+ + + {{.locale.Tr "auth.forgot_password"}} +
+ + {{if .ShowRegistrationButton}} +
+ + {{.locale.Tr "auth.sign_up_now" | Str2html}} +
+ {{end}} + + {{if and .OrderedOAuth2Names .OAuth2Providers}} +
+
+
+ +
+ {{end}} +
+
diff --git a/web_src/css/base.css b/web_src/css/base.css index ed00b1a295..30a9c63138 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -338,7 +338,11 @@ a { text-decoration-skip-ink: all; } +/* muted link = only colored when hovered */ +/* silenced link = never colored */ + a.muted, +a.silenced, .muted-links a { color: inherit; } @@ -350,6 +354,10 @@ a.muted:hover [class*="color-text"], color: var(--color-primary); } +a.silenced:hover { + color: inherit; +} + .delete-button, .delete-button:hover { color: var(--color-red); diff --git a/web_src/css/form.css b/web_src/css/form.css index 85d1136de8..9e1a72380b 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -206,32 +206,6 @@ textarea:focus, } } -.signin .oauth2 div { - display: inline-block; -} - -.signin .oauth2 div p { - margin: 10px 5px 0 0; - float: left; -} - -.signin .oauth2 a { - margin-right: 3px; -} - -.signin .oauth2 a:last-child { - margin-right: 0; -} - -.signin .oauth2 img { - width: 32px; - height: 32px; -} - -.signin .oauth2 img.openidConnect { - width: auto; -} - @media (min-width: 768px) { .g-recaptcha-style, .h-captcha-style { diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 22e18f7926..306e4bd51d 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -73,6 +73,8 @@ Gitea's private styles use `g-` prefix. .gt-whitespace-nowrap { white-space: nowrap !important; } .gt-whitespace-pre { white-space: pre !important; } .gt-whitespace-pre-wrap { white-space: pre-wrap !important; } +.gt-object-contain { object-fit: contain !important; } +.gt-self-center { align-self: center !important; } .gt-overflow-x-auto { overflow-x: auto !important; } .gt-overflow-x-scroll { overflow-x: scroll !important; } diff --git a/web_src/svg/gitea-github.svg b/web_src/svg/gitea-github.svg deleted file mode 100644 index 918a35ecf6..0000000000 --- a/web_src/svg/gitea-github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web_src/svg/gitea-gitlab.svg b/web_src/svg/gitea-gitlab.svg index 6a9c8a80f4..e966a4ece5 100644 --- a/web_src/svg/gitea-gitlab.svg +++ b/web_src/svg/gitea-gitlab.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/web_src/svg/gitea-openid.svg b/web_src/svg/gitea-openid.svg new file mode 100644 index 0000000000..262ca1017c --- /dev/null +++ b/web_src/svg/gitea-openid.svg @@ -0,0 +1 @@ + \ No newline at end of file