Increase auth provider icon size on login page (#27122)

Before, 20px:
<img width="474" alt="Screenshot 2023-09-19 at 00 10 05"
src="https://github.com/go-gitea/gitea/assets/115237/4bed4edb-219d-4844-9d3c-0d747033b09f">

After, 28px:
<img width="576" alt="Screenshot 2023-09-19 at 00 20 40"
src="https://github.com/go-gitea/gitea/assets/115237/f482ac09-38ae-4c84-80d9-0bd39b7f9772">


Dropdown in account settings is unchanged at 20px:
<img width="157" alt="Screenshot 2023-09-19 at 00 09 11"
src="https://github.com/go-gitea/gitea/assets/115237/9c998cdf-eeed-4118-9262-664faaa56092">

---------

Co-authored-by: Giteabot <[email protected]>

Author: silverwind

services/auth/source/oauth2/providers.go

@@ -22,7 +22,7 @@ import (
 type Provider interface {
 	Name() string
 	DisplayName() string
-	IconHTML() template.HTML
+	IconHTML(size int) template.HTML
 	CustomURLSettings() *CustomURLSettings
 }
 
@@ -54,14 +54,16 @@ func (p *AuthSourceProvider) DisplayName() string {
 	return p.sourceName
 }
 
-func (p *AuthSourceProvider) IconHTML() template.HTML {
+func (p *AuthSourceProvider) IconHTML(size int) template.HTML {
 	if p.iconURL != "" {
-		img := fmt.Sprintf(`<img class="gt-object-contain gt-mr-3" width="20" height="20" src="%s" alt="%s">`,
+		img := fmt.Sprintf(`<img class="gt-object-contain gt-mr-3" width="%d" height="%d" src="%s" alt="%s">`,
+			size,
+			size,
 			html.EscapeString(p.iconURL), html.EscapeString(p.DisplayName()),
 		)
 		return template.HTML(img)
 	}
-	return p.GothProvider.IconHTML()
+	return p.GothProvider.IconHTML(size)
 }
 
 // Providers contains the map of registered OAuth2 providers in Gitea (based on goth)

services/auth/source/oauth2/providers_base.go

@@ -27,18 +27,18 @@ func (b *BaseProvider) DisplayName() string {
 }
 
 // IconHTML returns icon HTML for this provider
-func (b *BaseProvider) IconHTML() template.HTML {
+func (b *BaseProvider) IconHTML(size int) template.HTML {
 	svgName := "gitea-" + b.name
 	switch b.name {
 	case "gplus":
 		svgName = "gitea-google"
 	case "github":
 		svgName = "octicon-mark-github"
 	}
-	svgHTML := svg.RenderHTML(svgName, 20, "gt-mr-3")
+	svgHTML := svg.RenderHTML(svgName, size, "gt-mr-3")
 	if svgHTML == "" {
 		log.Error("No SVG icon for oauth2 provider %q", b.name)
-		svgHTML = svg.RenderHTML("gitea-openid", 20, "gt-mr-3")
+		svgHTML = svg.RenderHTML("gitea-openid", size, "gt-mr-3")
 	}
 	return svgHTML
 }

services/auth/source/oauth2/providers_openid.go

@@ -28,8 +28,8 @@ func (o *OpenIDProvider) DisplayName() string {
 }
 
 // IconHTML returns icon HTML for this provider
-func (o *OpenIDProvider) IconHTML() template.HTML {
-	return svg.RenderHTML("gitea-openid", 20, "gt-mr-3")
+func (o *OpenIDProvider) IconHTML(size int) template.HTML {
+	return svg.RenderHTML("gitea-openid", size, "gt-mr-3")
 }
 
 // CreateGothProvider creates a GothProvider from this Provider

templates/user/auth/signin_inner.tmpl

@@ -62,7 +62,7 @@
 				{{range $key := .OrderedOAuth2Names}}
 					{{$provider := index $.OAuth2Providers $key}}
 					<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-						{{$provider.IconHTML}}
+						{{$provider.IconHTML 28}}
 						{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
 					</a>
 				{{end}}

templates/user/auth/signup_inner.tmpl

@@ -66,7 +66,7 @@
 						{{range $key := .OrderedOAuth2Names}}
 							{{$provider := index $.OAuth2Providers $key}}
 							<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-								{{$provider.IconHTML}}
+								{{$provider.IconHTML 28}}
 								{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
 							</a>
 						{{end}}

templates/user/settings/security/accountlinks.tmpl

@@ -10,7 +10,7 @@
 					{{range $key := .OrderedOAuth2Names}}
 						{{$provider := index $.OAuth2Providers $key}}
 						<a class="item" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-							{{$provider.IconHTML}}
+							{{$provider.IconHTML 20}}
 							{{$provider.DisplayName}}
 						</a>
 					{{end}}