From 5e6443edc91f21370d8e82b75c06b6665ce75a3f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 29 Dec 2025 07:14:09 +0000
Subject: [PATCH 1/3] Initial plan


From 21098a24d338434b2b052ac761f1e2f7266839b4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 29 Dec 2025 07:18:32 +0000
Subject: [PATCH 2/3] Create ProfileAvatarDisplay component and refactor
 ProfileMenu

Co-authored-by: yb175 <181614786+yb175@users.noreply.github.com>
---
 frontend/src/components/profileAvatarDisplay.jsx | 12 ++++++++++++
 frontend/src/components/profileMenu.jsx          | 11 +++++------
 2 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/profileAvatarDisplay.jsx

diff --git a/frontend/src/components/profileAvatarDisplay.jsx b/frontend/src/components/profileAvatarDisplay.jsx
new file mode 100644
index 0000000..036e0b0
--- /dev/null
+++ b/frontend/src/components/profileAvatarDisplay.jsx
@@ -0,0 +1,12 @@
+const ProfileAvatarDisplay = ({ firstLetter, size = "10", onClick }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={`flex items-center justify-center w-${size} h-${size} rounded-full bg-purple-600 text-white font-bold text-lg cursor-pointer`}
+    >
+      {firstLetter}
+    </div>
+  );
+};
+
+export default ProfileAvatarDisplay;
diff --git a/frontend/src/components/profileMenu.jsx b/frontend/src/components/profileMenu.jsx
index 555dfea..b69f030 100644
--- a/frontend/src/components/profileMenu.jsx
+++ b/frontend/src/components/profileMenu.jsx
@@ -3,17 +3,16 @@ import { useState } from "react";
 import { Link } from "react-router";
 import { useDispatch} from "react-redux";
 import { logout } from "../slice/authSlice";
+import ProfileAvatarDisplay from "./profileAvatarDisplay";
 const ProfileMenu = ({ firstLetter }) => {
   const [open, setOpen] = useState(false);
   const dispatch = useDispatch();
   return (
     <div className="relative">
-      <div
-        onClick={() => setOpen(!open)}
-        className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold text-lg cursor-pointer"
-      >
-        {firstLetter}
-      </div>
+      <ProfileAvatarDisplay 
+        firstLetter={firstLetter} 
+        onClick={() => setOpen(!open)} 
+      />
 
       {open && (
         <ul className="menu bg-base-200 rounded-box w-56 absolute right-0 mt-3 shadow-lg border border-gray-700 z-50">

From d6db65e29e7a0298445373cc6a06f75de3aa7db1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 29 Dec 2025 07:20:52 +0000
Subject: [PATCH 3/3] Fix ProfileAvatarDisplay to use static Tailwind classes

Co-authored-by: yb175 <181614786+yb175@users.noreply.github.com>
---
 frontend/src/components/profileAvatarDisplay.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/profileAvatarDisplay.jsx b/frontend/src/components/profileAvatarDisplay.jsx
index 036e0b0..cbfdb6f 100644
--- a/frontend/src/components/profileAvatarDisplay.jsx
+++ b/frontend/src/components/profileAvatarDisplay.jsx
@@ -1,8 +1,8 @@
-const ProfileAvatarDisplay = ({ firstLetter, size = "10", onClick }) => {
+const ProfileAvatarDisplay = ({ firstLetter, onClick }) => {
   return (
     <div
       onClick={onClick}
-      className={`flex items-center justify-center w-${size} h-${size} rounded-full bg-purple-600 text-white font-bold text-lg cursor-pointer`}
+      className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold text-lg cursor-pointer"
     >
       {firstLetter}
     </div>