Merge branch 'main' into 178-volunteer-events-page-side-view-mobile-bug

ctc-uci · May 2, 2024 · 10df806 · 10df806
2 parents b26d63a + b1855ce
commit 10df806
Show file tree

Hide file tree

Showing 54 changed files with 6,310 additions and 8,065 deletions.
diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/components/AddEventsModal/AddEventsModal.jsx b/src/components/AddEventsModal/AddEventsModal.jsx
@@ -55,7 +55,6 @@ const AddEventsModal = () => {
       });
       // TODO: API request is comment out for now due to form change
       await postEvent(eventData);
-      console.log(eventData);
       toast.close(toastIdRef.current);
       toast({
         title: 'Event Created.',

diff --git a/src/components/AdminModals/AddUserModal.jsx b/src/components/AdminModals/AddUserModal.jsx
@@ -69,8 +69,6 @@ export default function AddUserModal({ isOpen, onClose, setAdminData }) {
   const isSubmittable =
     userData.first_name === '' || userData.last_name === '' || !emailRegex.test(userData.email);
 
-  console.log('userData:', userData);
-
   return (
     <Flex>
       <Modal isOpen={isOpen} onClose={onClose}>

diff --git a/src/components/AdminModals/EditUserModal.jsx b/src/components/AdminModals/EditUserModal.jsx
@@ -97,8 +97,6 @@ export default function EditUserModal({ isOpen, onClose, selectedAdmin, setAdmin
     }
   };
 
-  console.log('currentUserData:', currentUserData);
-
   return (
     <Flex>
       <Modal isOpen={isOpen} onClose={onClose}>

diff --git a/src/components/Auth/AuthPage.jsx b/src/components/Auth/AuthPage.jsx
@@ -0,0 +1,66 @@
+import { Box, SimpleGrid, Image, Heading } from '@chakra-ui/react';
+import S2T_Logo from '../../Assets/S2T_Logo.png';
+import PropTypes from 'prop-types';
+
+const AuthPage = ({ children }) => {
+  return (
+    <SimpleGrid columns={2} spacing={0} minH={'100vh'} style={{ fontFamily: 'Poppins' }}>
+      <Box
+        backgroundColor="#2D558A"
+        position="relative"
+        display={'flex'}
+        flexDir={'column'}
+        justifyContent={'center'}
+        alignItems={'center'}
+      >
+        <Image
+          borderRadius="full"
+          src={S2T_Logo}
+          alt="Logo"
+          px={['1rem', '2rem', '4rem']}
+          maxH={'24rem'}
+        />
+        <Box
+          sytle={{ display: 'flex', flexDir: 'column', justifyContent: 'center', gap: 10 }}
+          width={'100%'}
+          objectFit={'cover'}
+          px={['1rem', '2rem', '4rem']}
+        >
+          <Heading
+            style={{
+              color: 'white',
+              // fontSize: '40px',
+              fontWeight: '600',
+              // marginTop: '52px',
+              textAlign: 'center',
+            }}
+            fontSize={['24px', '32px', '40px']}
+          >
+            Stand Up To Trash
+          </Heading>
+          <Heading
+            style={{
+              color: 'white',
+              // fontSize: '32px',
+              fontWeight: '600',
+              // marginTop: '20px',
+              textAlign: 'center',
+            }}
+            fontSize={['16px', '24px', '32px']}
+          >
+            Making a Difference
+          </Heading>
+        </Box>
+      </Box>
+      <Box display={'flex'} h="100%" justifyContent={'center'} alignContent={'center'} mx={4}>
+        {children}
+      </Box>
+    </SimpleGrid>
+  );
+};
+
+AuthPage.propTypes = {
+  children: PropTypes.node,
+};
+
+export default AuthPage;
diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -92,7 +92,11 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
           </Flex>
         </Flex>
       </Td>
-      <Td display={{ base: 'none', xl: 'block' }}>{number_in_party}</Td>
+      <Td>
+        <Flex alignItems={'start'} justifyContent={'start'}>
+          <Text fontSize="md">{number_in_party}</Text>
+        </Flex>
+      </Td>
       <Td>
         <Flex gap={2} justifyContent={'center'} alignItems={'center'}>
           {is_checked_in ? (
@@ -218,7 +222,7 @@ const VolunteerEventsTable = ({
               </Flex>
             </Th>
             <Th display={{ base: 'none', xl: 'block' }}>
-              <Flex gap={2}>
+              <Flex>
                 <Text color="#2D3748" fontWeight="650">
                   Party Size
                 </Text>

diff --git a/src/components/EditProfilePictureModal.jsx b/src/components/EditProfilePictureModal.jsx
@@ -26,7 +26,6 @@ const EditProfilePictureModal = ({ isOpen, onClose, userInfo }) => {
   } = useDisclosure();
   const uploadPhoto = id => {
     updateProfileImage(id, photos['imageUrl']);
-    console.log('chagned photo');
     setIsLoading(false);
   };
   const deletePhoto = id => {
@@ -35,12 +34,9 @@ const EditProfilePictureModal = ({ isOpen, onClose, userInfo }) => {
       'https://i.pinimg.com/originals/a4/af/12/a4af1288eab8714320fa8453f72d79fd.jpg',
     );
     console.log(res);
-    console.log('deleted');
   };
 
-  useEffect(() => {
-    console.log(photos);
-  }, [photos]);
+  useEffect(() => {}, [photos]);
 
   // closes dropzone modal when loading finished
   useEffect(() => {

diff --git a/src/components/EventRegistration/LoadingModal.jsx b/src/components/EventRegistration/LoadingModal.jsx
@@ -0,0 +1,28 @@
+import RegistrationModal from './RegistrationModal';
+import { Box, Text, Flex, Spinner } from '@chakra-ui/react';
+
+const LoadingModal = ({ ...props }) => {
+  return (
+    <RegistrationModal {...props} buttons={<></>}>
+      <Flex align={'center'} justify={'center'} w="100%" pt="80px" mb="46px">
+        <Spinner color="blue.500" size={'xl'} speed="0.8s" thickness="6px" />
+      </Flex>
+      <Box>
+        <Text fontFamily={'Avenir'} fontSize={'30px'} align={'center'} fontWeight={800}>
+          {`Registering...`}
+        </Text>
+        <Text
+          color={'#717171'}
+          fontSize={'22px'}
+          align={'center'}
+          fontFamily={'Avenir'}
+          fontWeight={800}
+        >
+          {`Hang tight, and you'll registered soon!`}
+        </Text>
+      </Box>
+    </RegistrationModal>
+  );
+};
+
+export default LoadingModal;
diff --git a/src/components/EventRegistration/NameAndEmailModal.jsx b/src/components/EventRegistration/NameAndEmailModal.jsx
@@ -0,0 +1,131 @@
+import RegistrationModal from './RegistrationModal';
+import { Flex, Icon, Text, Link, Input } from '@chakra-ui/react';
+import { VscSparkleFilled } from 'react-icons/vsc';
+import { GoArrowRight } from 'react-icons/go';
+import { useContext } from 'react';
+import UserContext from '../../utils/UserContext';
+
+const NameAndEmailModal = ({ ...props }) => {
+  const { user } = useContext(UserContext);
+  return (
+    <RegistrationModal title="What is your name and Email?" {...props}>
+      <Flex
+        flexDir={'column'}
+        backgroundColor={'#DAEBFF'}
+        p={'1em'}
+        borderRadius={'12px'}
+        mb={'1em'}
+      >
+        <Flex align={'center'} gap={'0.25em'}>
+          <Flex
+            justify={'center'}
+            align={'center'}
+            backgroundColor={'#0075FF'}
+            w={'1.5em'}
+            h={'1.5em'}
+            borderRadius={'4px'}
+            flexDir={'column'}
+          >
+            <Icon as={VscSparkleFilled} color={'white'} />
+          </Flex>
+          <Text as={'b'} fontSize={'1.25em'} color={'#3B3B3B'}>
+            Autofilled from your profile
+          </Text>
+        </Flex>
+
+        <Flex align={'center'} gap={'0.25em'}>
+          <Flex
+            justify={'center'}
+            align={'center'}
+            backgroundColor={'#10C13F'}
+            w={'1.5em'}
+            h={'1.5em'}
+            borderRadius={'4px'}
+            flexDir={'column'}
+            visibility={'hidden'}
+          >
+            <Icon as={VscSparkleFilled} color={'white'} />
+          </Flex>
+          <Text color={'#717171'}>Collected from your account</Text>
+        </Flex>
+
+        <Flex align={'center'} mt={'0.5em'} gap={'0.25em'}>
+          <Flex
+            justify={'center'}
+            align={'center'}
+            backgroundColor={'#10C13F'}
+            w={'1.5em'}
+            h={'1.5em'}
+            borderRadius={'4px'}
+            flexDir={'column'}
+            visibility={'hidden'}
+          >
+            <Icon as={VscSparkleFilled} color={'white'} />
+          </Flex>
+          <Link color={'#0075FF'} fontWeight={600} fontSize={'1.15em'} href="/profile">
+            Change information
+          </Link>
+          <Icon as={GoArrowRight} color={'#0075FF'} boxSize={'1.65em'} ml={'0.2em'} />
+        </Flex>
+      </Flex>
+
+      <Flex flexDir={'column'}>
+        <Flex mb={'1em'} gap={'1em'}>
+          <Flex flexDir={'column'}>
+            <Text fontWeight={600} color={'#3B3B3B'}>
+              First Name
+            </Text>
+            <Input
+              value={user.first_name}
+              fontSize={'1.25em'}
+              borderColor={'#EFEFEF'}
+              borderWidth={'4px'}
+              h={'2.5em'}
+              color={'#3B3B3B'}
+              _disabled={{ color: '#3B3B3B', fontWeight: 500 }}
+              _hover={{ borderColor: '#EFEFEF' }}
+              disabled
+            />
+          </Flex>
+
+          <Flex flexDir={'column'}>
+            <Text fontWeight={600} color={'#3B3B3B'}>
+              Last Name
+            </Text>
+            <Input
+              value={user.last_name}
+              borderRadius={'4px'}
+              fontSize={'1.25em'}
+              borderColor={'#EFEFEF'}
+              borderWidth={'4px'}
+              h={'2.5em'}
+              color={'#3B3B3B'}
+              _disabled={{ color: '#3B3B3B', fontWeight: 500 }}
+              _hover={{ borderColor: '#EFEFEF' }}
+              disabled
+            />
+          </Flex>
+        </Flex>
+
+        <Flex flexDir={'column'}>
+          <Text fontWeight={600} color={'#3B3B3B'}>
+            Email
+          </Text>
+          <Input
+            value={user.email}
+            borderRadius={'4px'}
+            fontSize={'1.25em'}
+            borderColor={'#EFEFEF'}
+            borderWidth={'4px'}
+            h={'2.5em'}
+            _disabled={{ color: '#3B3B3B', fontWeight: 500 }}
+            _hover={{ borderColor: '#EFEFEF' }}
+            disabled
+          />
+        </Flex>
+      </Flex>
+    </RegistrationModal>
+  );
+};
+
+export default NameAndEmailModal;
diff --git a/src/components/EventRegistration/PartySizeModal.jsx b/src/components/EventRegistration/PartySizeModal.jsx
@@ -0,0 +1,75 @@
+import { Icon, Flex, Text } from '@chakra-ui/react';
+import RegistrationModal from './RegistrationModal';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { AddIcon, MinusIcon } from '@chakra-ui/icons';
+
+const PartySizeModal = ({ registrationFlowState, ...props }) => {
+  // Copy to prevent mutating original instance
+  registrationFlowState = { ...registrationFlowState };
+  registrationFlowState.continueActive =
+    registrationFlowState.continueActive &&
+    registrationFlowState.partySize > 0 &&
+    registrationFlowState.partySize <= 100;
+
+  const [partySize, setPartySize] = useState(registrationFlowState.partySize);
+  return (
+    <RegistrationModal
+      title="How many people are in your party?"
+      registrationFlowState={registrationFlowState}
+      {...props}
+    >
+      <Flex flexDir={'column'} justify={'center'} align={'center'}>
+        <Flex
+          align={'center'}
+          borderRadius={'12px'}
+          borderWidth={'4px'}
+          w={'10em'}
+          h={'6em'}
+          justify={'center'}
+        >
+          <Flex
+            justify={'center'}
+            align={'center'}
+            h={'100%'}
+            w={'33%'}
+            onClick={() => {
+              setPartySize(prev => prev - 1);
+              registrationFlowState.setPartySize(prev => prev - 1);
+            }}
+            _hover={{ cursor: 'pointer' }}
+          >
+            <Icon as={MinusIcon} color={'#BABABA'} boxSize={'1.5em'} />
+          </Flex>
+          <Flex justify={'center'} align={'center'} h={'100%'} w={'33%'}>
+            <Text as={'b'} fontSize={'2em'}>
+              {partySize}
+            </Text>
+          </Flex>
+          <Flex
+            justify={'center'}
+            align={'center'}
+            h={'100%'}
+            w={'33%'}
+            onClick={() => {
+              setPartySize(prev => prev + 1);
+              registrationFlowState.setPartySize(prev => prev + 1);
+            }}
+            _hover={{ cursor: 'pointer' }}
+          >
+            <Icon as={AddIcon} color={'#BABABA'} boxSize={'1.5em'} />
+          </Flex>
+        </Flex>
+        <Text color={'#717171'} fontWeight={600} fontSize={'1.25em'}>
+          Total people attending
+        </Text>
+      </Flex>
+    </RegistrationModal>
+  );
+};
+
+PartySizeModal.propTypes = {
+  registrationFlowState: PropTypes.object,
+};
+
+export default PartySizeModal;
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       };
-      console.log('currentUserData:', currentUserData);
       return (
         <Flex>
           <Modal isOpen={isOpen} onClose={onClose}>
@@ Expand Down @@