No-Jira - Improve PDS Goal Calc dividers

src/components/HrTools/PdsGoalCalculator/ReimbursableExpenses/ReimbursableExpensesStep.tsx

@@ -20,6 +20,7 @@ export const ReimbursableExpensesStep: React.FC = () => {
           )}
         </Typography>
       </Box>
+      <Divider sx={{ mx: -4, my: 4 }} />
       <MonthlyReimbursableSection />
       <Divider sx={{ mx: -4, my: 4 }} />
       <AnnualReimbursableSection />

src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx

@@ -134,205 +134,206 @@
         label={t('Goal Name')}
       />
 
-      <Divider sx={{ my: 4, mx: -4 }} />
+      <Divider sx={{ mx: -4, my: 4 }} />
 
       <Box pb={4}>
         <Typography variant="h6">{t('Calculator Setup')}</Typography>
         <Typography>
           {t('Take a moment to verify your information.')}
         </Typography>
       </Box>
 
       <Card sx={{ padding: theme.spacing(3) }}>
         <Box display="flex" alignItems="center" gap={1} mb={3}>
           <Avatar
             src={userData?.user.avatar}
             alt={userData?.user.firstName ?? undefined}
             variant="rounded"
             sx={{ width: theme.spacing(4.5), height: theme.spacing(4.5) }}
           />
           <Typography data-testid="info-name-typography" variant="subtitle1">
             {userData?.user.firstName}
           </Typography>
         </Box>
         <Grid container spacing={3}>
           <Grid item xs={12}>
             <AutosaveTextField
               fieldName="formType"
               schema={schema}
               select
               label={t('Form Type')}
               helperText={
                 <>
                   <Box component="span" display="block">
                     {t(
                       'Default includes reimbursable expenses and 403b contributions in the goal total.',
                     )}
                   </Box>
                   <Box component="span" display="block">
                     {t(
                       'Simple excludes them; existing entries are preserved and will count again if you switch back.',
                     )}
                   </Box>
                 </>
               }
             >
               <MenuItem value={DesignationSupportFormType.Detailed}>
                 {t('Default')}
               </MenuItem>
               <MenuItem value={DesignationSupportFormType.Simple}>
                 {t('Simple')}
               </MenuItem>
             </AutosaveTextField>
           </Grid>
 
           <Grid item xs={12}>
             <AutosaveTextField
               fieldName="status"
               schema={schema}
               select
               label={t('Employment Status')}
             >
               <MenuItem value={DesignationSupportStatus.FullTime}>
                 {t('Full-time')}
               </MenuItem>
               <MenuItem value={DesignationSupportStatus.PartTime}>
                 {t('Part-time')}
               </MenuItem>
             </AutosaveTextField>
           </Grid>
 
           <Grid item xs={12}>
             {/* Manual TextField (not AutosaveTextField) because changing Pay
                 Type must atomically clear payRate as well; AutosaveTextField
                 only writes the single bound fieldName. */}
             <TextField
               fullWidth
               size="small"
               variant="outlined"
               select
               label={t('Pay Type')}
               helperText={t('Changing this clears Pay Rate.')}
               value={calculation?.salaryOrHourly ?? ''}
               disabled={!calculation || isMutating}
               onChange={(event) => {
                 const newValue = event.target
                   .value as DesignationSupportSalaryType;
                 if (newValue !== calculation?.salaryOrHourly) {
                   saveField({ salaryOrHourly: newValue, payRate: null });
                 }
               }}
             >
               <MenuItem value={DesignationSupportSalaryType.Salaried}>
                 {t('Salaried')}
               </MenuItem>
               <MenuItem value={DesignationSupportSalaryType.Hourly}>
                 {t('Hourly')}
               </MenuItem>
             </TextField>
           </Grid>
 
           {payType && (
             <Grid item xs={12}>
               <AutosaveTextField
                 fieldName="payRate"
                 schema={schema}
                 label={payRateLabel}
                 type="number"
                 helperText={payRateHelperText}
                 InputProps={{
                   startAdornment: <CurrencyAdornment />,
                   endAdornment: (
                     <InputAdornment position="end">
                       {payRateUnitSuffix}
                     </InputAdornment>
                   ),
                 }}
               />
             </Grid>
           )}
 
           {!isSalaried && (
             <Grid item xs={12}>
               <AutosaveTextField
                 fieldName="hoursWorkedPerWeek"
                 schema={schema}
                 label={t('Hours Worked')}
                 type="number"
                 helperText={t('Estimate of hours worked per week')}
                 InputProps={{
                   endAdornment: (
                     <InputAdornment position="end">
                       <IconButton
                         onClick={handleOpenHoursCalculator}
                         aria-label={t('Open hours per week calculator')}
                         edge="end"
                         size="small"
                       >
                         <CalculateIcon />
                       </IconButton>
                     </InputAdornment>
                   ),
                 }}
               />
             </Grid>
           )}
 
           {!isPartTime && (
             <Grid item xs={12}>
               <AutosaveTextField
                 fieldName="benefits"
                 schema={schema}
                 label={t('Benefits')}
                 type="number"
                 helperText={t('Enter monthly benefits charge')}
                 InputProps={{
                   startAdornment: <CurrencyAdornment />,
                 }}
               />
             </Grid>
           )}
 
           {!isSimpleForm && (
             <Grid item xs={12}>
               <TextField
                 fullWidth
                 size="small"
                 variant="outlined"
                 label={t('403b Contribution Percentage')}
                 disabled
                 value={totalFourOThreeBContributionPercentage}
                 helperText={t(
                   'Retrieved from Principal. A combined percentage of your current tax deferred and Roth contributions.',
                 )}
                 InputProps={{
                   endAdornment: <PercentageAdornment />,
                 }}
               />
             </Grid>
           )}
 
           <Grid item xs={12}>
             <Autocomplete
               options={locations}
               getOptionLabel={getLocationLabel}
               value={calculation?.geographicLocation ?? 'None'}
               onChange={(_, newValue: string | null) =>
                 saveField({ geographicLocation: newValue })
               }
               disabled={!calculation}
               size="small"
               renderInput={(params: AutocompleteRenderInputParams) => (
                 <TextField
                   {...params}
                   label={t('Geographic Multiplier')}
                   helperText={t('If not applicable, select "None"')}
                 />
               )}
             />
           </Grid>
         </Grid>
       </Card>
+      <Divider sx={{ mx: -4, my: 4 }} />
     </>
   );
 };

src/components/HrTools/PdsGoalCalculator/SummaryReport/SummaryReportStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Loading from 'src/components/Loading';
 import { useAccountListId } from 'src/hooks/useAccountListId';
@@ -32,7 +32,9 @@ export const SummaryReportStep: React.FC = () => {
           )}
         </Typography>
       </Box>
+      <Divider sx={{ mx: -4, my: 4 }} />
       <PdsSummaryTable supportRaised={supportRaised} />
+      <Divider sx={{ mx: -4, my: 4 }} />
     </>
   );
 };

src/components/HrTools/PdsGoalCalculator/SupportItem/SupportItemStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { OtherSection } from './OtherSection';
 import { SalarySection } from './SalarySection';
@@ -19,8 +19,10 @@ export const SupportItemStep: React.FC = () => {
           )}
         </Typography>
       </Box>
+      <Divider sx={{ mx: -4, my: 4 }} />
       <SalarySection />
       <OtherSection />
+      <Divider sx={{ mx: -4, my: 4 }} />
     </>
   );
 };