Modify OAuth login ui and fix display name, iconurl related logic (#25030)

Close #24808 Co-Authour @wxiaoguang @silverwind 1. Most svgs are found from https://worldvectorlogo.com/ , and some are from conversion of png to svg. (facebook and nextcloud). And also changed `templates/user/settings/security/accountlinks.tmpl`. 2. Fixed display name and iconurl related logic # After <img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05" src="https://github.com/go-gitea/gitea/assets/17645053/a5db39d8-1ab0-4676-82a4-fba60a1d1f84"> On mobile <img width="378" alt="Screen Shot 2023-06-05 at 14 09 46" src="https://github.com/go-gitea/gitea/assets/17645053/71d0f51b-baac-4f48-8ca2-ae0e013bd62e"> user/settings/security/accountlinks (The dropdown might be improved later) <img width="973" alt="Screen Shot 2023-06-01 at 10 01 44" src="https://github.com/go-gitea/gitea/assets/17645053/27010e7e-2785-4fc5-8c49-b06621898f37"> --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2 years ago · 63a429581c
parent 9aaaf980f0
commit 63a429581c
44 changed files with 80 additions and 270 deletions
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@ -4,7 +4,8 @@ explore = Explore
 help = Help
 logo = Logo
 sign_in = Sign In
-sign_in_with = Sign In With
+sign_in_with_provider = Sign in with %s
+sign_in_or = or
 sign_out = Sign Out
 sign_up = Register
 link_account = Link Account
--- a/public/img/auth/azuread.png
+++ b/public/img/auth/azuread.png
--- a/public/img/auth/azuread.svg
+++ b/public/img/auth/azuread.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class="svg gitea-azuread" width="16" height="16" aria-hidden="true"><defs><linearGradient id="gitea-azuread__a" x1="13.25" x2="8.62" y1="13.02" y2="4.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1988d9"/><stop offset=".9" stop-color="#54aef0"/></linearGradient><linearGradient id="gitea-azuread__b" x1="11.26" x2="14.46" y1="10.47" y2="15.99" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#54aef0"/><stop offset=".29" stop-color="#4fabee"/><stop offset=".51" stop-color="#41a2e9"/><stop offset=".74" stop-color="#2a93e0"/><stop offset=".88" stop-color="#1988d9"/></linearGradient></defs><path fill="#50e6ff" d="m1.01 10.19 7.92 5.14 8.06-5.16L18 11.35l-9.07 5.84L0 11.35l1.01-1.16z"/><path fill="#fff" d="M1.61 9.53 8.93.81l7.47 8.73-7.47 4.72-7.32-4.73z"/><path fill="#50e6ff" d="M8.93.81v13.45L1.61 9.53 8.93.81z"/><path fill="url(#gitea-azuread__a)" d="M8.93.81v13.45l7.47-4.72L8.93.81z"/><path fill="#53b1e0" d="m8.93 7.76 7.47 1.78-7.47 4.72v-6.5z"/><path fill="#9cebff" d="M8.93 14.26 1.61 9.53l7.32-1.77v6.5z"/><path fill="url(#gitea-azuread__b)" d="M8.93 17.19 18 11.35l-1.01-1.18-8.06 5.16v1.86z"/></svg>
--- a/public/img/auth/azureadv2.png
+++ b/public/img/auth/azureadv2.png
--- a/public/img/auth/azureadv2.svg
+++ b/public/img/auth/azureadv2.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class="svg gitea-azureadv2" width="16" height="16" aria-hidden="true"><defs><linearGradient id="gitea-azureadv2__a" x1="13.25" x2="8.62" y1="13.02" y2="4.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1988d9"/><stop offset=".9" stop-color="#54aef0"/></linearGradient><linearGradient id="gitea-azureadv2__b" x1="11.26" x2="14.46" y1="10.47" y2="15.99" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#54aef0"/><stop offset=".29" stop-color="#4fabee"/><stop offset=".51" stop-color="#41a2e9"/><stop offset=".74" stop-color="#2a93e0"/><stop offset=".88" stop-color="#1988d9"/></linearGradient></defs><path fill="#50e6ff" d="m1.01 10.19 7.92 5.14 8.06-5.16L18 11.35l-9.07 5.84L0 11.35l1.01-1.16z"/><path fill="#fff" d="M1.61 9.53 8.93.81l7.47 8.73-7.47 4.72-7.32-4.73z"/><path fill="#50e6ff" d="M8.93.81v13.45L1.61 9.53 8.93.81z"/><path fill="url(#gitea-azureadv2__a)" d="M8.93.81v13.45l7.47-4.72L8.93.81z"/><path fill="#53b1e0" d="m8.93 7.76 7.47 1.78-7.47 4.72v-6.5z"/><path fill="#9cebff" d="M8.93 14.26 1.61 9.53l7.32-1.77v6.5z"/><path fill="url(#gitea-azureadv2__b)" d="M8.93 17.19 18 11.35l-1.01-1.18-8.06 5.16v1.86z"/></svg>
--- a/public/img/auth/bitbucket.png
+++ b/public/img/auth/bitbucket.png
--- a/public/img/auth/bitbucket.svg
+++ b/public/img/auth/bitbucket.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 256 295" class="svg gitea-bitbucket" width="16" height="16" aria-hidden="true"><g fill="#205081"><path d="M128 0C57.732 0 .012 18.822.012 42.663c0 6.274 15.057 95.364 21.331 130.498 2.51 16.312 43.918 38.898 106.657 38.898 62.74 0 102.893-22.586 106.657-38.898 6.274-35.134 21.331-124.224 21.331-130.498C254.734 18.822 198.268 0 128 0zm0 183.199c-22.586 0-40.153-17.567-40.153-40.153s17.567-40.153 40.153-40.153 40.153 17.567 40.153 40.153c0 21.331-17.567 40.153-40.153 40.153zm0-127.988c-45.172 0-81.561-7.53-81.561-17.567 0-10.039 36.389-17.567 81.561-17.567 45.172 0 81.561 7.528 81.561 17.567 0 10.038-36.389 17.567-81.561 17.567z"/><path d="M220.608 207.04c-2.51 0-3.764 1.255-3.764 1.255s-31.37 25.096-87.835 25.096c-56.466 0-87.835-25.096-87.835-25.096s-2.51-1.255-3.765-1.255c-2.51 0-5.019 1.255-5.019 5.02v1.254c5.02 26.35 8.784 45.172 8.784 47.682 3.764 18.822 41.408 33.88 86.58 33.88s82.816-15.058 86.58-33.88c0-2.51 3.765-21.332 8.784-47.682v-1.255c1.255-2.51 0-5.019-2.51-5.019z"/><circle cx="128" cy="141.791" r="20.077"/></g></svg>
--- a/public/img/auth/discord.png
+++ b/public/img/auth/discord.png
--- a/public/img/auth/discord.svg
+++ b/public/img/auth/discord.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 293" class="svg gitea-discord" width="16" height="16" aria-hidden="true"><path fill="#7289DA" d="M226.011 0H29.99C13.459 0 0 13.458 0 30.135v197.778c0 16.677 13.458 30.135 29.989 30.135h165.888l-7.754-27.063 18.725 17.408 17.7 16.384L256 292.571V30.135C256 13.458 242.542 0 226.011 0zm-56.466 191.05s-5.266-6.291-9.655-11.85c19.164-5.413 26.478-17.408 26.478-17.408-5.998 3.95-11.703 6.73-16.823 8.63-7.314 3.073-14.336 5.12-21.211 6.291-14.044 2.633-26.917 1.902-37.888-.146-8.339-1.61-15.507-3.95-21.504-6.29-3.365-1.317-7.022-2.926-10.68-4.974-.438-.293-.877-.439-1.316-.732a2.022 2.022 0 0 1-.585-.438c-2.633-1.463-4.096-2.487-4.096-2.487s7.022 11.703 25.6 17.261c-4.388 5.56-9.801 12.142-9.801 12.142-32.33-1.024-44.617-22.235-44.617-22.235 0-47.104 21.065-85.285 21.065-85.285 21.065-15.799 41.106-15.36 41.106-15.36l1.463 1.756C80.75 77.53 68.608 89.088 68.608 89.088s3.218-1.755 8.63-4.242c15.653-6.876 28.088-8.777 33.208-9.216.877-.147 1.609-.293 2.487-.293a123.776 123.776 0 0 1 29.55-.292c13.896 1.609 28.818 5.705 44.031 14.043 0 0-11.556-10.971-36.425-18.578l2.048-2.34s20.041-.44 41.106 15.36c0 0 21.066 38.18 21.066 85.284 0 0-12.435 21.211-44.764 22.235zm-68.023-68.316c-8.338 0-14.92 7.314-14.92 16.237 0 8.924 6.728 16.238 14.92 16.238 8.339 0 14.921-7.314 14.921-16.238.147-8.923-6.582-16.237-14.92-16.237m53.394 0c-8.339 0-14.922 7.314-14.922 16.237 0 8.924 6.73 16.238 14.922 16.238 8.338 0 14.92-7.314 14.92-16.238 0-8.923-6.582-16.237-14.92-16.237"/></svg>
--- a/public/img/auth/dropbox.png
+++ b/public/img/auth/dropbox.png
--- a/public/img/auth/dropbox.svg
+++ b/public/img/auth/dropbox.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="25 24.999 850 790.592" class="svg gitea-dropbox" width="16" height="16" aria-hidden="true"><g fill="#007ee5"><path d="M275.037 24.999 25 188.255l172.886 138.448L450 171.023zM25 465.16l250.037 163.256L450 482.374l-252.114-155.67zm425 17.214 174.963 146.042L875 465.16 702.114 326.703z"/><path d="M875 188.255 624.963 24.999 450 171.024l252.114 155.68zM450.513 513.797l-175.476 145.61-75.09-49.028v54.959L450.513 815.59 701.08 665.338v-54.96l-75.09 49.029z"/></g></svg>
--- a/public/img/auth/facebook.png
+++ b/public/img/auth/facebook.png
--- a/public/img/auth/facebook.svg
+++ b/public/img/auth/facebook.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 128 128" class="svg gitea-facebook" width="16" height="16" aria-hidden="true"><path fill="#395b97" d="M93.5 8.5c-1.452.802-3.118 1.302-5 1.5L10 88.5c-.198 1.882-.698 3.548-1.5 5a551.581 551.581 0 0 1-.5-56c2.5-17.167 12.333-27 29.5-29.5a551.581 551.581 0 0 1 56 .5Z" style="opacity:.995"/><path fill="#366098" d="M93.5 8.5c15.888 4.225 24.555 14.558 26 31a676.749 676.749 0 0 0-1.5 37l-35 35a32.438 32.438 0 0 0-.5 8 441.615 441.615 0 0 1-1-42h14a379.883 379.883 0 0 0 3-17h-17c-2.5-13.83 3.166-19.83 17-18v-16c-25.755-3.243-36.755 8.09-33 34h-14v17h14v42c-9.34.166-18.673 0-28-.5-15.451-1.953-25.118-10.453-29-25.5.802-1.452 1.302-3.118 1.5-5L88.5 10c1.882-.198 3.548-.698 5-1.5Z" style="opacity:.976"/><path fill="#346499" d="M119.5 39.5c.167 16.67 0 33.337-.5 50-3.622 20.245-15.788 30.245-36.5 30a32.438 32.438 0 0 1 .5-8l35-35c.169-12.507.669-24.84 1.5-37Z" style="opacity:.918"/></svg>
--- a/public/img/auth/gitea.png
+++ b/public/img/auth/gitea.png
--- a/public/img/auth/gitea.svg
+++ b/public/img/auth/gitea.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="svg gitea-gitea" width="16" height="16" aria-hidden="true"><path fill="#fff" d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"/><g fill="#609926"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></g></svg>
--- a/public/img/auth/github.png
+++ b/public/img/auth/github.png
--- a/public/img/auth/github.svg
+++ b/public/img/auth/github.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="svg octicon-mark-github" width="16" height="16" aria-hidden="true"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"/></svg>
--- a/public/img/auth/gitlab.png
+++ b/public/img/auth/gitlab.png
--- a/public/img/auth/gitlab.svg
+++ b/public/img/auth/gitlab.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="svg gitea-gitlab" width="16" height="16" aria-hidden="true"><path fill="#E24329" d="m31.462 12.779-.045-.115-4.35-11.35a1.137 1.137 0 0 0-.447-.541 1.163 1.163 0 0 0-1.343.071c-.187.15-.322.356-.386.587l-2.94 9.001h-11.9l-2.941-9a1.138 1.138 0 0 0-1.045-.84 1.153 1.153 0 0 0-1.13.72L.579 12.68l-.045.113a8.09 8.09 0 0 0 2.68 9.34l.016.012.038.03 6.635 4.967 3.28 2.484 1.994 1.51a1.35 1.35 0 0 0 1.627 0l1.994-1.51 3.282-2.484 6.673-4.997.018-.013a8.088 8.088 0 0 0 2.69-9.352Z"/><path fill="#FC6D26" d="m31.462 12.779-.045-.115a14.748 14.748 0 0 0-5.856 2.634l-9.553 7.24A11225.6 11225.6 0 0 0 22.1 27.14l6.673-4.997.019-.013a8.09 8.09 0 0 0 2.67-9.352Z"/><path fill="#FCA326" d="m9.908 27.14 3.275 2.485 1.994 1.51a1.35 1.35 0 0 0 1.627 0l1.994-1.51 3.282-2.484s-2.835-2.14-6.092-4.603l-6.08 4.603Z"/><path fill="#FC6D26" d="M6.435 15.305A14.712 14.712 0 0 0 .58 12.672l-.045.113a8.09 8.09 0 0 0 2.68 9.347l.016.012.038.03 6.635 4.967 6.105-4.603-9.573-7.233Z"/></svg>
--- a/public/img/auth/google.png
+++ b/public/img/auth/google.png
--- a/public/img/auth/google.svg
+++ b/public/img/auth/google.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" class="svg gitea-google" width="16" height="16" aria-hidden="true"><defs><path id="gitea-google__a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="gitea-google__b"><use xlink:href="#gitea-google__a" overflow="visible"/></clipPath><path fill="#FBBC05" d="M0 37V11l17 13z" clip-path="url(#gitea-google__b)"/><path fill="#EA4335" d="m0 11 17 13 7-6.1L48 14V0H0z" clip-path="url(#gitea-google__b)"/><path fill="#34A853" d="m0 37 30-23 7.9 1L48 0v48H0z" clip-path="url(#gitea-google__b)"/><path fill="#4285F4" d="M48 48 17 24l-4-3 35-10z" clip-path="url(#gitea-google__b)"/></svg>
--- a/public/img/auth/mastodon.png
+++ b/public/img/auth/mastodon.png
--- a/public/img/auth/mastodon.svg
+++ b/public/img/auth/mastodon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.41 0.22 747.62 801.45" class="svg gitea-mastodon" width="16" height="16" aria-hidden="true"><path fill="#3088d4" d="M729.94 479.5c-10.96 56.4-98.17 118.12-198.34 130.08-52.23 6.23-103.66 11.96-158.49 9.44-89.68-4.1-160.45-21.4-160.45-21.4 0 8.73.54 17.04 1.62 24.81 11.66 88.52 87.76 93.82 159.84 96.29 72.76 2.49 137.55-17.94 137.55-17.94l2.99 65.79s-50.89 27.32-141.55 32.35c-50 2.75-112.07-1.26-184.37-20.39C31.94 737.02 4.97 569.86.85 400.26-.41 349.9.37 302.42.37 262.7.37 89.27 113.99 38.44 113.99 38.44 171.28 12.12 269.59 1.06 371.79.22h2.52c102.19.84 200.57 11.9 257.86 38.22 0 0 113.62 50.83 113.62 224.26 0 0 1.42 127.96-15.85 216.8"/><path fill="#fff" d="M611.77 276.16v209.99h-83.2V282.33c0-42.97-18.07-64.77-54.23-64.77-39.98 0-60.01 25.86-60.01 77.02v111.57h-82.71V294.58c0-51.16-20.04-77.02-60.01-77.02-36.16 0-54.24 21.8-54.24 64.77v203.82h-83.19V276.16c0-42.92 10.93-77.03 32.88-102.26 22.63-25.23 52.27-38.17 89.07-38.17 42.57 0 74.81 16.37 96.12 49.1l20.72 34.74 20.73-34.74c21.31-32.73 53.55-49.1 96.12-49.1 36.79 0 66.44 12.94 89.07 38.17 21.95 25.23 32.88 59.34 32.88 102.26z"/></svg>
--- a/public/img/auth/microsoftonline.png
+++ b/public/img/auth/microsoftonline.png
--- a/public/img/auth/microsoftonline.svg
+++ b/public/img/auth/microsoftonline.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2075 2499.8" class="svg gitea-microsoftonline" width="16" height="16" aria-hidden="true"><path fill="#eb3c00" d="M0 2016.6V496.8L1344.4 0 2075 233.7v2045.9l-730.6 220.3L0 2016.6l1344.4 161.8V409.2L467.6 613.8v1198.3z"/></svg>
--- a/public/img/auth/nextcloud.png
+++ b/public/img/auth/nextcloud.png
--- a/public/img/auth/nextcloud.svg
+++ b/public/img/auth/nextcloud.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 128 128" class="svg gitea-nextcloud" width="16" height="16" aria-hidden="true"><path fill="#0382c9" d="M12.5-.5h102a796.486 796.486 0 0 0 7 4.5 68.97 68.97 0 0 1 6 8.5v102a785.54 785.54 0 0 0-4.5 7 68.927 68.927 0 0 1-8.5 6h-102a779.088 779.088 0 0 0-7-4.5 68.94 68.94 0 0 1-6-8.5v-102a789.852 789.852 0 0 0 4.5-7 68.982 68.982 0 0 1 8.5-6Z" style="opacity:.997"/><path fill="#fafcfe" d="M55.5 37.5c16.649-2.824 28.149 3.51 34.5 19 6.704-10.658 15.537-12.825 26.5-6.5 9.555 10.007 9.222 19.673-1 29-10.492 5.063-18.992 2.897-25.5-6.5C83.734 86.553 72.9 92.72 57.5 91c-9.864-2.843-16.697-9.01-20.5-18.5-6.582 9.277-15.082 11.444-25.5 6.5-10.222-9.327-10.555-18.993-1-29 10.809-5.923 19.642-3.756 26.5 6.5 3.713-8.878 9.88-15.211 18.5-19Z" style="opacity:1"/><path fill="#0b83c9" d="M58.5 47.5c17.163-.677 23.996 7.323 20.5 24-6.538 9.38-15.038 11.546-25.5 6.5-10.605-12.356-8.939-22.523 5-30.5Z" style="opacity:1"/><path fill="#1986cb" d="M18.5 56.5c7.7-.138 10.867 3.529 9.5 11-4.041 4.813-8.375 5.146-13 1-1.407-4.857-.24-8.857 3.5-12Z" style="opacity:1"/><path fill="#2088cb" d="M103.5 56.5c7.801.619 10.635 4.619 8.5 12-4.709 4.27-9.042 3.936-13-1-1.607-5.062-.107-8.728 4.5-11Z" style="opacity:1"/></svg>
--- a/public/img/auth/openid_connect.svg
+++ b/public/img/auth/openid_connect.svg
--- a/public/img/auth/twitter.png
+++ b/public/img/auth/twitter.png
--- a/public/img/auth/twitter.svg
+++ b/public/img/auth/twitter.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="-89.009 -46.884 643.937 446.884" class="svg gitea-twitter" width="16" height="16" aria-hidden="true"><path fill="#1da1f2" fill-rule="nonzero" d="M154.729 400c185.669 0 287.205-153.876 287.205-287.312 0-4.37-.089-8.72-.286-13.052A205.304 205.304 0 0 0 492 47.346c-18.087 8.044-37.55 13.458-57.968 15.899 20.841-12.501 36.84-32.278 44.389-55.852a202.42 202.42 0 0 1-64.098 24.511C395.903 12.276 369.679 0 340.641 0c-55.744 0-100.948 45.222-100.948 100.965 0 7.925.887 15.631 2.619 23.025-83.895-4.223-158.287-44.405-208.074-105.504A100.739 100.739 0 0 0 20.57 69.24c0 35.034 17.82 65.961 44.92 84.055a100.172 100.172 0 0 1-45.716-12.63c-.015.424-.015.837-.015 1.29 0 48.903 34.794 89.734 80.982 98.986a101.036 101.036 0 0 1-26.617 3.553c-6.493 0-12.821-.639-18.971-1.82 12.851 40.122 50.115 69.319 94.296 70.135-34.549 27.089-78.07 43.224-125.371 43.224A204.9 204.9 0 0 1 0 354.634c44.674 28.645 97.72 45.359 154.734 45.359"/></svg>
--- a/public/img/auth/yandex.png
+++ b/public/img/auth/yandex.png
--- a/public/img/auth/yandex.svg
+++ b/public/img/auth/yandex.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="svg gitea-yandex" width="16" height="16" aria-hidden="true"><path fill="#e52620" d="M49.07 0c.524.405.262.88.095 1.333l-6.643 18.095-8.047 22.12a4.21 4.21 0 0 0-.262 1.429v19.81c0 1.2-.024 1.2-1.214 1.2-1.238 0-2.476-.048-3.714.024-.786.024-1.07-.238-1.048-1.024l.024-7.333V42.928c0-.5-.07-1.048-.262-1.524L14.976 7.333c-.095-.262-.238-.476-.357-.714v-.5c.38-.12.762-.3 1.143-.3l4.12-.024s1.357 0 1.81 1.286l9.7 27.31.405.976.333-1.095 1.905-6.976 8.5-26.31c.12-.333.405-.62.62-.93L49.07 0z"/></svg>
--- a/services/auth/signin.go
+++ b/services/auth/signin.go
@ -61,7 +61,7 @@ func UserSignIn(username, password string) (*user_model.User, *auth.Source, erro
 			}

 			if !source.IsActive {
-				return nil, nil, oauth2.ErrAuthSourceNotActived
+				return nil, nil, oauth2.ErrAuthSourceNotActivated
 			}

 			authenticator, ok := source.Cfg.(PasswordAuthenticator)
--- a/services/auth/source/oauth2/providers.go
+++ b/services/auth/source/oauth2/providers.go
@ -19,7 +19,7 @@ import (
 type Provider interface {
 	Name() string
 	DisplayName() string
-	Image() string
+	IconURL() string
 	CustomURLSettings() *CustomURLSettings
 }

@ -34,23 +34,28 @@ type GothProvider interface {
 	GothProviderCreator
 }

-// ImagedProvider provide an overridden image setting for the provider
-type ImagedProvider struct {
+// AuthSourceProvider provides a provider for an AuthSource. Multiple auth sources could use the same registered GothProvider
+// So each auth source should have its own DisplayName and IconURL for display.
+// The Name is the GothProvider's name, to help to find the GothProvider to sign in.
+// The DisplayName is the auth source config's name, site admin set it on the admin page, the IconURL can also be set there.
+type AuthSourceProvider struct {
 	GothProvider
-	image string
+	sourceName, iconURL string
 }

-// Image returns the image path for this provider
-func (i *ImagedProvider) Image() string {
-	return i.image
+func (p *AuthSourceProvider) Name() string {
+	return p.GothProvider.Name()
 }

-// NewImagedProvider is a constructor function for the ImagedProvider
-func NewImagedProvider(image string, provider GothProvider) *ImagedProvider {
-	return &ImagedProvider{
-		GothProvider: provider,
-		image:        image,
+func (p *AuthSourceProvider) DisplayName() string {
+	return p.sourceName
+}
+
+func (p *AuthSourceProvider) IconURL() string {
+	if p.iconURL != "" {
+		return p.iconURL
 	}
+	return p.GothProvider.IconURL()
 }

 // Providers contains the map of registered OAuth2 providers in Gitea (based on goth)
@ -95,11 +100,13 @@ func GetActiveOAuth2Providers() ([]string, map[string]Provider, error) {
 	var orderedKeys []string
 	providers := make(map[string]Provider)
 	for _, source := range authSources {
-		prov := gothProviders[source.Cfg.(*Source).Provider]
-		if source.Cfg.(*Source).IconURL != "" {
-			prov = &ImagedProvider{prov, source.Cfg.(*Source).IconURL}
+		oauth2Cfg, ok := source.Cfg.(*Source)
+		if !ok {
+			log.Error("Invalid OAuth2 source config: %v", oauth2Cfg)
+			continue
 		}
-		providers[source.Name] = prov
+		gothProv := gothProviders[oauth2Cfg.Provider]
+		providers[source.Name] = &AuthSourceProvider{GothProvider: gothProv, sourceName: source.Name, iconURL: oauth2Cfg.IconURL}
 		orderedKeys = append(orderedKeys, source.Name)
 	}

@ -138,8 +145,7 @@ func ClearProviders() {
 	goth.ClearProviders()
 }

-// ErrAuthSourceNotActived login source is not actived error
-var ErrAuthSourceNotActived = errors.New("auth source is not actived")
+var ErrAuthSourceNotActivated = errors.New("auth source is not activated")

 // used to create different types of goth providers
 func createProvider(providerName string, source *Source) (goth.Provider, error) {
@ -150,7 +156,7 @@ func createProvider(providerName string, source *Source) (goth.Provider, error)

 	p, ok := gothProviders[source.Provider]
 	if !ok {
-		return nil, ErrAuthSourceNotActived
+		return nil, ErrAuthSourceNotActivated
 	}

 	provider, err = p.CreateGothProvider(providerName, callbackURL, source)
--- a/services/auth/source/oauth2/providers_base.go
+++ b/services/auth/source/oauth2/providers_base.go
@ -3,6 +3,8 @@

 package oauth2

+import "code.gitea.io/gitea/modules/setting"
+
 // BaseProvider represents a common base for Provider
 type BaseProvider struct {
 	name        string
@ -19,9 +21,14 @@ func (b *BaseProvider) DisplayName() string {
 	return b.displayName
 }

-// Image returns an image path for this provider
-func (b *BaseProvider) Image() string {
-	return "/assets/img/auth/" + b.name + ".png"
+// IconURL returns an icon path for this provider
+// Use svg for default icons, providers_openid has its own IconURL function
+func (b *BaseProvider) IconURL() string {
+	name := b.name
+	if b.name == "gplus" {
+		name = "google"
+	}
+	return setting.AppSubURL + "/assets/img/auth/" + name + ".svg"
 }

 // CustomURLSettings returns the custom url settings for this provider
@ -29,4 +36,4 @@ func (b *BaseProvider) CustomURLSettings() *CustomURLSettings {
 	return nil
 }

-var _ (Provider) = &BaseProvider{}
+var _ Provider = &BaseProvider{}
--- a/services/auth/source/oauth2/providers_custom.go
+++ b/services/auth/source/oauth2/providers_custom.go
@ -49,7 +49,7 @@ func NewCustomProvider(name, displayName string, customURLSetting *CustomURLSett
 	}
 }

-var _ (GothProvider) = &CustomProvider{}
+var _ GothProvider = &CustomProvider{}

 func init() {
 	RegisterGothProvider(NewCustomProvider(
--- a/services/auth/source/oauth2/providers_openid.go
+++ b/services/auth/source/oauth2/providers_openid.go
@ -24,9 +24,9 @@ func (o *OpenIDProvider) DisplayName() string {
 	return "OpenID Connect"
 }

-// Image returns an image path for this provider
-func (o *OpenIDProvider) Image() string {
-	return "/assets/img/auth/openid_connect.svg"
+// IconURL returns an icon path for this provider
+func (o *OpenIDProvider) IconURL() string {
+	return setting.AppSubURL + "/assets/img/svg/gitea-openid.svg"
 }

 // CreateGothProvider creates a GothProvider from this Provider
@ -48,7 +48,7 @@ func (o *OpenIDProvider) CustomURLSettings() *CustomURLSettings {
 	return nil
 }

-var _ (GothProvider) = &OpenIDProvider{}
+var _ GothProvider = &OpenIDProvider{}

 func init() {
 	RegisterGothProvider(&OpenIDProvider{})
--- a/services/auth/source/oauth2/providers_simple.go
+++ b/services/auth/source/oauth2/providers_simple.go
@ -48,7 +48,7 @@ func NewSimpleProvider(name, displayName string, scopes []string, newFn SimplePr
 	}
 }

-var _ (GothProvider) = &SimpleProvider{}
+var _ GothProvider = &SimpleProvider{}

 func init() {
 	RegisterGothProvider(
@ -69,13 +69,13 @@ func init() {
 		}))

 	// named gplus due to legacy gplus -> google migration (Google killed Google+). This ensures old connections still work
-	RegisterGothProvider(NewImagedProvider("/assets/img/auth/google.png", NewSimpleProvider("gplus", "Google", []string{"email"},
+	RegisterGothProvider(NewSimpleProvider("gplus", "Google", []string{"email"},
 		func(clientKey, secret, callbackURL string, scopes ...string) goth.Provider {
 			if setting.OAuth2Client.UpdateAvatar || setting.OAuth2Client.EnableAutoRegistration {
 				scopes = append(scopes, "profile")
 			}
 			return google.New(clientKey, secret, callbackURL, scopes...)
-		})))
+		}))

 	RegisterGothProvider(NewSimpleProvider("twitter", "Twitter", nil,
 		func(clientKey, secret, callbackURL string, scopes ...string) goth.Provider {
--- a/templates/user/auth/signin_inner.tmpl
+++ b/templates/user/auth/signin_inner.tmpl
@ -53,29 +53,17 @@
 	{{end}}

 	{{if and .OrderedOAuth2Names .OAuth2Providers}}
-	<hr class="ui divider"/>
 	<div id="oauth2-login-navigator">
-		<div id="oauth2-login-navigator-inner" 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">
+		<div class="gt-df gt-fc gt-jc">
+			<div class="ui horizontal divider">
+				{{.locale.Tr "sign_in_or"}}
+			</div>
+			<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
 				{{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}}
+					<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
+						<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
+						{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
 					</a>
 				{{end}}
 			</div>
--- a/templates/user/settings/security/accountlinks.tmpl
+++ b/templates/user/settings/security/accountlinks.tmpl
@ -8,7 +8,7 @@
 					{{range $key := .OrderedOAuth2Names}}
 						{{$provider := index $.OAuth2Providers $key}}
 						<a class="item" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-							<img width="20" height="20" src="{{AppSubUrl}}{{$provider.Image}}" alt="{{$provider.DisplayName}}">
+							<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
 							{{$provider.DisplayName}}
 						</a>
 					{{end}}
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@ -468,6 +468,10 @@ a.label,
  padding-bottom: 7.42px !important;
 }

+.ui.divider {
+  color: var(--color-text);
+}
+
 .ui.divider:not(.vertical,.horizontal) {
  border-top-color: var(--color-secondary) !important;
  border-bottom: none !important;
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@ -309,7 +309,8 @@ textarea:focus,
  .user.reset.password form .inline.field > textarea,
  .user.link-account form .inline.field > textarea,
  .user.signin form .inline.field > textarea,
-  .user.signup form .inline.field > textarea {
+  .user.signup form .inline.field > textarea,
+  .oauth-login-link {
    width: 50%;
  }
 }
@ -364,7 +365,8 @@ textarea:focus,
  .user.reset.password form input,
  .user.link-account form input,
  .user.signin form input,
-  .user.signup form input {
+  .user.signup form input,
+  .oauth-login-link {
    width: 100% !important;
  }
 }
--- a/web_src/fomantic/_site/globals/site.variables
+++ b/web_src/fomantic/_site/globals/site.variables
@ -7,3 +7,4 @@
@disabledOpacity: var(--opacity-disabled);
@variationPopupTooltip: false;
@linkHoverUnderline: underline;
+@variationButtonSocial: false;
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@ -439,219 +439,6 @@
  border-bottom-right-radius: 0;
 }

-/*-------------------
-         Social
-  --------------------*/
-
-/* Facebook */
-
-.ui.facebook.button {
-  background-color: #3B5998;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.facebook.button:hover {
-  background-color: #304d8a;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.facebook.button:active {
-  background-color: #2d4373;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Twitter */
-
-.ui.twitter.button {
-  background-color: #1DA1F2;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.twitter.button:hover {
-  background-color: #0298f3;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.twitter.button:active {
-  background-color: #0c85d0;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Google Plus */
-
-.ui.google.plus.button {
-  background-color: #DD4B39;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.google.plus.button:hover {
-  background-color: #e0321c;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.google.plus.button:active {
-  background-color: #c23321;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Linked In */
-
-.ui.linkedin.button {
-  background-color: #0077B5;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.linkedin.button:hover {
-  background-color: #00669c;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.linkedin.button:active {
-  background-color: #005582;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* YouTube */
-
-.ui.youtube.button {
-  background-color: #FF0000;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.youtube.button:hover {
-  background-color: #e60000;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.youtube.button:active {
-  background-color: #cc0000;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Instagram */
-
-.ui.instagram.button {
-  background-color: #49769C;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.instagram.button:hover {
-  background-color: #3d698e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.instagram.button:active {
-  background-color: #395c79;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Pinterest */
-
-.ui.pinterest.button {
-  background-color: #BD081C;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.pinterest.button:hover {
-  background-color: #ac0013;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.pinterest.button:active {
-  background-color: #8c0615;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* VK */
-
-.ui.vk.button {
-  background-color: #45668E;
-  color: #FFFFFF;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.vk.button:hover {
-  background-color: #395980;
-  color: #FFFFFF;
-}
-
-.ui.vk.button:active {
-  background-color: #344d6c;
-  color: #FFFFFF;
-}
-
-/* WhatsApp */
-
-.ui.whatsapp.button {
-  background-color: #25D366;
-  color: #FFFFFF;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.whatsapp.button:hover {
-  background-color: #19c55a;
-  color: #FFFFFF;
-}
-
-.ui.whatsapp.button:active {
-  background-color: #1da851;
-  color: #FFFFFF;
-}
-
-/* Telegram */
-
-.ui.telegram.button {
-  background-color: #0088CC;
-  color: #FFFFFF;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.telegram.button:hover {
-  background-color: #0077b3;
-  color: #FFFFFF;
-}
-
-.ui.telegram.button:active {
-  background-color: #006699;
-  color: #FFFFFF;
-}
-
 /*--------------
     Icon
 ---------------*/
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class="svg gitea-azuread" width="16" height="16" aria-hidden="true"><defs><linearGradient id="gitea-azuread__a" x1="13.25" x2="8.62" y1="13.02" y2="4.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1988d9"/><stop offset=".9" stop-color="#54aef0"/></linearGradient><linearGradient id="gitea-azuread__b" x1="11.26" x2="14.46" y1="10.47" y2="15.99" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#54aef0"/><stop offset=".29" stop-color="#4fabee"/><stop offset=".51" stop-color="#41a2e9"/><stop offset=".74" stop-color="#2a93e0"/><stop offset=".88" stop-color="#1988d9"/></linearGradient></defs><path fill="#50e6ff" d="m1.01 10.19 7.92 5.14 8.06-5.16L18 11.35l-9.07 5.84L0 11.35l1.01-1.16z"/><path fill="#fff" d="M1.61 9.53 8.93.81l7.47 8.73-7.47 4.72-7.32-4.73z"/><path fill="#50e6ff" d="M8.93.81v13.45L1.61 9.53 8.93.81z"/><path fill="url(#gitea-azuread__a)" d="M8.93.81v13.45l7.47-4.72L8.93.81z"/><path fill="#53b1e0" d="m8.93 7.76 7.47 1.78-7.47 4.72v-6.5z"/><path fill="#9cebff" d="M8.93 14.26 1.61 9.53l7.32-1.77v6.5z"/><path fill="url(#gitea-azuread__b)" d="M8.93 17.19 18 11.35l-1.01-1.18-8.06 5.16v1.86z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2075 2499.8" class="svg gitea-microsoftonline" width="16" height="16" aria-hidden="true"><path fill="#eb3c00" d="M0 2016.6V496.8L1344.4 0 2075 233.7v2045.9l-730.6 220.3L0 2016.6l1344.4 161.8V409.2L467.6 613.8v1198.3z"/></svg>`