Align default avatar and fix colors in composer pills (#30739)

* fix: align default avatar in composer pills

* fix: use correct color for avatar in composer pills when there is no image

* test(e2e): add test for cider mention

* chore: fix typo

playwright/e2e/composer/CIDER.spec.ts

@@ -14,6 +14,9 @@ const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
 test.describe("Composer", () => {
     test.use({
         displayName: "Janet",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
     });
 
     test.use({
@@ -94,5 +97,22 @@ test.describe("Composer", () => {
                 ).toBeVisible();
             });
         });
+
+        test("can send mention", { tag: "@screenshot" }, async ({ page, bot, app }) => {
+            // Set up a private room so we have another user to mention
+            await app.client.createRoom({
+                is_direct: true,
+                invite: [bot.credentials.userId],
+            });
+            await app.viewRoomByName("Bob");
+
+            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            await composer.pressSequentially("@bob");
+            await page.getByRole("option", { name: "Bob" }).click();
+            await expect(composer.getByText("Bob")).toBeVisible();
+            await expect(composer).toMatchScreenshot("mention.png");
+            await composer.press("Enter");
+            await expect(page.locator(".mx_EventTile_body", { hasText: "Bob" })).toBeVisible();
+        });
     });
 });