Fix avatar from name to support lowercase

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;
   }
 

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;

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');

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);

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