diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss index 74b73326ac..576d1feaef 100644 --- a/stylesheets/components/Avatar.scss +++ b/stylesheets/components/Avatar.scss @@ -78,7 +78,6 @@ display: flex; justify-content: center; text-align: center; - text-transform: uppercase; transition: font-size 100ms ease-out; } diff --git a/stylesheets/components/AvatarTextEditor.scss b/stylesheets/components/AvatarTextEditor.scss index 7b5edad206..1e477e167c 100644 --- a/stylesheets/components/AvatarTextEditor.scss +++ b/stylesheets/components/AvatarTextEditor.scss @@ -9,7 +9,6 @@ outline: none; padding: 0; text-align: center; - text-transform: uppercase; transition: font-size 30ms linear; width: 100%; } @@ -17,7 +16,6 @@ &__measure { inset-inline-start: -9999; position: fixed; - text-transform: uppercase; top: -9999; touch-action: none; visibility: hidden; diff --git a/ts/test-both/util/getInitials_test.ts b/ts/test-both/util/getInitials_test.ts index d44f79f824..ee739518b1 100644 --- a/ts/test-both/util/getInitials_test.ts +++ b/ts/test-both/util/getInitials_test.ts @@ -23,9 +23,18 @@ describe('getInitials', () => { assert.strictEqual(getInitials('Bo'), 'B'); }); + it('returns lowercase initials for lowercase names', () => { + assert.strictEqual(getInitials('alice'), 'a'); + assert.strictEqual(getInitials('foo bar'), 'fb'); + }); + + it('returns initials for lowercase with uppercase names', () => { + assert.strictEqual(getInitials('foo Bar'), 'fB'); + assert.strictEqual(getInitials('Foo bar'), 'Fb'); + }); + [ 'Foo Bar', - 'foo bar', 'F Bar', 'Foo B', 'FB', @@ -38,7 +47,6 @@ describe('getInitials', () => { 'Foo "Qux" Bar', 'Foo-Qux Bar', 'Foo Bar-Qux', - "Foo b'Arr", ].forEach(name => { it(`returns 'FB' for '${name}'`, () => { assert.strictEqual(getInitials(name), 'FB'); diff --git a/ts/util/avatarDataToBytes.ts b/ts/util/avatarDataToBytes.ts index 60b5f5132e..6f85ff0323 100644 --- a/ts/util/avatarDataToBytes.ts +++ b/ts/util/avatarDataToBytes.ts @@ -101,15 +101,14 @@ export async function avatarDataToBytes( ); } else if (color && text) { const { bg, fg } = getAvatarColor(color); - const textToWrite = text.toLocaleUpperCase(); setCanvasBackground(bg, context, canvas); context.fillStyle = fg; - const font = await getFont(textToWrite); + const font = await getFont(text); context.font = font; context.textBaseline = 'middle'; context.textAlign = 'center'; - context.fillText(textToWrite, CANVAS_SIZE / 2, CANVAS_SIZE / 2 + 30); + context.fillText(text, CANVAS_SIZE / 2, CANVAS_SIZE / 2 + 30); } else if (color && icon) { const iconPath = `images/avatars/avatar_${icon}.svg`; await drawImage(iconPath, context, canvas); diff --git a/ts/util/getInitials.ts b/ts/util/getInitials.ts index 80737cca55..4e7233b171 100644 --- a/ts/util/getInitials.ts +++ b/ts/util/getInitials.ts @@ -22,7 +22,7 @@ export function getInitials(name?: string): string | undefined { return parsedName; } - const parts = parsedName.toUpperCase().split(' '); + const parts = parsedName.split(' '); const partsLen = parts.length; return partsLen === 1