From 0731f306ea2ee1c330618b9cd884d433c5b24309 Mon Sep 17 00:00:00 2001
From: jeznorth <twenty15creative@gmail.com>
Date: Thu, 25 Mar 2021 08:50:24 -0700
Subject: [PATCH] [BHBC-899] Funding Source Dialog UI Update

---
 .../features/projects/CreateProjectPage.tsx   |   2 +-
 .../CreateProjectPage.test.tsx.snap           |  22 +-
 .../components/ProjectFundingItemForm.tsx     |  47 +-
 .../ProjectFundingItemForm.test.tsx.snap      | 414 +++++++++---------
 app/src/styles.scss                           |  17 +
 app/src/themes/appTheme.ts                    |  27 +-
 6 files changed, 289 insertions(+), 240 deletions(-)

diff --git a/app/src/features/projects/CreateProjectPage.tsx b/app/src/features/projects/CreateProjectPage.tsx
index 8f93380a0a..925a0557d5 100644
--- a/app/src/features/projects/CreateProjectPage.tsx
+++ b/app/src/features/projects/CreateProjectPage.tsx
@@ -495,7 +495,7 @@ const CreateProjectPage: React.FC = () => {
               <Typography variant="h2" className={classes.stepTitle}>
                 {stepForms[index].stepTitle}
               </Typography>
-              <Typography variant="subtitle2">{stepForms[index].stepSubTitle}</Typography>
+              <Typography variant="subtitle1">{stepForms[index].stepSubTitle}</Typography>
             </Box>
           </StepLabel>
           <StepContent>
diff --git a/app/src/features/projects/__snapshots__/CreateProjectPage.test.tsx.snap b/app/src/features/projects/__snapshots__/CreateProjectPage.test.tsx.snap
index b4b0bcba45..eafa8d9353 100644
--- a/app/src/features/projects/__snapshots__/CreateProjectPage.test.tsx.snap
+++ b/app/src/features/projects/__snapshots__/CreateProjectPage.test.tsx.snap
@@ -107,7 +107,7 @@ exports[`CreateProjectPage removes the extra project steps if all permits are ma
                       Project Coordinator
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Enter contact details for the project coordinator
                     </h6>
@@ -172,7 +172,7 @@ exports[`CreateProjectPage removes the extra project steps if all permits are ma
                       Permits
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Enter permits associated with this project
                     </h6>
@@ -572,7 +572,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       Project Coordinator
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Enter contact details for the project coordinator
                     </h6>
@@ -1076,7 +1076,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       Permits
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Enter permits associated with this project
                     </h6>
@@ -1142,7 +1142,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       General Information
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       General information and details about this project
                     </h6>
@@ -1208,7 +1208,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       Objectives
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Enter the objectives and potential caveats for this project
                     </h6>
@@ -1274,7 +1274,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       Location
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Specify project regions and boundary information
                     </h6>
@@ -1340,7 +1340,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       Species
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Information about species this project is inventorying or monitoring
                     </h6>
@@ -1406,7 +1406,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       IUCN Classification
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Lorem ipsum dolor sit amet, consectur whatever whatever
                     </h6>
@@ -1472,7 +1472,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       Funding
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Specify funding sources for the project
                     </h6>
@@ -1538,7 +1538,7 @@ exports[`CreateProjectPage renders the initial default page correctly 1`] = `
                       Partnerships
                     </h2>
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle2"
+                      class="MuiTypography-root MuiTypography-subtitle1"
                     >
                       Specify partnerships for the project
                     </h6>
diff --git a/app/src/features/projects/components/ProjectFundingItemForm.tsx b/app/src/features/projects/components/ProjectFundingItemForm.tsx
index 720c2362bd..7664e67715 100644
--- a/app/src/features/projects/components/ProjectFundingItemForm.tsx
+++ b/app/src/features/projects/components/ProjectFundingItemForm.tsx
@@ -4,17 +4,17 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  DialogContentText,
   DialogTitle,
+  Divider,
   FormControl,
   FormHelperText,
+  FormLabel,
   Grid,
   InputAdornment,
   InputLabel,
   MenuItem,
   Select,
-  TextField,
-  Typography
+  TextField
 } from '@material-ui/core';
 import { IMultiAutocompleteFieldOption } from 'components/fields/MultiAutocompleteFieldVariableSize';
 import StartEndDateFields from 'components/fields/StartEndDateFields';
@@ -105,14 +105,13 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
               aria-describedby="alert-dialog-description">
               <DialogTitle id="alert-dialog-title">Add Funding Source</DialogTitle>
               <DialogContent>
-                <DialogContentText id="alert-dialog-description">Enter Funding Source Details</DialogContentText>
-                <Box py={2}>
+                <Box component="fieldset">
+                  <FormLabel id="agency_details" component="legend">
+                    Agency Details
+                  </FormLabel>
                   <Grid container spacing={3}>
                     <Grid item xs={12}>
-                      <Typography variant="h3">Agency Details</Typography>
-                    </Grid>
-                    <Grid item xs={12}>
-                      <FormControl fullWidth variant="outlined" required={true} style={{ width: '100%' }}>
+                      <FormControl variant="outlined" required={true} style={{ width: '100%' }}>
                         <InputLabel id="agency_id-label">Agency Name</InputLabel>
                         <Select
                           id="agency_id"
@@ -193,9 +192,11 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
                         helperText={errors.agency_project_id}
                       />
                     </Grid>
-                    <Grid item xs={12}>
-                      <Typography variant="h3">Funding Details</Typography>
-                    </Grid>
+                  </Grid>
+                </Box>
+                <Box component="fieldset" mt={5}>
+                  <FormLabel component="legend">Funding Details</FormLabel>
+                  <Grid container spacing={3}>
                     <Grid item xs={12}>
                       <TextField
                         fullWidth
@@ -218,9 +219,23 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
                     <StartEndDateFields formikProps={formikProps} startRequired={true} endRequired={true} />
                   </Grid>
                 </Box>
+                <Box mt={4}>
+                  <Divider />
+                </Box>
               </DialogContent>
               <DialogActions>
                 <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={async () => {
+                    handleSubmit();
+                  }}
+                  autoFocus
+                  aria-label="Add Funding Source">
+                  Add
+                </Button>
+                <Button
+                  variant="outlined"
                   onClick={() => {
                     props.onCancel();
                     resetForm();
@@ -228,14 +243,6 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
                   color="primary">
                   Cancel
                 </Button>
-                <Button
-                  onClick={async () => {
-                    handleSubmit();
-                  }}
-                  color="primary"
-                  autoFocus>
-                  Add
-                </Button>
               </DialogActions>
             </Dialog>
           </>
diff --git a/app/src/features/projects/components/__snapshots__/ProjectFundingItemForm.test.tsx.snap b/app/src/features/projects/components/__snapshots__/ProjectFundingItemForm.test.tsx.snap
index 64860fb485..06372a5d9f 100644
--- a/app/src/features/projects/components/__snapshots__/ProjectFundingItemForm.test.tsx.snap
+++ b/app/src/features/projects/components/__snapshots__/ProjectFundingItemForm.test.tsx.snap
@@ -50,32 +50,23 @@ exports[`ProjectFundingItemForm renders correctly with default empty values 1`]
         <div
           class="MuiDialogContent-root"
         >
-          <p
-            class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-            id="alert-dialog-description"
-          >
-            Enter Funding Source Details
-          </p>
-          <div
+          <fieldset
             class="MuiBox-root MuiBox-root-1"
           >
+            <legend
+              class="MuiFormLabel-root"
+              id="agency_details"
+            >
+              Agency Details
+            </legend>
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
             >
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Agency Details
-                </h3>
-              </div>
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-fullWidth"
+                  class="MuiFormControl-root"
                   style="width: 100%;"
                 >
                   <label
@@ -184,15 +175,19 @@ exports[`ProjectFundingItemForm renders correctly with default empty values 1`]
                   </div>
                 </div>
               </div>
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Funding Details
-                </h3>
-              </div>
+            </div>
+          </fieldset>
+          <fieldset
+            class="MuiBox-root MuiBox-root-6"
+          >
+            <legend
+              class="MuiFormLabel-root"
+            >
+              Funding Details
+            </legend>
+            <div
+              class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
+            >
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
@@ -358,27 +353,21 @@ exports[`ProjectFundingItemForm renders correctly with default empty values 1`]
                 </div>
               </div>
             </div>
+          </fieldset>
+          <div
+            class="MuiBox-root MuiBox-root-7"
+          >
+            <hr
+              class="MuiDivider-root"
+            />
           </div>
         </div>
         <div
           class="MuiDialogActions-root MuiDialogActions-spacing"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
-            >
-              Cancel
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary Mui-focusVisible Mui-focusVisible"
+            aria-label="Add Funding Source"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-focusVisible Mui-focusVisible"
             tabindex="0"
             type="button"
           >
@@ -400,6 +389,20 @@ exports[`ProjectFundingItemForm renders correctly with default empty values 1`]
               </span>
             </span>
           </button>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Cancel
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
         </div>
       </div>
     </div>
@@ -461,32 +464,23 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
         <div
           class="MuiDialogContent-root"
         >
-          <p
-            class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-            id="alert-dialog-description"
-          >
-            Enter Funding Source Details
-          </p>
-          <div
-            class="MuiBox-root MuiBox-root-6"
+          <fieldset
+            class="MuiBox-root MuiBox-root-8"
           >
+            <legend
+              class="MuiFormLabel-root"
+              id="agency_details"
+            >
+              Agency Details
+            </legend>
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
             >
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Agency Details
-                </h3>
-              </div>
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-fullWidth"
+                  class="MuiFormControl-root"
                   style="width: 100%;"
                 >
                   <label
@@ -537,10 +531,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     </svg>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-9 PrivateNotchedOutline-legendNotched-10"
+                        class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
                       >
                         <span>
                           Agency Name
@@ -608,10 +602,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     </svg>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-9 PrivateNotchedOutline-legendNotched-10"
+                        class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
                       >
                         <span>
                           Investment Action
@@ -651,10 +645,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-9 PrivateNotchedOutline-legendNotched-10"
+                        class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
                       >
                         <span>
                           Agency Project ID
@@ -664,15 +658,19 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                   </div>
                 </div>
               </div>
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Funding Details
-                </h3>
-              </div>
+            </div>
+          </fieldset>
+          <fieldset
+            class="MuiBox-root MuiBox-root-13"
+          >
+            <legend
+              class="MuiFormLabel-root"
+            >
+              Funding Details
+            </legend>
+            <div
+              class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
+            >
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
@@ -717,10 +715,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-9 PrivateNotchedOutline-legendNotched-10"
+                        class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
                       >
                         <span>
                           Funding Amount
@@ -771,10 +769,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-9 PrivateNotchedOutline-legendNotched-10"
+                          class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
                         >
                           <span>
                             Start Date
@@ -822,10 +820,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-9 PrivateNotchedOutline-legendNotched-10"
+                          class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
                         >
                           <span>
                             End Date
@@ -838,27 +836,21 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                 </div>
               </div>
             </div>
+          </fieldset>
+          <div
+            class="MuiBox-root MuiBox-root-14"
+          >
+            <hr
+              class="MuiDivider-root"
+            />
           </div>
         </div>
         <div
           class="MuiDialogActions-root MuiDialogActions-spacing"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
-            >
-              Cancel
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary Mui-focusVisible Mui-focusVisible"
+            aria-label="Add Funding Source"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-focusVisible Mui-focusVisible"
             tabindex="0"
             type="button"
           >
@@ -880,6 +872,20 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
               </span>
             </span>
           </button>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Cancel
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
         </div>
       </div>
     </div>
@@ -941,32 +947,23 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
         <div
           class="MuiDialogContent-root"
         >
-          <p
-            class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-            id="alert-dialog-description"
-          >
-            Enter Funding Source Details
-          </p>
-          <div
-            class="MuiBox-root MuiBox-root-11"
+          <fieldset
+            class="MuiBox-root MuiBox-root-15"
           >
+            <legend
+              class="MuiFormLabel-root"
+              id="agency_details"
+            >
+              Agency Details
+            </legend>
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
             >
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Agency Details
-                </h3>
-              </div>
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-fullWidth"
+                  class="MuiFormControl-root"
                   style="width: 100%;"
                 >
                   <label
@@ -1017,10 +1014,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     </svg>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-12 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-14 PrivateNotchedOutline-legendNotched-15"
+                        class="PrivateNotchedOutline-legendLabelled-18 PrivateNotchedOutline-legendNotched-19"
                       >
                         <span>
                           Agency Name
@@ -1088,10 +1085,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     </svg>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-12 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-14 PrivateNotchedOutline-legendNotched-15"
+                        class="PrivateNotchedOutline-legendLabelled-18 PrivateNotchedOutline-legendNotched-19"
                       >
                         <span>
                           Investment Category
@@ -1131,10 +1128,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-12 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-14 PrivateNotchedOutline-legendNotched-15"
+                        class="PrivateNotchedOutline-legendLabelled-18 PrivateNotchedOutline-legendNotched-19"
                       >
                         <span>
                           Agency Project ID
@@ -1144,15 +1141,19 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                   </div>
                 </div>
               </div>
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Funding Details
-                </h3>
-              </div>
+            </div>
+          </fieldset>
+          <fieldset
+            class="MuiBox-root MuiBox-root-20"
+          >
+            <legend
+              class="MuiFormLabel-root"
+            >
+              Funding Details
+            </legend>
+            <div
+              class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
+            >
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
@@ -1197,10 +1198,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-12 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-14 PrivateNotchedOutline-legendNotched-15"
+                        class="PrivateNotchedOutline-legendLabelled-18 PrivateNotchedOutline-legendNotched-19"
                       >
                         <span>
                           Funding Amount
@@ -1251,10 +1252,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-12 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-14 PrivateNotchedOutline-legendNotched-15"
+                          class="PrivateNotchedOutline-legendLabelled-18 PrivateNotchedOutline-legendNotched-19"
                         >
                           <span>
                             Start Date
@@ -1302,10 +1303,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-12 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-14 PrivateNotchedOutline-legendNotched-15"
+                          class="PrivateNotchedOutline-legendLabelled-18 PrivateNotchedOutline-legendNotched-19"
                         >
                           <span>
                             End Date
@@ -1318,27 +1319,21 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                 </div>
               </div>
             </div>
+          </fieldset>
+          <div
+            class="MuiBox-root MuiBox-root-21"
+          >
+            <hr
+              class="MuiDivider-root"
+            />
           </div>
         </div>
         <div
           class="MuiDialogActions-root MuiDialogActions-spacing"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
-            >
-              Cancel
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary Mui-focusVisible Mui-focusVisible"
+            aria-label="Add Funding Source"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-focusVisible Mui-focusVisible"
             tabindex="0"
             type="button"
           >
@@ -1360,6 +1355,20 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
               </span>
             </span>
           </button>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Cancel
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
         </div>
       </div>
     </div>
@@ -1421,32 +1430,23 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
         <div
           class="MuiDialogContent-root"
         >
-          <p
-            class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-            id="alert-dialog-description"
-          >
-            Enter Funding Source Details
-          </p>
-          <div
-            class="MuiBox-root MuiBox-root-16"
+          <fieldset
+            class="MuiBox-root MuiBox-root-22"
           >
+            <legend
+              class="MuiFormLabel-root"
+              id="agency_details"
+            >
+              Agency Details
+            </legend>
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
             >
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Agency Details
-                </h3>
-              </div>
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-fullWidth"
+                  class="MuiFormControl-root"
                   style="width: 100%;"
                 >
                   <label
@@ -1497,10 +1497,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     </svg>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-17 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-19 PrivateNotchedOutline-legendNotched-20"
+                        class="PrivateNotchedOutline-legendLabelled-25 PrivateNotchedOutline-legendNotched-26"
                       >
                         <span>
                           Agency Name
@@ -1540,10 +1540,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-17 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-19 PrivateNotchedOutline-legendNotched-20"
+                        class="PrivateNotchedOutline-legendLabelled-25 PrivateNotchedOutline-legendNotched-26"
                       >
                         <span>
                           Agency Project ID
@@ -1553,15 +1553,19 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                   </div>
                 </div>
               </div>
-              <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-              >
-                <h3
-                  class="MuiTypography-root MuiTypography-h3"
-                >
-                  Funding Details
-                </h3>
-              </div>
+            </div>
+          </fieldset>
+          <fieldset
+            class="MuiBox-root MuiBox-root-27"
+          >
+            <legend
+              class="MuiFormLabel-root"
+            >
+              Funding Details
+            </legend>
+            <div
+              class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
+            >
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
@@ -1606,10 +1610,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-17 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-19 PrivateNotchedOutline-legendNotched-20"
+                        class="PrivateNotchedOutline-legendLabelled-25 PrivateNotchedOutline-legendNotched-26"
                       >
                         <span>
                           Funding Amount
@@ -1660,10 +1664,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-17 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-19 PrivateNotchedOutline-legendNotched-20"
+                          class="PrivateNotchedOutline-legendLabelled-25 PrivateNotchedOutline-legendNotched-26"
                         >
                           <span>
                             Start Date
@@ -1711,10 +1715,10 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-17 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-19 PrivateNotchedOutline-legendNotched-20"
+                          class="PrivateNotchedOutline-legendLabelled-25 PrivateNotchedOutline-legendNotched-26"
                         >
                           <span>
                             End Date
@@ -1727,27 +1731,21 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
                 </div>
               </div>
             </div>
+          </fieldset>
+          <div
+            class="MuiBox-root MuiBox-root-28"
+          >
+            <hr
+              class="MuiDivider-root"
+            />
           </div>
         </div>
         <div
           class="MuiDialogActions-root MuiDialogActions-spacing"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
-            >
-              Cancel
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary Mui-focusVisible Mui-focusVisible"
+            aria-label="Add Funding Source"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-focusVisible Mui-focusVisible"
             tabindex="0"
             type="button"
           >
@@ -1769,6 +1767,20 @@ exports[`ProjectFundingItemForm renders correctly with existing funding item val
               </span>
             </span>
           </button>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Cancel
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
         </div>
       </div>
     </div>
diff --git a/app/src/styles.scss b/app/src/styles.scss
index df831046e0..3c940be7ab 100644
--- a/app/src/styles.scss
+++ b/app/src/styles.scss
@@ -1,5 +1,22 @@
 @import 'styles/fonts.scss';
 
+fieldset {
+  border: none;
+  padding: 0;
+  overflow: hidden;
+  min-width: 0;
+}
+
 legend.MuiFormLabel-root {
+  margin-bottom: 0.75rem;
+  float: left;
+  color: #000000 !important;
   font-weight: 700;
+  letter-spacing: -0.01rem;
 }
+
+.MuiDialogActions-root {
+  button {
+    min-width: 6rem;
+  }
+}
\ No newline at end of file
diff --git a/app/src/themes/appTheme.ts b/app/src/themes/appTheme.ts
index dd4ce1d987..4d0fa9f685 100644
--- a/app/src/themes/appTheme.ts
+++ b/app/src/themes/appTheme.ts
@@ -23,15 +23,9 @@ const appTheme = createMuiTheme({
     }
   },
   typography: {
-    fontFamily: ['BCSans', 'Verdana', 'Arial', 'sans-serif'].join(','),
-    fontSize: 16
+    fontFamily: ['BCSans', 'Verdana', 'Arial', 'sans-serif'].join(',')
   },
   overrides: {
-    MuiButton: {
-      root: {
-        textTransform: 'none'
-      }
-    },
     MuiTypography: {
       // https://material-ui.com/api/typography/
       h1: {
@@ -47,6 +41,15 @@ const appTheme = createMuiTheme({
       h3: {
         fontSize: '1.25rem',
         fontWeight: 700
+      },
+      h6: {
+        letterSpacing: '-0.01rem',
+        fontWeight: 700
+      }
+    },
+    MuiButton: {
+      root: {
+        textTransform: 'none'
       }
     },
     MuiCircularProgress: {
@@ -68,6 +71,16 @@ const appTheme = createMuiTheme({
         margin: 'auto'
       }
     },
+    MuiDialogTitle: {
+      root: {
+        padding: '20px 24px'
+      }
+    },
+    MuiDialogActions: {
+      root: {
+        padding: '20px 24px'
+      }
+    },
     MuiFormLabel: {
       asterisk: {
         color: '#db3131',