rating history UI fix

394-w25 · Jan 19, 2025 · 1fd4cd5 · 1fd4cd5
1 parent 7bb1a48
commit 1fd4cd5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/src/components/RatingHistory/RatingHistory.css b/src/components/RatingHistory/RatingHistory.css
@@ -2,4 +2,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+}
+
+.rating-history-page {
+    padding: 3em;
+    height: 100vh;
 }
diff --git a/src/components/RatingHistory/RatingHistory.jsx b/src/components/RatingHistory/RatingHistory.jsx
@@ -46,33 +46,35 @@ function RatingHistory({ userName, profilePic }) {
     return (
         <div>
             <AppBar />
-            <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
-                <Box className="profile-box">
+            <Container className='rating-history-page'>
 
-                    <Avatar sx={{ width: 80, height: 80 }} src={profilePic} />
-                    <Typography variant="h5">{userName.displayName}</Typography> 
-                </Box>
-                <br />
-            </Container>
+                <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
+                    <Box className="profile-box">
 
+                        <Avatar sx={{ width: 80, height: 80 }} src={profilePic} />
+                        <Typography variant="h5">{userName.displayName}</Typography> 
+                    </Box>
+                    <br />
+                </Container>
 
-            <Container maxWidth="sm">
-                <Box paddingBottom="30px">
-                <Stack spacing={3}>
-                    { filteredPost.length === 0 ?
-                        (<p>Loading posts...</p>) :
-                        (filteredPost
-                            .slice()
-                            .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
-                            <div key={post.id}>
-                            <Post post={post} friends={fake_friends} />
-                            </div>)
-                        )
-                    }
-                </Stack>
-                </Box>
+                <Container maxWidth="sm">
+                    <Box paddingBottom="30px">
+                    <Stack spacing={3}>
+                        { filteredPost.length === 0 ?
+                            (<p>Loading posts...</p>) :
+                            (filteredPost
+                                .slice()
+                                .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
+                                <div key={post.id}>
+                                <Post post={post} friends={fake_friends} />
+                                </div>)
+                            )
+                        }
+                    </Stack>
+                    </Box>
+                </Container>
+                <NavigationBar />
             </Container>
-            <NavigationBar />
         </div>
     )