MCSS-62: Add Volunteer & Mentor Signup Tiles (#63)

README.md

@@ -1,6 +1,6 @@
 # DeerHacks
 
-[![DeerHacks Banner](public/backgrounds/banner.jpg)](https://deerhacks.ca)
+[![DeerHacks Image](public/backgrounds/collage_close.jpg)](https://deerhacks.ca)
 
 > DeerHacks Hackathon 2024 Dashboard
 

components/Dashboard/TileMentorForm/index.tsx

@@ -0,0 +1,49 @@
+import EngineeringIcon from '@mui/icons-material/Engineering'
+import Card from '@mui/material/Card'
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+type Props = {
+  href: string
+  disabled?: boolean
+}
+
+const TileMentorForm = (props: Props) => {
+  const { href, disabled = false } = props
+
+  return (
+    <Card
+      variant={disabled ? 'outlined' : 'elevation'}
+      {...(!disabled && {
+        sx: {
+          backgroundImage:
+            'radial-gradient(circle closest-corner at 20% 6%, rgb(32 218 133 / 25%), rgb(255 255 255 / 6%)),radial-gradient(circle farthest-side at 71% 16%, rgba(154, 39, 238, 0.15), rgba(255, 255, 255, 0) 35%),radial-gradient(circle closest-corner at 73% 64%, rgb(214 142 19 / 22%), rgba(255, 255, 255, 0) 76%),radial-gradient(circle farthest-side at 69% 81%, rgb(56 40 202 / 25%), rgba(255, 255, 255, 0) 76%),linear-gradient(#202124, #202124)',
+        },
+      })}
+    >
+      <CardActionArea rel="noopener" href={href} target="_blank" disabled={disabled}>
+        <CardContent sx={{ gap: '2rem' }}>
+          <Typography
+            color={disabled ? 'text.disabled' : 'primary'}
+            variant="h2"
+            display="flex"
+            alignItems="center"
+            gap="0.5rem"
+            gutterBottom
+          >
+            <EngineeringIcon fontSize="inherit" />
+            Mentor Signup
+          </Typography>
+          <Typography variant="body2" color={disabled ? 'text.disabled' : 'text.primary'}>
+            {disabled
+              ? 'Signup is unavailable while user is unverified'
+              : 'Interested in mentoring hackers? Apply to be a mentor before {TBD DATE}'}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  )
+}
+
+export default TileMentorForm

components/Dashboard/TileScanner/index.tsx

@@ -22,7 +22,7 @@ const TileScanner = () => {
             <QrCodeIcon fontSize="inherit" />
             Staff: QR Scanner
           </Typography>
-          <Typography variant="body2">QR scanner for sign-ins</Typography>
+          <Typography variant="body2">QR Scanner for Sign-ins</Typography>
         </CardContent>
       </CardActionArea>
     </Card>

components/Dashboard/TileUsersTable/index.tsx

@@ -22,7 +22,7 @@ const TileUsersTable = () => {
             <SupervisedUserCircleIcon fontSize="inherit" />
             Staff: Users Table
           </Typography>
-          <Typography variant="body2">Interact with Hacker Data & Applications</Typography>
+          <Typography variant="body2">Interact with User Data & Applications</Typography>
         </CardContent>
       </CardActionArea>
     </Card>

components/Dashboard/TileVolunteerForm/index.tsx

@@ -0,0 +1,49 @@
+import EmojiPeopleIcon from '@mui/icons-material/EmojiPeople'
+import Card from '@mui/material/Card'
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+type Props = {
+  href: string
+  disabled?: boolean
+}
+
+const TileVolunteerForm = (props: Props) => {
+  const { href, disabled = false } = props
+
+  return (
+    <Card
+      variant={disabled ? 'outlined' : 'elevation'}
+      {...(!disabled && {
+        sx: {
+          backgroundImage:
+            'radial-gradient(circle closest-corner at 74% 18%, rgb(218 189 32 / 25%), rgb(255 255 255 / 6%)),radial-gradient(circle farthest-side at 71% 16%, rgba(154, 39, 238, 0.15), rgba(255, 255, 255, 0) 35%),radial-gradient(circle closest-corner at 59% 57%, rgb(214 19 19 / 22%), rgba(255, 255, 255, 0) 76%),radial-gradient(circle farthest-side at 49% 65%, rgb(213 109 20 / 25%), rgba(255, 255, 255, 0) 76%),linear-gradient(#202124, #202124)',
+        },
+      })}
+    >
+      <CardActionArea rel="noopener" href={href} target="_blank" disabled={disabled}>
+        <CardContent sx={{ gap: '2rem' }}>
+          <Typography
+            color={disabled ? 'text.disabled' : 'primary'}
+            variant="h2"
+            display="flex"
+            alignItems="center"
+            gap="0.5rem"
+            gutterBottom
+          >
+            <EmojiPeopleIcon fontSize="inherit" />
+            Volunteer Signup
+          </Typography>
+          <Typography variant="body2" color={disabled ? 'text.disabled' : 'text.primary'}>
+            {disabled
+              ? 'Signup is unavailable while user is unverified'
+              : 'Want to volunteer for DeerHacks? Apply to be a volunteer before {TBD DATE}'}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  )
+}
+
+export default TileVolunteerForm

pages/_document.tsx

@@ -22,8 +22,8 @@ export default function Document() {
           property="og:description"
           content="DeerHacks is the largest annual hackathon at University of Toronto Mississauga. Join 500+ hackers on February 16-18, 2024 for a weekend of prizes, development, and innovation!"
         />
-        <meta property="og:image" content="/backgrounds/banner.jpg" />
-        <meta property="twitter:image" content="/backgrounds/banner.jpg" />
+        <meta property="og:image" content="/backgrounds/collage_close.jpg" />
+        <meta property="twitter:image" content="/backgrounds/collage_close.jpg" />
         <meta name="twitter:card" content="summary_large_image" />
 
         <link rel="icon" type="image/svg+xml" sizes="512x512" href="/logo.svg" />

pages/dashboard/index.tsx

@@ -10,13 +10,15 @@ import TileGallery from '@/components/Dashboard/TileGallery'
 import TileHackerPack from '@/components/Dashboard/TileHackerPack'
 import TileInstagram from '@/components/Dashboard/TileInstagram'
 import TileLinkedIn from '@/components/Dashboard/TileLinkedIn'
+import TileMentorForm from '@/components/Dashboard/TileMentorForm'
 import TileRegistration from '@/components/Dashboard/TileRegistration'
 import TileScanner from '@/components/Dashboard/TileScanner'
 import TileSchedule from '@/components/Dashboard/TileSchedule'
 import TileStatus from '@/components/Dashboard/TileStatus'
 import TileTips from '@/components/Dashboard/TileTips'
 import TileUser from '@/components/Dashboard/TileUser'
 import TileUsersTable from '@/components/Dashboard/TileUsersTable'
+import TileVolunteerForm from '@/components/Dashboard/TileVolunteerForm'
 import FullPageSpinner from '@/components/Shared/FullPageSpinner'
 import Navbar from '@/components/Shared/Navbar'
 import { useAuth } from '@/contexts/Auth'
@@ -28,6 +30,12 @@ const Dashboard = () => {
   const { toggles } = useFeatureToggle()
   const { user, loading, authenticated } = useAuth()
 
+  const volunteerForm = process.env.NEXT_PUBLIC_TOGGLE_VOLUNTEER_FORM
+  const showVolunteerForm = !!volunteerForm && toggles.signupVolunteer
+
+  const mentorForm = process.env.NEXT_PUBLIC_TOGGLE_MENTOR_FORM
+  const showMentorForm = !!mentorForm && toggles.signupMentor
+
   if (!toggles.dashboard && !toggles.bypassPage) return <Error418Page />
   if (!loading && !authenticated) return <Error401Page />
 
@@ -46,6 +54,27 @@ const Dashboard = () => {
             <Navbar />
             <Box component="div" display="flex" flexDirection="column" gap="1rem" width="100%">
               <TileUser user={user} />
+              {(showMentorForm || showVolunteerForm) &&
+                !['unverified', 'moderator', 'volunteer', 'attended'].includes(user.status) && (
+                  <Grid container spacing={2} py={4}>
+                    {showVolunteerForm && (
+                      <Grid item xs={12} md>
+                        <TileVolunteerForm
+                          href={volunteerForm}
+                          disabled={['pending'].includes(user.status)}
+                        />
+                      </Grid>
+                    )}
+                    {showMentorForm && (
+                      <Grid item xs={12} md>
+                        <TileMentorForm
+                          href={mentorForm}
+                          disabled={['pending'].includes(user.status)}
+                        />
+                      </Grid>
+                    )}
+                  </Grid>
+                )}
               {['admin', 'moderator', 'volunteer'].includes(user.status) && (
                 <Grid container spacing={2}>
                   <Grid item xs={12} md>