From 964877c4950ad6ea74f3d20af1174a345d53b2d4 Mon Sep 17 00:00:00 2001
From: timmi <timmid999@gmail.com>
Date: Wed, 2 Apr 2025 04:04:01 -0700
Subject: [PATCH] Changed profile page image to react icon and added space
 between header and user info

---
 frontend/react-app/src/components/UserInfo.jsx | 3 ++-
 frontend/react-app/src/css/Profile.css         | 3 +--
 frontend/react-app/src/pages/Profile.jsx       | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/react-app/src/components/UserInfo.jsx b/frontend/react-app/src/components/UserInfo.jsx
index 7a473f07..7f81798e 100644
--- a/frontend/react-app/src/components/UserInfo.jsx
+++ b/frontend/react-app/src/components/UserInfo.jsx
@@ -1,5 +1,6 @@
 import "../css/Profile.css"
 import logo from '../logo.svg';
+import {  User, UserCircle } from "lucide-react";
 
 //user information used in the profile page
 function UserInfo({userInfo}){
@@ -15,7 +16,7 @@ function UserInfo({userInfo}){
     return (
         <div className="user-info">
             <div className="profile-picture">
-                    <img src={user.profilePictureUrl} alt="Profile Picture" />
+                    <UserCircle size={100}/>
                 </div>
                 <div className="profile-info">
                     <h1 className="profile-name">{userInfo.accountId}</h1>
diff --git a/frontend/react-app/src/css/Profile.css b/frontend/react-app/src/css/Profile.css
index 5624159e..290c8408 100644
--- a/frontend/react-app/src/css/Profile.css
+++ b/frontend/react-app/src/css/Profile.css
@@ -61,5 +61,4 @@
   }
   .logout-btn:hover {
     background-color: #6e6658; 
-}
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/Profile.jsx b/frontend/react-app/src/pages/Profile.jsx
index 188f4ff4..18205ff9 100644
--- a/frontend/react-app/src/pages/Profile.jsx
+++ b/frontend/react-app/src/pages/Profile.jsx
@@ -37,10 +37,10 @@ function Profile(){
     return (
     <div className='pageContainer'>
         <Header/>
-        <div className='pageBody'>
+        <div className='profile-page'>
             <UserInfo 
             userInfo = {userData}/>
-            <h1>My teams</h1>
+            <h1>My Teams</h1>
             <div className="teams-grid">
                 {teams.map((team) => (
                     <Teams team={team} key={team.teamId}/>