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: <img width="853" alt="Screenshot 2023-05-15 at 21 54 23" src="https://github.com/go-gitea/gitea/assets/115237/6ab5cfb4-46ff-469a-bd1f-06780d4a6a0b"> After (more providers): <img width="849" alt="Screenshot 2023-05-15 at 21 51 21" src="https://github.com/go-gitea/gitea/assets/115237/fa84f92f-98e0-4aed-9357-5d62ddd98195"> <img width="856" alt="Screenshot 2023-05-15 at 21 56 45" src="https://github.com/go-gitea/gitea/assets/115237/d3edd7ed-dadd-4302-aca7-08f20adc220e"> Ref: https://codeberg.org/Codeberg/Community/issues/1023 --------- Co-authored-by: Giteabot <teabot@gitea.io>
go-gitea · May 15, 2023 · a7e18b9 · a7e18b9
1 parent 7565e5c
commit a7e18b9
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 100 deletions.
diff --git a/public/img/svg/gitea-github.svg b/public/img/svg/gitea-github.svg
diff --git a/public/img/svg/gitea-gitlab.svg b/public/img/svg/gitea-gitlab.svg
diff --git a/public/img/svg/gitea-openid.svg b/public/img/svg/gitea-openid.svg
diff --git a/templates/repo/migrate/migrate.tmpl b/templates/repo/migrate/migrate.tmpl
@@ -6,7 +6,15 @@
 			<div class="ui three stackable cards">
 				{{range .Services}}
 					<a class="ui card gt-df gt-ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
-						{{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}}
 						<div class="content">
 							<div class="header gt-tc">
 								{{.Title}}

diff --git 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}}
-		<h4 class="ui top attached header center">
+{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}}
+{{template "base/alert" .}}
+{{end}}
+<h4 class="ui top attached header center">
+	{{if .LinkAccountMode}}
+		{{.locale.Tr "auth.oauth_signin_title"}}
+	{{else}}
+		{{.locale.Tr "auth.login_userpass"}}
+	{{end}}
+</h4>
+<div class="ui attached segment">
+	<form class="ui form" action="{{.SignInLink}}" method="post">
+	{{.CsrfTokenHtml}}
+	<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
+		<label for="user_name">{{.locale.Tr "home.uname_holder"}}</label>
+		<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
+	</div>
+	{{if or (not .DisablePassword) .LinkAccountMode}}
+	<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
+		<label for="password">{{.locale.Tr "password"}}</label>
+		<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
+	</div>
+	{{end}}
+	{{if not .LinkAccountMode}}
+	<div class="inline field">
+		<label></label>
+		<div class="ui checkbox">
+			<label>{{.locale.Tr "auth.remember_me"}}</label>
+			<input name="remember" type="checkbox">
+		</div>
+	</div>
+	{{end}}
+
+	{{template "user/auth/captcha" .}}
+
+	<div class="inline field">
+		<label></label>
+		<button class="ui green button">
 			{{if .LinkAccountMode}}
-				{{.locale.Tr "auth.oauth_signin_title"}}
+				{{.locale.Tr "auth.oauth_signin_submit"}}
 			{{else}}
-				{{.locale.Tr "auth.login_userpass"}}
-			{{end}}
-		</h4>
-		<div class="ui attached segment">
-			<form class="ui form" action="{{.SignInLink}}" method="post">
-			{{.CsrfTokenHtml}}
-			<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
-				<label for="user_name">{{.locale.Tr "home.uname_holder"}}</label>
-				<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
-			</div>
-			{{if or (not .DisablePassword) .LinkAccountMode}}
-			<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
-				<label for="password">{{.locale.Tr "password"}}</label>
-				<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
-			</div>
-			{{end}}
-			{{if not .LinkAccountMode}}
-			<div class="inline field">
-				<label></label>
-				<div class="ui checkbox">
-					<label>{{.locale.Tr "auth.remember_me"}}</label>
-					<input name="remember" type="checkbox">
-				</div>
-			</div>
+				{{.locale.Tr "sign_in"}}
 			{{end}}
+		</button>
+		<a href="{{AppSubUrl}}/user/forgot_password">{{.locale.Tr "auth.forgot_password"}}</a>
+	</div>
 
-			{{template "user/auth/captcha" .}}
-
-			<div class="inline field">
-				<label></label>
-				<button class="ui green button">
-					{{if .LinkAccountMode}}
-						{{.locale.Tr "auth.oauth_signin_submit"}}
-					{{else}}
-						{{.locale.Tr "sign_in"}}
-					{{end}}
-				</button>
-				<a href="{{AppSubUrl}}/user/forgot_password">{{.locale.Tr "auth.forgot_password"}}</a>
-			</div>
-
-			{{if .ShowRegistrationButton}}
-				<div class="inline field">
-					<label></label>
-					<a href="{{AppSubUrl}}/user/sign_up">{{.locale.Tr "auth.sign_up_now" | Str2html}}</a>
-				</div>
-			{{end}}
+	{{if .ShowRegistrationButton}}
+		<div class="inline field">
+			<label></label>
+			<a href="{{AppSubUrl}}/user/sign_up">{{.locale.Tr "auth.sign_up_now" | Str2html}}</a>
+		</div>
+	{{end}}
 
-			{{if and .OrderedOAuth2Names .OAuth2Providers}}
-			<div class="ui attached segment">
-				<div class="oauth2 center">
-					<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
-					<div>
-						<div id="oauth2-login-navigator">
-							<p>{{.locale.Tr "sign_in_with"}}</p>
-							{{range $key := .OrderedOAuth2Names}}
-								{{$provider := index $.OAuth2Providers $key}}
-								<a href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-									<img
-										alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-										title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-										class="{{$provider.Name}} oauth-login-image"
-										src="{{AppSubUrl}}{{$provider.Image}}"
-									></a>
+	{{if and .OrderedOAuth2Names .OAuth2Providers}}
+	<hr class="ui divider"/>
+	<div class="oauth2 center">
+		<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
+		<div>
+			<div id="oauth2-login-navigator" class="gt-df gt-jc">
+				<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
+				<div class="gt-df gt-fw gt-gap-4">
+					{{range $key := .OrderedOAuth2Names}}
+						{{$provider := index $.OAuth2Providers $key}}
+						<a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}">
+							{{if eq $provider.Name "github"}}
+								{{svg "octicon-mark-github" 40}}
+							{{else if eq $provider.Name "gitlab"}}
+								{{svg "gitea-gitlab" 40}}
+							{{else if eq $provider.Name "openidConnect"}}
+								{{svg "gitea-openid" 40}}
+							{{else}}
+								<img
+									class="gt-object-contain"
+									width="40"
+									height="40"
+									alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
+									src="{{AppSubUrl}}{{$provider.Image}}"
+								>
 							{{end}}
-						</div>
-					</div>
+						</a>
+					{{end}}
 				</div>
 			</div>
-			{{end}}
-			</form>
 		</div>
+	</div>
+	{{end}}
+	</form>
+</div>
diff --git 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
@@ -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
@@ -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
diff --git a/web_src/svg/gitea-gitlab.svg b/web_src/svg/gitea-gitlab.svg
diff --git a/web_src/svg/gitea-openid.svg b/web_src/svg/gitea-openid.svg