Merge pull request #1749 from Northeastern-Electric-Racing/#1650-standard-cr-page

#1650 standard cr page

Author: RChandler234

src/frontend/src/components/ChangeRequestDetailCard.tsx

@@ -4,8 +4,6 @@
  */
 
 import { Card, CardContent, Grid, Typography, useTheme } from '@mui/material';
-import Chip from '@mui/material/Chip';
-import { green, blue, red, grey, purple } from '@mui/material/colors';
 import { Box, Stack } from '@mui/system';
 import { Link } from '@mui/material';
 import {
@@ -19,55 +17,8 @@ import {
 import { routes } from '../utils/routes';
 import { Link as RouterLink } from 'react-router-dom';
 import { fullNamePipe } from '../utils/pipes';
-import { ChangeRequestTypeTextPipe, ChangeRequestStatusTextPipe } from '../utils/enum-pipes';
-
-const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
-  switch (status) {
-    case ChangeRequestStatus.Implemented:
-      return blue[600];
-    case ChangeRequestStatus.Accepted:
-      return green[600];
-    case ChangeRequestStatus.Denied:
-      return red[400];
-    case ChangeRequestStatus.Open:
-      return purple[400];
-    default:
-      return grey[500];
-  }
-};
-
-const ChangeRequestTypePill = ({ type }: { type: ChangeRequestType }) => {
-  return (
-    <Chip
-      size="small"
-      label={ChangeRequestTypeTextPipe(type)}
-      variant="filled"
-      sx={{
-        fontSize: 12,
-        color: 'white',
-        backgroundColor: red[600],
-        width: 100
-      }}
-    />
-  );
-};
-
-const ChangeRequestStatusPill = ({ status }: { status: ChangeRequestStatus }) => {
-  const statusPillColor = determineChangeRequestStatusPillColor(status);
-  return (
-    <Chip
-      size="small"
-      label={ChangeRequestStatusTextPipe(status)}
-      variant="filled"
-      sx={{
-        fontSize: 12,
-        color: 'white',
-        backgroundColor: statusPillColor,
-        width: 100
-      }}
-    />
-  );
-};
+import ChangeRequestTypePill from './ChangeRequestTypePill';
+import ChangeRequestStatusPill from './ChangeRequestStatusPill';
 
 const CRCardDescription = ({ cr }: { cr: ChangeRequest }) => {
   const theme = useTheme();
@@ -118,7 +69,7 @@ interface ChangeRequestDetailCardProps {
 
 const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ changeRequest }) => {
   return (
-    <Card sx={{ width: 325, mr: 2, borderRadius: 3, mb: 2 }}>
+    <Card sx={{ minWidth: 325, maxWidth: 325, mr: 2, borderRadius: 3, mb: 2 }}>
       <CardContent>
         <Grid container justifyContent="space-between" alignItems="flex-start">
           <Grid item xs mb={1} mt={-1.5}>

src/frontend/src/components/ChangeRequestStatusPill.tsx

@@ -0,0 +1,43 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+import Chip from '@mui/material/Chip';
+import { green, blue, red, grey, purple } from '@mui/material/colors';
+import { ChangeRequestStatus } from 'shared';
+import { ChangeRequestStatusTextPipe } from '../utils/enum-pipes';
+
+const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
+  switch (status) {
+    case ChangeRequestStatus.Implemented:
+      return blue[600];
+    case ChangeRequestStatus.Accepted:
+      return green[600];
+    case ChangeRequestStatus.Denied:
+      return red[400];
+    case ChangeRequestStatus.Open:
+      return purple[400];
+    default:
+      return grey[500];
+  }
+};
+
+const ChangeRequestStatusPill = ({ status }: { status: ChangeRequestStatus }) => {
+  const statusPillColor = determineChangeRequestStatusPillColor(status);
+  return (
+    <Chip
+      size="small"
+      label={ChangeRequestStatusTextPipe(status)}
+      variant="filled"
+      sx={{
+        fontSize: 12,
+        color: 'white',
+        backgroundColor: statusPillColor,
+        width: 100
+      }}
+    />
+  );
+};
+
+export default ChangeRequestStatusPill;

src/frontend/src/components/ChangeRequestTypePill.tsx

@@ -0,0 +1,22 @@
+import { Chip } from '@mui/material';
+import { ChangeRequestType } from 'shared';
+import { ChangeRequestTypeTextPipe } from '../utils/enum-pipes';
+import { red } from '@mui/material/colors';
+
+const ChangeRequestTypePill = ({ type }: { type: ChangeRequestType }) => {
+  return (
+    <Chip
+      size="small"
+      label={ChangeRequestTypeTextPipe(type)}
+      variant="filled"
+      sx={{
+        fontSize: 12,
+        color: 'white',
+        backgroundColor: red[600],
+        width: 100
+      }}
+    />
+  );
+};
+
+export default ChangeRequestTypePill;

src/frontend/src/components/InfoBlock.tsx

@@ -5,21 +5,24 @@
 
 import Typography from '@mui/material/Typography';
 import { Grid } from '@mui/material';
+import { ReactNode } from 'react';
 
 interface InfoBlockProps {
   title: string;
+  icon?: ReactNode;
 }
 
 /**
  * Custom component for a consistent page-building block.
  * @param title The title of the block on the page
  * @param children The children of the block
  */
-const InfoBlock: React.FC<InfoBlockProps> = ({ title, children }) => {
+const InfoBlock: React.FC<InfoBlockProps> = ({ title, icon, children }) => {
   return (
     <Grid container spacing={1}>
-      <Grid item xs={12}>
+      <Grid item xs={12} display="flex" gap="5px" alignItems="center">
         <Typography sx={{ fontWeight: 'bold', fontSize: '19px' }}>{title}</Typography>
+        {icon}
       </Grid>
       <Grid item xs={12}>
         {children}

src/frontend/src/components/PageLayout.tsx

@@ -11,6 +11,7 @@ import { Box } from '@mui/system';
 
 interface PageLayoutProps {
   title?: string;
+  chips?: ReactNode;
   hidePageTitle?: boolean;
   previousPages?: LinkItem[];
   headerRight?: ReactNode;
@@ -21,6 +22,7 @@ interface PageLayoutProps {
 const PageLayout: React.FC<PageLayoutProps> = ({
   children,
   title,
+  chips,
   hidePageTitle = false,
   previousPages = [],
   headerRight,
@@ -33,7 +35,9 @@ const PageLayout: React.FC<PageLayoutProps> = ({
         <title>{`FinishLine ${title && `| ${title}`}`}</title>
         <meta name="description" content="FinishLine Project Management Dashboard" />
       </Helmet>
-      {!hidePageTitle && title && <PageTitle sticky={stickyHeader} {...{ title, previousPages, headerRight, tabs }} />}
+      {!hidePageTitle && title && (
+        <PageTitle sticky={stickyHeader} {...{ title, chips, previousPages, headerRight, tabs }} />
+      )}
       {children}
     </Box>
   );

src/frontend/src/layouts/PageTitle/PageTitle.tsx

@@ -10,6 +10,7 @@ import PageBreadcrumbs from './PageBreadcrumbs';
 
 interface PageTitleProps {
   title: string;
+  chips?: ReactNode;
   previousPages: LinkItem[];
   headerRight?: ReactNode;
   tabs?: ReactElement;
@@ -23,7 +24,7 @@ interface PageTitleProps {
  * @param headerRight The button to display on the right side of the page title
  * @param tabs The tabs on the page to display.
  */
-const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight, tabs, sticky }) => {
+const PageTitle: React.FC<PageTitleProps> = ({ title, chips, previousPages, headerRight, tabs, sticky }) => {
   const theme = useTheme();
 
   return (
@@ -39,13 +40,18 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight
         zIndex={1}
         bgcolor={theme.palette.background.default}
       >
-        <Grid container rowSpacing={1}>
-          <Grid item xs={6} md={4}>
-            <Typography variant="h4" fontSize={30}>
-              {title}
-            </Typography>
+        <Grid container>
+          <Grid container item xs={6} md={tabs ? 4 : 8} display="flex" alignItems={'center'} rowGap={2}>
+            <Grid item xs={12} md={chips ? 4 : 12}>
+              <Typography variant="h4" fontSize={30}>
+                {title}
+              </Typography>
+            </Grid>
+            <Grid item xs={chips ? 12 : 0} md={chips ? 6 : 0}>
+              {chips}
+            </Grid>
           </Grid>
-          <Grid item xs={0} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
+          <Grid item xs={0} md={tabs ? 4 : 0} sx={{ display: { xs: 'none', md: 'block' } }}>
             {tabs}
           </Grid>
           <Grid item xs={6} md={4} textAlign={['left', 'right']}>

src/frontend/src/pages/ChangeRequestDetailPage/ActivationDetails.tsx

@@ -8,26 +8,29 @@ import { datePipe, fullNamePipe } from '../../utils/pipes';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import InfoBlock from '../../components/InfoBlock';
+import HandymanIcon from '@mui/icons-material/Handyman';
+import WorkIcon from '@mui/icons-material/Work';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 
 interface ActivationDetailsProps {
   cr: ActivationChangeRequest;
 }
 
 const ActivationDetails: React.FC<ActivationDetailsProps> = ({ cr }) => {
   return (
-    <Grid container>
-      <Grid item xs={6} md={2}>
-        <InfoBlock title={'Project Lead'}>
+    <Grid container rowSpacing={'10px'} mb="40px">
+      <Grid item xs={6} md={6}>
+        <InfoBlock title={'Project Lead'} icon={<HandymanIcon />}>
           <Typography>{fullNamePipe(cr.projectLead)}</Typography>
         </InfoBlock>
       </Grid>
-      <Grid item xs={6} md={2}>
-        <InfoBlock title={'Project Manager'}>
+      <Grid item xs={6} md={6}>
+        <InfoBlock title={'Project Manager'} icon={<WorkIcon />}>
           <Typography>{fullNamePipe(cr.projectManager)}</Typography>
         </InfoBlock>
       </Grid>
-      <Grid item xs={6} md={2}>
-        <InfoBlock title={'Start Date'}>
+      <Grid item xs={6} md={6}>
+        <InfoBlock title={'Start Date'} icon={<CalendarTodayIcon />}>
           <Typography>{datePipe(cr.startDate)}</Typography>
         </InfoBlock>
       </Grid>