From c42adccef3969e9191d3cd2b588de9978cb7535f Mon Sep 17 00:00:00 2001
From: Anna Cai <annacai44@gmail.com>
Date: Wed, 15 Jan 2025 13:25:47 -0600
Subject: [PATCH] move name and email to top

---
 src/components/Account/Account.css |  3 +++
 src/components/Account/Account.jsx | 23 +++++++++++------------
 2 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Account/Account.css

diff --git a/src/components/Account/Account.css b/src/components/Account/Account.css
new file mode 100644
index 0000000..689db84
--- /dev/null
+++ b/src/components/Account/Account.css
@@ -0,0 +1,3 @@
+.account-details {
+    margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/src/components/Account/Account.jsx b/src/components/Account/Account.jsx
index ad09be9..7dad133 100644
--- a/src/components/Account/Account.jsx
+++ b/src/components/Account/Account.jsx
@@ -5,8 +5,7 @@ import AppBar from '../AppBar/AppBar';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
-
-
+import "./Account.css";
 
 function Account({ userName, userEmail, profilePic }) {
     const navigate = useNavigate();
@@ -29,6 +28,16 @@ function Account({ userName, userEmail, profilePic }) {
                     <Avatar sx={{ width: 80, height: 80 }} src={profilePic} />
                 </Box>
 
+                {/* Account Details */}
+                <Box className="account-details">
+                    <Typography variant="body1" style={{ fontWeight: 'bold', backgroundColor: '#2196f3', color: 'white', padding: '10px', borderRadius: '5px' }}>
+                        {"Name: "}{userName?.displayName || "Unknown User"}
+                    </Typography>
+                    <Typography variant="body1" style={{ fontWeight: 'bold', backgroundColor: '#4caf50', color: 'white', padding: '10px', borderRadius: '5px', marginTop: '10px' }}>
+                        {"Email: "}{userEmail || "No email available"}
+                    </Typography>
+                </Box>
+
                 {/* Stats */}
                 <Box style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '20px' }}>
                     <Card style={{ width: '45%', backgroundColor:'#BCBCBC' }}>
@@ -45,16 +54,6 @@ function Account({ userName, userEmail, profilePic }) {
                     </Card>
                 </Box>
 
-                {/* Account Details */}
-                <Box className="account-details">
-                    <Typography variant="body1" style={{ fontWeight: 'bold', backgroundColor: '#2196f3', color: 'white', padding: '10px', borderRadius: '5px' }}>
-                        {"Name: "}{userName?.displayName || "Unknown User"}
-                    </Typography>
-                    <Typography variant="body1" style={{ fontWeight: 'bold', backgroundColor: '#4caf50', color: 'white', padding: '10px', borderRadius: '5px', marginTop: '10px' }}>
-                        {"Email: "}{userEmail || "No email available"}
-                    </Typography>
-                </Box>
-
                 {/* Friend and Privacy Settings */}
                 <Divider style={{ margin: '20px 0' }} />
                 <Box>