feat: Contrast and both initials for user avatar (#2863)

theopensystemslab · Mar 6, 2024 · 90c249a · 90c249a
1 parent 92f2046
commit 90c249a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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"