From d881663d5a2baa2bae24fbdb90cfd0c045ef2b04 Mon Sep 17 00:00:00 2001
From: Ostend Suryajaya <osuryaja@uci.edu>
Date: Wed, 15 May 2024 15:01:14 -0700
Subject: [PATCH 1/3] Text for status column not responsively shrinks

---
 src/components/Checkin/VolunteerEventsTable.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
index 532f591..e07e01a 100644
--- a/src/components/Checkin/VolunteerEventsTable.jsx
+++ b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -101,7 +101,7 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
             justifyContent={'center'}
           >
             <Image src={status === 'Checked-in' ? checked_in : registered} />
-            <Text fontSize="md" textOverflow={'ellipsis'} maxW={48} overflow={'hidden'}>
+            <Text fontSize={status === 'Checked-in' ? "xs" : "md"} mr={status === 'Checked-in' ? 2 : 0}>
               {status}
             </Text>
           </Flex>

From 91b384c1e78cbdbe293b57dca62709cc58ad781b Mon Sep 17 00:00:00 2001
From: Ostend Suryajaya <osuryaja@uci.edu>
Date: Wed, 15 May 2024 15:55:15 -0700
Subject: [PATCH 2/3] Navbar is now responsive to device dimensions. Adjusted
 page margins accordingly.

---
 src/components/Events/EventFilteredGrid.jsx |  4 ++--
 src/components/Events/FeaturedDashboard.jsx |  2 +-
 src/components/Navbar/Navbar.jsx            | 25 +++++++++++----------
 src/pages/AdminPage.jsx                     |  2 +-
 src/pages/ArchivedEvents.jsx                |  2 +-
 src/pages/CheckinPage.jsx                   |  2 +-
 src/pages/DummyVolunteerProfilePage.jsx     |  2 +-
 src/pages/EventPage.jsx                     |  2 +-
 src/pages/HomePage.jsx                      |  2 +-
 src/pages/InputDataPage.jsx                 |  2 +-
 src/pages/PastEvents.jsx                    |  2 +-
 src/pages/ProfilePage.jsx                   |  2 +-
 src/pages/ViewEvents.jsx                    |  2 +-
 src/pages/VolunteerEventPage.jsx            |  2 +-
 src/pages/VolunteerHomePage.jsx             |  6 ++---
 src/pages/Volunteers.jsx                    |  4 ++--
 16 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/Events/EventFilteredGrid.jsx b/src/components/Events/EventFilteredGrid.jsx
