fix friend requests ui

394-w25 · Jan 21, 2025 · 7f1121d · 7f1121d
1 parent bff0607
commit 7f1121d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/components/Account/Friends/FriendRequests.css b/src/components/Account/Friends/FriendRequests.css
@@ -0,0 +1,5 @@
+.friend-requests-content {
+    padding-top: 20px;
+    height: calc(100vh - 56px - 64px); /* This is the height of the viewport minus the height of the app bar and the bottom navigation bar */
+    margin-top: 3rem;
+}
diff --git a/src/components/Account/Friends/FriendRequests.jsx b/src/components/Account/Friends/FriendRequests.jsx
@@ -8,6 +8,7 @@ import {
 } from '../../../services/friendService';
 import AppBar from '../../AppBar/AppBar';
 import NavigationBar from '../../NavigationBar/NavigationBar';
+import "./FriendRequests.css";
 
 
 function FriendRequests({ user }) {
@@ -38,7 +39,7 @@ function FriendRequests({ user }) {
   return (
     <div>
       <AppBar />
-      <Container style={{ paddingTop: '20px', height: '100vh' }}>
+      <Container className="friend-requests-content">
         <h2>Friend Requests</h2>
 
         <List>

diff --git a/src/components/AppBar/AppBar.css b/src/components/AppBar/AppBar.css
@@ -5,7 +5,7 @@
     background-color: #4E2A84;
     color: white;
     height: 4rem;
-    padding: 0 1rem;
+    /* padding: 0 1rem; */
     position: fixed;
     top: 0;
     left: 0;
@@ -15,7 +15,7 @@
   }
 
   .app-bar-title {
-    margin: 0;
+    padding: 0 1rem;
   }
 
   .icon-button {
@@ -24,5 +24,6 @@
     color: white;
     cursor: pointer;
     font-size: 1.2rem;
+    padding-right: 1rem;
   }