move name and email to top

394-w25 · Jan 15, 2025 · c42adcc · c42adcc
1 parent b555c6f
commit c42adcc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/components/Account/Account.css b/src/components/Account/Account.css
@@ -0,0 +1,3 @@
+.account-details {
+    margin-bottom: 20px;
+}
diff --git 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>