Merge pull request #3986 from Northeastern-Electric-Racing/#3874-featured-projects-card

#3874 featured projects card

Author: chpy04

src/frontend/src/pages/HomePage/components/FeaturedProjects.tsx

@@ -10,7 +10,7 @@ import { wbsPipe } from 'shared';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ScrollablePageBlock from './ScrollablePageBlock';
 import EmptyPageBlockDisplay from './EmptyPageBlockDisplay';
-import { Box } from '@mui/material';
+import { Box, Stack, useMediaQuery } from '@mui/material';
 import { Error } from '@mui/icons-material';
 
 const NoFeaturedProjectsDisplay: React.FC = () => {
@@ -36,17 +36,24 @@ const NoFeaturedProjectsDisplay: React.FC = () => {
 
 const FeaturedProjects: React.FC = () => {
   const { data: featuredProjects, isLoading, isError, error } = useFeaturedProjects();
+  const isMobilePortrait = useMediaQuery('(max-width:480px)');
 
   if (isLoading || !featuredProjects) return <LoadingIndicator />;
   if (isError) return <ErrorPage error={error} message={error.message} />;
 
   const fullDisplay = (
-    <ScrollablePageBlock title={`Featured Projects`} horizontal>
-      {featuredProjects.length === 0 ? (
-        <NoFeaturedProjectsDisplay />
-      ) : (
-        featuredProjects.map((p) => <FeaturedProjectsCard key={wbsPipe(p.wbsNum)} project={p} />)
-      )}
+    <ScrollablePageBlock title={`What We're Working On`} horizontal={!isMobilePortrait}>
+      <Stack
+        direction={isMobilePortrait ? 'column' : 'row'}
+        spacing={isMobilePortrait ? 2 : 3}
+        sx={{ width: '100%', px: isMobilePortrait ? 1 : 0 }}
+      >
+        {featuredProjects.length === 0 ? (
+          <NoFeaturedProjectsDisplay />
+        ) : (
+          featuredProjects.map((p) => <FeaturedProjectsCard key={wbsPipe(p.wbsNum)} project={p} />)
+        )}
+      </Stack>
     </ScrollablePageBlock>
   );
 

src/frontend/src/pages/HomePage/components/FeaturedProjectsCard.tsx

@@ -1,52 +1,57 @@
-import { Construction, Work } from '@mui/icons-material';
-import { Box, Card, CardContent, Chip, Link, Stack, Typography, useTheme } from '@mui/material';
-import { wbsPipe, wbsNamePipe, ProjectPreview } from 'shared';
-import { datePipe, fullNamePipe } from '../../../utils/pipes';
-import { routes } from '../../../utils/routes';
-import { Link as RouterLink } from 'react-router-dom';
+import { alpha, Box, Card, CardContent, Chip, Stack, Typography, useTheme, useMediaQuery } from '@mui/material';
+import { wbsNamePipe, ProjectPreview } from 'shared';
+import { datePipe } from '../../../utils/pipes';
 
 interface ProjectCardProps {
   project: ProjectPreview;
 }
 
 const FeaturedProjectsCard: React.FC<ProjectCardProps> = ({ project }) => {
   const theme = useTheme();
+  const isMobilePortrait = useMediaQuery('(max-width:600px)');
+
   return (
     <Card
       variant="outlined"
       sx={{
         minWidth: 'fit-content',
         minHeight: 'fit-content',
-        mr: 3,
-        background: theme.palette.background.default
+        width: isMobilePortrait ? '100%' : 'auto',
+        background: theme.palette.background.paper,
+        borderRadius: 2
       }}
     >
       <CardContent sx={{ padding: 2 }}>
         <Stack direction="row" justifyContent="space-between">
           <Box>
-            <Typography fontWeight={'regular'} variant="subtitle2" noWrap>
-              <Link color={'text.primary'} component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(project.wbsNum)}`}>
-                {wbsPipe(project.wbsNum)} - {wbsNamePipe(project)}
-              </Link>
+            <Typography
+              fontWeight={'regular'}
+              variant="h5"
+              sx={{ marginBottom: '0.3rem', fontSize: { xs: '1.15rem', sm: '1.5rem' } }}
+            >
+              {wbsNamePipe(project)}
+            </Typography>
+            <Typography fontWeight={'regular'} fontSize={{ xs: 14, sm: 16 }} noWrap>
+              Budget: ${project.budget}
             </Typography>
-            <Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(project.wbsNum)}`} noWrap>
-              <Typography fontWeight={'regular'} variant="h5">
-                {wbsPipe(project.wbsNum)} - {project.name}
-              </Typography>
-            </Link>
-            <Typography fontWeight={'regular'} fontSize={20} variant="h6" noWrap>
+            <Typography fontWeight={'regular'} fontSize={{ xs: 14, sm: 16 }} noWrap>
               {datePipe(project.startDate) + ' ⟝ ' + project.duration + ' wks ⟞ ' + datePipe(project.endDate)}
             </Typography>
           </Box>
         </Stack>
         <Stack direction="row" sx={{ marginTop: 1 }}>
-          <Chip
-            sx={{ marginTop: 1, marginRight: 2 }}
-            icon={<Construction />}
-            label={fullNamePipe(project.lead)}
-            size="medium"
-          />
-          <Chip sx={{ marginTop: 1 }} icon={<Work />} label={fullNamePipe(project.manager)} size="medium" />
+          {project.teams.map((team) => (
+            <Chip
+              sx={{
+                marginTop: 1,
+                marginRight: 2,
+                bgcolor: alpha(theme.palette.primary.main, 0.45),
+                color: theme.palette.primary.light
+              }}
+              label={team.teamName}
+              size="medium"
+            />
+          ))}
         </Stack>
       </CardContent>
     </Card>

src/frontend/src/pages/HomePage/components/ScrollablePageBlock.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardContent, Typography, useTheme } from '@mui/material';
+import { Box, Card, CardContent, Typography, useMediaQuery, useTheme } from '@mui/material';
 import React from 'react';
 
 interface ScrollablePageBlockProps {
@@ -9,10 +9,14 @@ interface ScrollablePageBlockProps {
 
 const ScrollablePageBlock: React.FC<ScrollablePageBlockProps> = ({ children, title, horizontal }) => {
   const theme = useTheme();
+  const isMobilePortrait = useMediaQuery('(max-width:600px)');
+
   return (
     <Card
       sx={{
         height: '100%',
+        width: isMobilePortrait ? 'fit-content' : '100%',
+        maxWidth: '100%',
         background: theme.palette.background.paper
       }}
       variant="outlined"