media: use rect instead of circle in fallback avatar

Normal avatars already have border-radius. The raw svg being a rectangle
allows space squircles to work properly too.
This commit is contained in:
Tulir Asokan 2024-12-29 15:28:29 +02:00
parent f4a778ecbb
commit 534e36da22
2 changed files with 2 additions and 2 deletions

View file

@ -125,7 +125,7 @@ func (new *noErrorWriter) Write(p []byte) (n int, err error) {
// note: this should stay in sync with makeAvatarFallback in web/src/api/media.ts
const fallbackAvatarTemplate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<circle cx="500" cy="500" r="500" fill="%s"/>
<rect x="0" y="0" width="1000" height="1000" fill="%s"/>
<text x="500" y="750" text-anchor="middle" fill="#fff" font-weight="bold" font-size="666"
font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
>%s</text>

View file

@ -54,7 +54,7 @@ export const getUserColor = (userID: UserID) => {
// note: this should stay in sync with fallbackAvatarTemplate in cmd/gomuks.media.go
function makeFallbackAvatar(backgroundColor: string, fallbackCharacter: string): string {
return "data:image/svg+xml," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<circle cx="500" cy="500" r="500" fill="${backgroundColor}"/>
<rect x="0" y="0" width="1000" height="1000" fill="${backgroundColor}"/>
<text x="500" y="750" text-anchor="middle" fill="#fff" font-weight="bold" font-size="666"
font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
>${escapeHTMLChar(fallbackCharacter)}</text>