From 90c249a481fd539e7ec2800eb39cbb6999d92270 Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Wed, 6 Mar 2024 13:54:44 +0000
Subject: [PATCH] feat: Contrast and both initials for user avatar (#2863)

---
 editor.planx.uk/src/components/Header.test.tsx |  2 +-
 editor.planx.uk/src/components/Header.tsx      | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/editor.planx.uk/src/components/Header.test.tsx b/editor.planx.uk/src/components/Header.test.tsx
index 918874934d..8650eae1a9 100644
--- a/editor.planx.uk/src/components/Header.test.tsx
+++ b/editor.planx.uk/src/components/Header.test.tsx
@@ -95,7 +95,7 @@ describe("Header Component - Editor Route", () => {
 
   it("displays avatar and settings", () => {
     setup(<Header />);
-    expect(screen.getByText("T")).toBeInTheDocument();
+    expect(screen.getByText("TU")).toBeInTheDocument();
     expect(screen.getByLabelText("Toggle Menu")).toBeInTheDocument();
   });
 
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index fd45159732..b95ad0c774 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -6,6 +6,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import AppBar from "@mui/material/AppBar";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
+import { grey } from '@mui/material/colors';
 import Container from "@mui/material/Container";
 import IconButton from "@mui/material/IconButton";
 import Link from "@mui/material/Link";
@@ -453,7 +454,16 @@ const EditorToolbar: React.FC<{
                     </IconButton>
                   )}
                   <Box mr={1}>
-                    <Avatar>{user.firstName[0]}</Avatar>
+                    <Avatar 
+                      sx={{ 
+                        bgcolor: grey[200], 
+                        color: "text.primary",
+                        fontSize: "1em",
+                        fontWeight: "600",
+                      }}
+                    >
+                      {user.firstName[0]}{user.lastName[0]}
+                    </Avatar>
                   </Box>
                   <IconButton
                     edge="end"