centered aligned ratinghistory profile info

394-w25 · Jan 15, 2025 · 17d22ba · 17d22ba
1 parent 3ff5377
commit 17d22ba
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/src/components/RatingHistory/RatingHistory.css b/src/components/RatingHistory/RatingHistory.css
@@ -3,6 +3,17 @@
     height: 80px;
     border-radius: 50%;
     background-color: #e0e0e0;
-    display: inline-block;
-    margin-bottom: 20px;
-}
+    margin: 0 auto 20px auto; /* Center horizontally and add bottom margin */
+}
+
+.profile-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center children horizontally */
+    justify-content: center;
+}
+
+.profile-name-email {
+    margin: 5px 0; /* Add vertical spacing */
+    text-align: center; /* Ensure text is centered */
+}
diff --git a/src/components/RatingHistory/RatingHistory.jsx b/src/components/RatingHistory/RatingHistory.jsx
@@ -18,9 +18,6 @@ function RatingHistory({ userName }) {
             const querySnapshot = await getDocs(collection(db, "posts"));
             const posts = [];
             querySnapshot.forEach((doc) => {
-                // console.log("doc status before pushing: ", doc.data());
-                // console.log("username: ", doc.data().username);
-                // console.log("displayName: ", userName.displayName);
                 if (doc.data().username === userName?.displayName){
                     posts.push({ id: doc.id, ...doc.data() });
                 }
@@ -51,13 +48,18 @@ function RatingHistory({ userName }) {
             <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
                 {/* Profile Icon */}
                 <Box className="profile-icon">
-                    {/* Profile Name */}
-                    <h1>{userName.displayName}</h1>
-                    {/* Profile Email */}
-                    <p>{userName.email}</p>
+
+                {/* Profile Name and Email */}
+                <Box className="profile-text">
+                    <h1 className="profile-name-email">{userName.displayName}</h1>
+                    <p className="profile-name-email">{userName.email}</p>
                 </Box>
+
+                </Box>
+                <br />
             </Container>
 
+
             <Container maxWidth="sm">
                 <Box paddingBottom="30px">
                 <Stack spacing={3}>