From 59eb8f077c2f67b4e88ef116ce28cf4617d7d66c Mon Sep 17 00:00:00 2001
From: Florian Boulnois <fboulnoi@broadinstitute.org>
Date: Mon, 28 Oct 2024 13:37:40 -0400
Subject: [PATCH] fix: ensure h3 validation fields have correct styling

---
 src/components/forms/forms.jsx                  | 6 +++++-
 src/pages/dar_application/DataAccessRequest.jsx | 8 +++++++-
 src/pages/dar_application/ResearcherInfo.jsx    | 5 +++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/forms.jsx b/src/components/forms/forms.jsx
index 8ce9757e8..d4fb18c0a 100644
--- a/src/components/forms/forms.jsx
+++ b/src/components/forms/forms.jsx
@@ -37,6 +37,7 @@ export const commonOptionalProps = [
   'defaultValue',
   'hideTitle',
   'style',
+  'titleStyle',
   'validators',
   'onChange',
   'type',
@@ -216,6 +217,7 @@ export const FormFieldTitle = (props) => {
     ariaLevel,
     required,
     validation,
+    titleStyle,
   } = props;
 
   return <div>
@@ -223,6 +225,7 @@ export const FormFieldTitle = (props) => {
       <label
         id={`lbl_${formId}`}
         className={`control-label ${isValid(validation) ? '' : 'errored'}`}
+        style={titleStyle}
         htmlFor={`${formId}`}
         aria-level={ariaLevel}>
         {title}
@@ -238,7 +241,7 @@ export const FormField = (config) => {
   const {
     id, name, type = FormFieldTypes.TEXT, ariaLevel,
     title, hideTitle, description, helpText,
-    defaultValue, style, validators,
+    defaultValue, style, titleStyle, validators,
     validation, onValidationChange
   } = config;
 
@@ -288,6 +291,7 @@ export const FormField = (config) => {
       formId={id}
       ariaLevel={ariaLevel}
       validation={getValidation()}
+      titleStyle={titleStyle}
     />
     <type.component
       {...config}
diff --git a/src/pages/dar_application/DataAccessRequest.jsx b/src/pages/dar_application/DataAccessRequest.jsx
index a496c0936..91ba0bebb 100644
--- a/src/pages/dar_application/DataAccessRequest.jsx
+++ b/src/pages/dar_application/DataAccessRequest.jsx
@@ -140,9 +140,11 @@ export default function DataAccessRequest(props) {
     // eslint-disable-next-line react/no-unknown-property
     <div datacy={'data-access-request'}>
       <div className={'dar-step-card'}>
+        <h2>Step 2: Data Access Request</h2>
+
         {DAAUtils.isEnabled() ?
           <div>
-            <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '0.5rem' }} className="control-label">2.1 Select Dataset(s)</label>
+            <label style={{ fontSize: '24px', fontWeight: 500, color: '#333333', display: 'block', marginBottom: '0.5rem' }} className="control-label">2.1 Select Dataset(s)</label>
             <p style={{ marginBottom: '1rem' }}>Currently selected datasets:</p>
             <SelectableDatasets
               disabled={readOnlyMode}
@@ -158,6 +160,7 @@ export default function DataAccessRequest(props) {
             isAsync={true}
             isMulti={true}
             title={'2.1 Select Dataset(s)'}
+            titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
             validators={[FormValidators.REQUIRED]}
             validation={validation.datasetIds}
             onValidationChange={onValidationChange}
@@ -185,6 +188,7 @@ export default function DataAccessRequest(props) {
           id={'projectTitle'}
           key={'projectTitle'}
           title={'2.2 Descriptive Title of Project'}
+          titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
           disabled={readOnlyMode}
           validators={[FormValidators.REQUIRED]}
           validation={validation.projectTitle}
@@ -207,6 +211,7 @@ export default function DataAccessRequest(props) {
           disabled={readOnlyMode}
           type={FormFieldTypes.TEXTAREA}
           title={'2.3 Research Use Statement (RUS)'}
+          titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
           validators={[FormValidators.REQUIRED]}
           description={
             <>
@@ -324,6 +329,7 @@ export default function DataAccessRequest(props) {
           disabled={readOnlyMode}
           type={FormFieldTypes.TEXTAREA}
           title={'2.4 Non-Technical Summary'}
+          titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
           validators={[FormValidators.REQUIRED]}
           description={includeInstructions ? 'Please enter below a non-technical summary of your RUS suitable for understanding by the general public (written at a high school reading level or below).' : ''}
           placeholder={'Please limit your your non-technical summary to 1100 characters'}
diff --git a/src/pages/dar_application/ResearcherInfo.jsx b/src/pages/dar_application/ResearcherInfo.jsx
index 1932c84c5..033a3f085 100644
--- a/src/pages/dar_application/ResearcherInfo.jsx
+++ b/src/pages/dar_application/ResearcherInfo.jsx
@@ -82,6 +82,7 @@ export default function ResearcherInfo(props) {
             id='researcherName'
             placeholder='Enter Firstname Lastname'
             title='1.1 Researcher'
+            titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             defaultValue={researcher.displayName}
@@ -150,6 +151,7 @@ export default function ResearcherInfo(props) {
             description='I certify that the principal investigator listed below is aware of this study'
             placeholder='Firstname Lastname'
             title='1.3 Principal Investigator'
+            titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             validation={validation.piName}
@@ -209,6 +211,7 @@ export default function ResearcherInfo(props) {
             type={FormFieldTypes.SELECT}
             description='I certify that the individual listed below is my Institutional Signing official'
             title='1.6 Institutional Signing Official'
+            titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             defaultValue={formData.signingOfficial}
@@ -231,6 +234,7 @@ export default function ResearcherInfo(props) {
             description='I certify that the individual listed below is my IT Director'
             placeholder='Enter Firstname Lastname'
             title='1.7 Information Technology (IT) Director'
+            titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             validation={validation.itDirector}
@@ -247,6 +251,7 @@ export default function ResearcherInfo(props) {
               disabled={readOnlyMode}
               type={FormFieldTypes.RADIOGROUP}
               title='1.8 Cloud Use Statement'
+              titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
               description={[
                 <span key='anvil-use-description'>
                   Will you perform all of your data storage and analysis for this project on the