added sign up popup

apps/frontend/src/components/volunteer/signup/SignupPopup.tsx

@@ -0,0 +1,62 @@
+import {
+    Box,
+    Text,
+    IconButton,
+} from '@chakra-ui/react';
+import CloseIcon from '@mui/icons-material/Close';
+
+interface Props {
+    setShowSignupPopup: (value: boolean) => void;
+}
+export default function SignupPopup({ setShowSignupPopup }: Props) {
+    const closeSignUp = () => {
+        setShowSignupPopup(false);
+    };
+
+    return (
+        <Box
+            className="outermost-box"
+            position="absolute"
+            top="150%"
+            left="10%"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            bg="#D9D9D9"
+            width="80%"
+            height="220%"
+            zIndex={'200'}
+        >
+            <IconButton
+                aria-label="close"
+                size="small"
+                position="absolute"
+                top="10px"
+                right="10px"
+                onClick={closeSignUp}
+            >
+                <CloseIcon />
+            </IconButton>
+            <Box
+                className="inner-box"
+                bg="#FFFDFD"
+                height="80%"
+                width="80%"
+                display="flex"
+                flexDirection="column"
+                alignItems="center"
+                justifyContent="space-evenly"
+            >
+                <Text
+                    fontFamily="Montserrat"
+                    fontSize="25px"
+                    fontWeight={600}
+                    color='black'
+                    padding="20px"
+                >
+                    Please navigate to the map below and select a site that you would like to adopt in order to start the sign up process.
+                </Text>
+            </Box>
+        </Box>
+    );
+}

apps/frontend/src/pages/Navbar.tsx

@@ -6,9 +6,15 @@ import Container from '@mui/material/Container';
 import c4cLogo from '../images/logos/c4cLogo.png';
 import profileLogo from '../images/logos/profileLogo.png';
 import cityOfBostonLogo from '../images/logos/cityOfBostonLogo.png';
+import SignupPopup from '../components/volunteer/signup/SignupPopup';
 
 function Navbar() {
   const [selected, setSelected] = useState(false);
+  const [showSignupPopup, setShowSignupPopup] = useState(false);
+
+  const openSignupPopup = () => {
+    setShowSignupPopup(true);
+  };
 
   const handleClick = () => {
     if (!selected) {
@@ -49,28 +55,38 @@ function Navbar() {
             />
             <img src={c4cLogo} />
             <div style={{ marginRight: 0, marginLeft: 'auto' }}>
-              <a
+              <button
                 style={{
                   font: 'Montserrat',
                   color: selected ? 'red' : 'black',
+                  background: 'none',
+                  border: 'none',
+                  padding: 0,
                   marginRight: '40px',
+                  cursor: 'pointer',
                 }}
+                onClick={openSignupPopup}
               >
                 SIGN UP
-              </a>
-              <a
+              </button>
+              <button
                 style={{
                   font: 'Montserrat',
                   color: 'black',
+                  background: 'none',
+                  border: 'none',
+                  padding: 0,
                   marginRight: '50px',
+                  cursor: 'pointer',
                 }}
               >
                 LOG IN
-              </a>
+              </button>
               <img src={profileLogo} />
             </div>
           </Toolbar>
         </Container>
+        {showSignupPopup && <SignupPopup setShowSignupPopup={setShowSignupPopup} />}
       </AppBar>
     </div>
   );