#1644: proposed solutions redesign

Author: mattrwang

src/frontend/src/pages/ChangeRequestDetailPage/ProposedSolutionView.tsx

@@ -29,6 +29,7 @@ const ProposedSolutionView: React.FC<ProposedSolutionViewProps> = ({
 }) => {
   const faded = crReviewed != null && proposedSolution.approved === false;
   const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
 
   return (
     <Grid
@@ -44,10 +45,10 @@ const ProposedSolutionView: React.FC<ProposedSolutionViewProps> = ({
       }}
     >
       <Grid container rowSpacing={1}>
-        <Grid item xs={12} sx={{ p: 2, mt: 1, minHeight: 100, borderRadius: 1, bgcolor: '#474848' }}>
+        <Grid item xs={12} sx={{ p: 2, mt: 1, minHeight: 100, borderRadius: 1, bgcolor: isDark ? '#474848' : 'white' }}>
           <DetailDisplay label="Description" content={proposedSolution.description} />
         </Grid>
-        <Grid item xs={12} sx={{ p: 2, mt: 2, minHeight: 100, borderRadius: 1, bgcolor: '#474848' }}>
+        <Grid item xs={12} sx={{ p: 2, mt: 2, minHeight: 100, borderRadius: 1, bgcolor: isDark ? '#474848' : 'white' }}>
           <DetailDisplay label="Scope Impact" content={proposedSolution.scopeImpact} />
         </Grid>
         <Grid item xs={7} display="flex" sx={{ marginTop: 0.5 }}>

src/frontend/src/pages/CreateChangeRequestPage/CreateChangeRequestView.tsx

@@ -230,11 +230,11 @@ const CreateChangeRequestsView: React.FC<CreateChangeRequestViewProps> = ({
                   rules={{ required: true }}
                   render={({ field: { onChange, value } }) => (
                     <RadioGroup onChange={onChange} value={value}>
-                      <Grid display="flex" flexDirection={{ xs: 'column', md: 'row' }}>
+                      <Box display="flex" flexDirection={{ xs: 'column', md: 'row' }} sx={{ gap: 2 }}>
                         {permittedTypes.map((t) => (
                           <NERButton
                             sx={{
-                              mr: { xs: 0, md: 2 },
+                              // mr: { xs: 0, md: 2 },
                               fontSize: { xs: '0.8rem', md: '1rem' },
                               width: { xs: '83%', md: 'auto' }
                             }}
@@ -245,7 +245,7 @@ const CreateChangeRequestsView: React.FC<CreateChangeRequestViewProps> = ({
                             {t}
                           </NERButton>
                         ))}
-                      </Grid>
+                      </Box>
                     </RadioGroup>
                   )}
                 />

src/frontend/src/pages/CreateChangeRequestPage/CreateProposedSolutionsList.tsx

@@ -7,8 +7,9 @@ import { isGuest, ProposedSolution } from 'shared';
 import ProposedSolutionForm from '../ChangeRequestDetailPage/ProposedSolutionForm';
 import { useState } from 'react';
 import ProposedSolutionView from '../ChangeRequestDetailPage/ProposedSolutionView';
-import { Button, Grid, Typography } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 import { useCurrentUser } from '../../hooks/users.hooks';
+import { Box } from '@mui/system';
 
 interface CreateProposedSolutionsListProps {
   proposedSolutions: ProposedSolution[];
@@ -34,23 +35,14 @@ const CreateProposedSolutionsList: React.FC<CreateProposedSolutionsListProps> =
   return (
     <>
       {!isGuest(user.role) && (
-        <Grid container columnSpacing={5}>
-          <Grid item>
-            <Typography variant="h5" sx={{ mt: 2 }}>
-              Proposed Solutions
-            </Typography>
-          </Grid>
-          <Grid item>
-            <Button
-              onClick={() => setShowEditableForm(true)}
-              variant="contained"
-              color="success"
-              sx={{ mt: 2, maxHeight: { xs: 105, md: 35 }, height: {} }}
-            >
-              + Add Proposed Solution
-            </Button>
-          </Grid>
-        </Grid>
+        <Box display="flex" justifyContent="space-between">
+          <Typography variant="h5" sx={{ mt: 2 }}>
+            Proposed Solutions
+          </Typography>
+          <Button onClick={() => setShowEditableForm(true)} variant="contained" color="success" sx={{ mt: 2 }}>
+            + Add Solution
+          </Button>
+        </Box>
       )}
       <div style={{ marginTop: '30px' }}>
         {proposedSolutions.map((proposedSolution, i) => (

src/frontend/src/tests/pages/CreateChangeRequestPage/CreateProposedSolutionsList.test.tsx

@@ -33,7 +33,7 @@ describe('Proposed Solutions List Test Suite', () => {
 
   it('Renders correctly when empty', () => {
     renderComponent();
-    expect(screen.getByText('+ Add Proposed Solution')).toBeInTheDocument();
+    expect(screen.getByText('+ Add Solution')).toBeInTheDocument();
     expect(screen.queryAllByText('Description').length).toBe(0);
     expect(screen.queryAllByText('Scope Impact').length).toBe(0);
     expect(screen.queryAllByText('Budget Impact').length).toBe(0);
@@ -47,7 +47,7 @@ describe('Proposed Solutions List Test Suite', () => {
     expect(screen.queryByText('Budget Impact')).not.toBeInTheDocument();
     expect(screen.queryByText('Timeline Impact')).not.toBeInTheDocument();
     expect(screen.queryByText('Add')).not.toBeInTheDocument();
-    screen.getByText('+ Add Proposed Solution').click();
+    screen.getByText('+ Add Solution').click();
     expect(screen.getByText('Description')).toBeInTheDocument();
     expect(screen.getByText('Scope Impact')).toBeInTheDocument();
     expect(screen.getByText('Budget Impact')).toBeInTheDocument();