From 7f1121d31bc58a1825b75fd4bad118b84512910d Mon Sep 17 00:00:00 2001
From: Anna Cai <annacai44@gmail.com>
Date: Tue, 21 Jan 2025 01:04:40 -0600
Subject: [PATCH] fix friend requests ui

---
 src/components/Account/Friends/FriendRequests.css | 5 +++++
 src/components/Account/Friends/FriendRequests.jsx | 3 ++-
 src/components/AppBar/AppBar.css                  | 5 +++--
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Account/Friends/FriendRequests.css

diff --git a/src/components/Account/Friends/FriendRequests.css b/src/components/Account/Friends/FriendRequests.css
new file mode 100644
index 0000000..90a2ead
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/src/components/Account/Friends/FriendRequests.jsx b/src/components/Account/Friends/FriendRequests.jsx
index 9635202..6dc48f7 100644
--- 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
index 9cede87..fdfdc24 100644
--- 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;
   }
   
\ No newline at end of file