index cdee277..d2ace05 100644
--- a/src/components/Events/EventFilteredGrid.jsx
+++ b/src/components/Events/EventFilteredGrid.jsx
@@ -125,12 +125,12 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
 
   return (
     <>
-    {/* Flag: Navbar responsive (Use 15%) */}
+      {/* Flag: Navbar responsive (Use 15%) */}
       <Flex
         flexDir={'column'}
         alignItems={'center'}
         bg="#E6EAEF"
-        ml={{ base: '2vw', xl: '15rem' }}
+        ml={{ base: '2vw', xl: '15%' }}
         mr={{ base: '2vw' }}
         pt={4}
         mb="32px"
diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
index 8e36aad..0ac2811 100644
--- a/src/components/Events/FeaturedDashboard.jsx
+++ b/src/components/Events/FeaturedDashboard.jsx
@@ -34,7 +34,7 @@ const FeaturedDashboard = ({
       flexDir={'column'}
       alignItems={'center'}
       bg="#E6EAEF"
-      ml={{ base: '3vw', xl: '15rem' }}
+      ml={{ base: '3vw', xl: '15%' }}
       mr={{ base: '3vw' }}
       pt={4}
     >
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index c043d81..fd84039 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -102,7 +102,7 @@ const Navbar = () => {
     <>
       {/* Box for entire navbar */}
       {/* Flag: Navbar responsive (Use 15%) */}
-      <Box position="fixed" top="0" w={{ base: 'full', xl: '15rem' }} float="left">
+      <Box position="fixed" top="0" w={{ base: 'full', xl: '15%' }} float="left">
         {/* Box for entire nabar with coloring */}
         <Box
           h="100vh"
@@ -246,10 +246,10 @@ const Navbar = () => {
                 alignItems: 'center',
                 gap: '10px',
                 padding: '12px',
-                marginLeft: '14px',
-                marginRight: '13px',
-                marginBottom: '18px',
-                borderRadius: '12px',
+                // marginLeft: '14px',
+                // marginRight: '13px',
+                // marginBottom: '18px',
+                // borderRadius: '12px',
                 backgroundColor: '#FFF',
                 border: '1px',
               }}
@@ -261,29 +261,30 @@ const Navbar = () => {
               href="#"
             >
               {/* User image */}
-              <Box style={{ borderRadius: '50%' }}>
+              {/* <Box style={{ borderRadius: '50%' }}> */}
                 <Image
                   src={user?.image_url}
-                  width="45px"
-                  height="45px"
+                  width="2.75vw"
+                  height="2.75vw"
                   borderRadius="full"
                   objectFit="cover"
                 />
-              </Box>
+              {/* </Box> */}
               <Box
                 style={{
                   flexDirection: 'column',
                   alignItems: 'center',
                 }}
+                maxWidth={{ base: '219px', md: '150px', xl: '50%' }}
               >
                 {/* User name */}
                 <Text
-                  maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
+                  // maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
                   overflow="hidden"
                   textOverflow="ellipsis"
                   fontWeight='800'
                   color='#000000'
-                  fontSize='14px'
+                  fontSize='1vw'
                   lineHeight='25px'
                   textAlign='left'
                   marginTop='-1px'
@@ -294,7 +295,7 @@ const Navbar = () => {
 
                 <Tag
                   style={{
-                    fontSize: '12px',
+                    fontSize: '0.75vw',
                     fontWeight: '500',
                     lineHeight: '16px',
                     color: '#717171',
diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx
index be2149a..cf33061 100644
--- a/src/pages/AdminPage.jsx
+++ b/src/pages/AdminPage.jsx
@@ -94,7 +94,7 @@ export default function AdminPage() {
   ));
 
   return (
-    <Flex ml="15rem" flexDir={'column'} padding={'2%'} gap={'1em'} backgroundColor={'#C8E6FF'}>
+    <Flex ml="15%" flexDir={'column'} padding={'2%'} gap={'1em'} backgroundColor={'#C8E6FF'}>
       <Flex justify={'space-between'}>
         <Text fontSize={'2.3rem'} fontWeight={500}>
           Administrators
diff --git a/src/pages/ArchivedEvents.jsx b/src/pages/ArchivedEvents.jsx
index ee8f9a7..2249cba 100644
--- a/src/pages/ArchivedEvents.jsx
+++ b/src/pages/ArchivedEvents.jsx
@@ -80,7 +80,7 @@ const ArchivedEvents = () => {
   }, []);
 
   return (
-    <Box ml="15rem" style={{ display: 'grid', gap: '22px' }} backgroundColor={'#c8e6fe'}>
+    <Box ml="15%" style={{ display: 'grid', gap: '22px' }} backgroundColor={'#c8e6fe'}>
       {/* Overall Imapct Card */}
       <Heading marginLeft={10} marginTop={5}>
         Overall Impact
diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx
index a894bf7..d0110b2 100644
--- a/src/pages/CheckinPage.jsx
+++ b/src/pages/CheckinPage.jsx
@@ -185,7 +185,7 @@ const CheckinPage = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
     >
       <Flex minW="95%" justifyContent={'space-between'} mt={10} mb={5}>
         <Flex alignItems={'center'} gap={3}>
diff --git a/src/pages/DummyVolunteerProfilePage.jsx b/src/pages/DummyVolunteerProfilePage.jsx
index 9847f96..dcdcee5 100644
--- a/src/pages/DummyVolunteerProfilePage.jsx
+++ b/src/pages/DummyVolunteerProfilePage.jsx
@@ -18,7 +18,7 @@ import SettingsField from '../components/DummyVolunteerProfile/SettingsField';
 
 export const DummyVolunteerProfilePage = () => {
   return (
-    <Box bg={'#e6eaee'} minHeight="100vh" paddingLeft={'15rem'}>
+    <Box bg={'#e6eaee'} minHeight="100vh" paddingLeft={'15%'}>
       {/* Profile Card and Account Information */}
       <Grid templateColumns="repeat(3, 1fr)" gap={4}>
         <GridItem colSpan={1}>
diff --git a/src/pages/EventPage.jsx b/src/pages/EventPage.jsx
index a3fa6d6..5b19c9f 100644
--- a/src/pages/EventPage.jsx
+++ b/src/pages/EventPage.jsx
@@ -257,7 +257,7 @@ const Events = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 1bf31b1..f952013 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -99,7 +99,7 @@ const Home = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex w={'95%'} flexDir={'column'}>
diff --git a/src/pages/InputDataPage.jsx b/src/pages/InputDataPage.jsx
index 0262b5f..0bfbd66 100644
--- a/src/pages/InputDataPage.jsx
+++ b/src/pages/InputDataPage.jsx
@@ -146,7 +146,7 @@ const InputDataPage = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       px={5}
     >
       <Flex width={'100%'} justifyContent={'space-between'} mt={10} mb={5}>
diff --git a/src/pages/PastEvents.jsx b/src/pages/PastEvents.jsx
index 24f0c19..32ec5e2 100644
--- a/src/pages/PastEvents.jsx
+++ b/src/pages/PastEvents.jsx
@@ -86,7 +86,7 @@ const PastEvents = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex w={'95%'} flexDir={'column'}>
diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
index 9962157..40e7c9e 100644
--- a/src/pages/ProfilePage.jsx
+++ b/src/pages/ProfilePage.jsx
@@ -135,7 +135,7 @@ export const ProfilePage = () => {
     <Box
       bg={{ base: 'white', md: '#E8EDF3', lg: '#E8EDF3' }}
       minHeight="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       w={{ base: '100vw', md: 'auto', lg: 'auto' }}
       display={{ base: 'flex', md: 'block', lg: 'block' }}
       flexDirection={{ base: 'column', md: 'row', lg: 'row' }}
diff --git a/src/pages/ViewEvents.jsx b/src/pages/ViewEvents.jsx
index 1f0e8f7..f958140 100644
--- a/src/pages/ViewEvents.jsx
+++ b/src/pages/ViewEvents.jsx
@@ -177,7 +177,7 @@ const ViewEvents = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
     >
       <Flex minW="95%" justifyContent={'space-between'} mt={10} mb={5}>
         <Flex alignItems={'center'} gap={3}>
diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx
index 1e4488c..5a581a9 100644
--- a/src/pages/VolunteerEventPage.jsx
+++ b/src/pages/VolunteerEventPage.jsx
@@ -52,7 +52,7 @@ const VolunteerEventPage = () => {
           flexDir={'row'}
           alignItems={'center'}
           bg="#E6EAEF"
-          ml={{ base: '0', xl: '15rem' }}
+          ml={{ base: '0', xl: '15%' }}
           pt={6}
           px={6}
           justifyContent={'space-between'}
diff --git a/src/pages/VolunteerHomePage.jsx b/src/pages/VolunteerHomePage.jsx
index fad9cfb..bca273e 100644
--- a/src/pages/VolunteerHomePage.jsx
+++ b/src/pages/VolunteerHomePage.jsx
@@ -44,8 +44,8 @@ const VolunteerHomePage = () => {
 
   const getEvents = async () => {
     try {
-      console.log
-      console.log(user)
+      console.log;
+      console.log(user);
       const eventsData = await Backend.get(`data/registered/${user.id}`);
       console.log(eventsData);
       setEvents(eventsData.data);
@@ -113,7 +113,7 @@ const VolunteerHomePage = () => {
         bg="#E6EAEF"
         minH="100vh"
         width={'100%'}
-        ml={{ base: '0', xl: '15rem' }}
+        ml={{ base: '0', xl: '15%' }}
         py={10}
       >
         <Flex w={{ base: '85%', md: '95%' }} flexDir={'column'}>
diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx
index 6a63043..0cd0079 100644
--- a/src/pages/Volunteers.jsx
+++ b/src/pages/Volunteers.jsx
@@ -97,7 +97,7 @@ const Volunteers = () => {
   return (
     <>
       {/* Registered + Checked-In */}
-      <Flex direction="column" ml={{ base: '0', xl: '15rem' }} bg="#E8EDF3" p="10" gap="10">
+      <Flex direction="column" ml={{ base: '0', xl: '15%' }} bg="#E8EDF3" p="10" gap="10">
         <Box bg="#F8F8F8" p="1rem" borderRadius="md">
           <Flex minW="95%" bg={'#F8F8F8'} borderRadius="lg" flexDir={'column'}>
             <HamburgerIcon
@@ -262,7 +262,7 @@ const Volunteers = () => {
                     whiteSpace: 'normal',
                     wordWrap: 'break-word',
                     color: 'white',
-                    my: "3"
+                    my: '3',
                   }}
                   height={'fit-content'}
                 >

From f553ba423903fa1559fee57ec0ff357ae0ade543 Mon Sep 17 00:00:00 2001
From: Ostend Suryajaya <osuryaja@uci.edu>
Date: Sun, 19 May 2024 01:08:21 -0700
Subject: [PATCH 3/3] Created responsive design for Navbar. Adjusted
 VolunteerEventPage and VolunteerHomePage to properly accomodate responsive
 Navbar design. Adjusted naming for Export buttons. iPad view now uses
 VolunteerSideViewDrawer.

---
 src/components/Events/EventFilteredGrid.jsx   | 12 +++++-----
 src/components/Events/FeaturedDashboard.jsx   | 21 ++++++++++--------
 src/components/Events/ImpactSummary.jsx       |  2 +-
 .../Events/PastEventsImpactSummary.jsx        |  2 +-
 src/components/Navbar/Navbar.jsx              | 11 +++++-----
 src/components/VolunteerSideViewDrawer.jsx    |  6 ++---
 src/pages/VolunteerEventPage.jsx              |  2 +-
 src/pages/VolunteerHomePage.jsx               | 10 ++++-----
 src/pages/Volunteers.jsx                      | 22 +++++++++++++++----
 9 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/src/components/Events/EventFilteredGrid.jsx b/src/components/Events/EventFilteredGrid.jsx
index d2ace05..00aa6c2 100644
--- a/src/components/Events/EventFilteredGrid.jsx
+++ b/src/components/Events/EventFilteredGrid.jsx
@@ -10,7 +10,7 @@ import {
   Heading,
   HStack,
 } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { SearchIcon } from '@chakra-ui/icons';
 import PropTypes from 'prop-types';
 
@@ -30,7 +30,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
   const [date, setDate] = useState('');
   const [fuse, setFuse] = useState();
 
-  const getEvents = async () => {
+  const getEvents = useCallback(async () => {
     try {
       const eventsData = await Backend.get('/events/currentEvents');
       setEvents(eventsData.data);
@@ -42,7 +42,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
     } catch (err) {
       console.log(`Error getting events: `, err.message);
     }
-  };
+  }, []);
 
   const getLocation = data => {
     let location = [];
@@ -75,7 +75,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
 
   useEffect(() => {
     getEvents();
-  }, []);
+  }, [getEvents]);
 
   const handleLocationChange = event => {
     const selectedLocation = event.target.value;
@@ -121,7 +121,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
     } else result = events;
     // result.map((e) -> e.)
     setDisplayEvents(result);
-  }, [name, location, date, fuse]);
+  }, [name, location, date, fuse, events]);
 
   return (
     <>
@@ -130,7 +130,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
         flexDir={'column'}
         alignItems={'center'}
         bg="#E6EAEF"
-        ml={{ base: '2vw', xl: '15%' }}
+        ml={{ base: '2vw', xl: isOpen ? '22%' : '15%' }}
         mr={{ base: '2vw' }}
         pt={4}
         mb="32px"
diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
index 0ac2811..990bab9 100644
--- a/src/components/Events/FeaturedDashboard.jsx
+++ b/src/components/Events/FeaturedDashboard.jsx
@@ -10,21 +10,23 @@ const FeaturedDashboard = ({
   setIsOpen,
   setShowOpenDrawerButton,
   onOpen,
+  isSideBarOpen,
   showOpenDrawerButton,
 }) => {
   const [featuredEvents, setFeaturedEvents] = useState([]);
   const numEvents = useBreakpointValue({ base: 1, md: 2, xl: 2 });
 
-  const getEvents = async () => {
-    try {
-      const eventsData = await Backend.get('/events');
-      setFeaturedEvents(eventsData.data.slice(0, numEvents));
-    } catch (err) {
-      console.log(`Error getting events: `, err.message);
-    }
-  };
 
   useEffect(() => {
+    const getEvents = async () => {
+      try {
+        const eventsData = await Backend.get('/events');
+        setFeaturedEvents(eventsData.data.slice(0, numEvents));
+      } catch (err) {
+        console.log(`Error getting events: `, err.message);
+      }
+    };
+    
     getEvents();
   }, [numEvents]);
 
@@ -34,7 +36,7 @@ const FeaturedDashboard = ({
       flexDir={'column'}
       alignItems={'center'}
       bg="#E6EAEF"
-      ml={{ base: '3vw', xl: '15%' }}
+      ml={{ base: '3vw', xl: isSideBarOpen ? '22%' : '15%' }}
       mr={{ base: '3vw' }}
       pt={4}
     >
@@ -128,6 +130,7 @@ FeaturedDashboard.propTypes = {
   setCurrentEventId: PropTypes.func.isRequired,
   setIsOpen: PropTypes.func.isRequired,
   setShowOpenDrawerButton: PropTypes.func.isRequired,
+  isSideBarOpen: PropTypes.bool
 };
 
 export default FeaturedDashboard;
diff --git a/src/components/Events/ImpactSummary.jsx b/src/components/Events/ImpactSummary.jsx
index 47d9bf9..54bb27f 100644
--- a/src/components/Events/ImpactSummary.jsx
+++ b/src/components/Events/ImpactSummary.jsx
@@ -137,7 +137,7 @@ const ImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export All Data
           </CSVLink>
           {/* {eventIdData.map((eventData) => <CSVLink
             data={eventData ? [eventData] : ''}
diff --git a/src/components/Events/PastEventsImpactSummary.jsx b/src/components/Events/PastEventsImpactSummary.jsx
index a2a715a..f6be914 100644
--- a/src/components/Events/PastEventsImpactSummary.jsx
+++ b/src/components/Events/PastEventsImpactSummary.jsx
@@ -124,7 +124,7 @@ const PastEventsImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export Past Events Data
           </CSVLink>
         </Button>
       </VStack>
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index fd84039..c214363 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -76,7 +76,7 @@ const Navbar = () => {
 
   useEffect(() => {
     updateUser();
-  }, []);
+  }, [updateUser]);
 
   // Change the paths for each button since these might change
   const homePath = '/';
@@ -252,6 +252,7 @@ const Navbar = () => {
                 // borderRadius: '12px',
                 backgroundColor: '#FFF',
                 border: '1px',
+                width: 'full'
               }}
               onClick={e => {
                 e.preventDefault();
@@ -264,8 +265,8 @@ const Navbar = () => {
               {/* <Box style={{ borderRadius: '50%' }}> */}
                 <Image
                   src={user?.image_url}
-                  width="2.75vw"
-                  height="2.75vw"
+                  width="20%"
+                  aspectRatio={1}
                   borderRadius="full"
                   objectFit="cover"
                 />
@@ -284,7 +285,7 @@ const Navbar = () => {
                   textOverflow="ellipsis"
                   fontWeight='800'
                   color='#000000'
-                  fontSize='1vw'
+                  fontSize='75%'
                   lineHeight='25px'
                   textAlign='left'
                   marginTop='-1px'
@@ -295,7 +296,7 @@ const Navbar = () => {
 
                 <Tag
                   style={{
-                    fontSize: '0.75vw',
+                    fontSize: '56.25%',
                     fontWeight: '500',
                     lineHeight: '16px',
                     color: '#717171',
diff --git a/src/components/VolunteerSideViewDrawer.jsx b/src/components/VolunteerSideViewDrawer.jsx
index bca554a..3d01f5a 100644
--- a/src/components/VolunteerSideViewDrawer.jsx
+++ b/src/components/VolunteerSideViewDrawer.jsx
@@ -3,7 +3,6 @@ import {
   Drawer,
   DrawerOverlay,
   DrawerContent,
-  DrawerCloseButton,
   DrawerBody,
   useDisclosure,
 } from '@chakra-ui/react';
@@ -46,7 +45,7 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     getEventById(eventId).then(data => setEventData(data));
     getEventDataVolunteerId(user?.id, eventId).then(data => setEventDataVolunteer(data));
     // setDateObj(new Date(Date.parse(eventData.date)))
-  }, [eventId]);
+  }, [eventId, user?.id]);
 
   function formatDate(dateString) {
     const months = [
@@ -81,12 +80,11 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="full">
       <DrawerOverlay />
       <DrawerContent>
-        <DrawerCloseButton />
         <DrawerBody>
           <Flex
             flexDir={'column'}
             w={'100%'}
-            maxW={'26em'}
+            maxW={'100vw'}
             mt={'1em'}
             px={{ base: '10px', md: '20px' }}
           >
diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx
index 5a581a9..9e81467 100644
--- a/src/pages/VolunteerEventPage.jsx
+++ b/src/pages/VolunteerEventPage.jsx
@@ -106,7 +106,7 @@ const VolunteerEventPage = () => {
         />
       </Box>
       {/* Drawer Component */}
-      {breakpoint == 'base' ? (
+      {breakpoint != 'xl' ? (
         <VolunteerSideViewDrawer
           eventId={currentEventId}
           isOpen={isDrawerOpen}
diff --git a/src/pages/VolunteerHomePage.jsx b/src/pages/VolunteerHomePage.jsx
index bca273e..0c92f56 100644
--- a/src/pages/VolunteerHomePage.jsx
+++ b/src/pages/VolunteerHomePage.jsx
@@ -13,7 +13,7 @@ import {
   useBreakpoint,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useCallback } from 'react';
 import { SearchIcon, HamburgerIcon } from '@chakra-ui/icons';
 
 import EventCard from '../components/Events/EventCard';
@@ -42,7 +42,7 @@ const VolunteerHomePage = () => {
 
   const { user } = useContext(UserContext);
 
-  const getEvents = async () => {
+  const getEvents = useCallback(async () => {
     try {
       console.log;
       console.log(user);
@@ -54,7 +54,7 @@ const VolunteerHomePage = () => {
     } catch (err) {
       console.log(`Error getting events: `, err.message);
     }
-  };
+  }, [user]);
 
   const eventCards = displayEvents.map(element => (
     <GridItem
@@ -73,7 +73,7 @@ const VolunteerHomePage = () => {
     if (user) {
       getEvents();
     }
-  }, [user]);
+  }, [getEvents, user]);
 
   useEffect(() => {
     if (!fuse) {
@@ -231,7 +231,7 @@ const VolunteerHomePage = () => {
           </Box>
         </Flex>
       </Flex>
-      {breakpoint == 'base' ? (
+      {breakpoint != 'xl' ? (
         <VolunteerSideViewDrawer
           eventId={currentEventId}
           isOpen={isOpen}
diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx
index 0cd0079..15852b2 100644
--- a/src/pages/Volunteers.jsx
+++ b/src/pages/Volunteers.jsx
@@ -13,7 +13,8 @@ import { IoDocumentText } from 'react-icons/io5';
 import VolunteersTable from '../components/VolunteersTable';
 import { useState, useEffect, useContext } from 'react';
 import Backend from '../utils/utils';
-import { ExternalLinkIcon, HamburgerIcon } from '@chakra-ui/icons';
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { AiOutlineExport } from 'react-icons/ai';
 import { GreyCustomSearchIcon } from '../components/Icons/CustomSearchIcon';
 import Fuse from 'fuse.js';
 import { TrophyIcon } from '../components/Icons/TrophyIcon';
@@ -255,7 +256,7 @@ const Volunteers = () => {
                 justifyContent={{ base: 'center', lg: 'start' }}
                 alignItems={'end'}
               >
-                <Button
+                {/* <Button
                   backgroundColor={'#0075FF'}
                   fontSize="lg"
                   style={{
@@ -266,13 +267,26 @@ const Volunteers = () => {
                   }}
                   height={'fit-content'}
                 >
-                  <ExternalLinkIcon marginRight="2" boxSize="6" color={'white'} />{' '}
+                  <ExternalLinkIcon marginRight="2" boxSize="1vw" color={'white'} />{' '}
+                  <CSVLink
+                    data={volunteerData.length ? volunteerData : []}
+                    filename="./data.csv"
+                    headers={header}
+                  >
+                    Export
+                  </CSVLink>
+                </Button> */}
+                <Button
+                  colorScheme={'messenger'}
+                  leftIcon={<AiOutlineExport></AiOutlineExport>}
+                  size="md"
+                >
                   <CSVLink
                     data={volunteerData.length ? volunteerData : []}
                     filename="./data.csv"
                     headers={header}
                   >
-                    Export All
+                    Export Volunteer Data
                   </CSVLink>
                 </Button>
               </Box>