[DT-936] Ensure H3 validation fields have correct styling (#2699)

DataBiosphere · Oct 29, 2024 · eaa6e31 · eaa6e31
1 parent fa4d476
commit eaa6e31
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git 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,13 +217,15 @@ export const FormFieldTitle = (props) => {
     ariaLevel,
     required,
     validation,
+    titleStyle,
   } = props;
 
   return <div>
     {title && !hideTitle &&
       <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
@@ -13,6 +13,8 @@ import {
 import SelectableDatasets from './SelectableDatasets';
 import {DAAUtils} from '../../utils/DAAUtils';
 
+const titleStyle = { fontSize: '24px', fontWeight: 500, color: '#333333' };
+
 const formatOntologyForSelect = (ontology) => {
   return {
     value: ontology.id,
@@ -140,9 +142,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={{ ...titleStyle, 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 +162,7 @@ export default function DataAccessRequest(props) {
             isAsync={true}
             isMulti={true}
             title={'2.1 Select Dataset(s)'}
+            titleStyle={titleStyle}
             validators={[FormValidators.REQUIRED]}
             validation={validation.datasetIds}
             onValidationChange={onValidationChange}
@@ -185,6 +190,7 @@ export default function DataAccessRequest(props) {
           id={'projectTitle'}
           key={'projectTitle'}
           title={'2.2 Descriptive Title of Project'}
+          titleStyle={titleStyle}
           disabled={readOnlyMode}
           validators={[FormValidators.REQUIRED]}
           validation={validation.projectTitle}
@@ -207,6 +213,7 @@ export default function DataAccessRequest(props) {
           disabled={readOnlyMode}
           type={FormFieldTypes.TEXTAREA}
           title={'2.3 Research Use Statement (RUS)'}
+          titleStyle={titleStyle}
           validators={[FormValidators.REQUIRED]}
           description={
             <>
@@ -324,6 +331,7 @@ export default function DataAccessRequest(props) {
           disabled={readOnlyMode}
           type={FormFieldTypes.TEXTAREA}
           title={'2.4 Non-Technical Summary'}
+          titleStyle={titleStyle}
           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
@@ -8,6 +8,7 @@ import { FormField, FormValidators, FormFieldTypes } from '../../components/form
 import './dar_application.css';
 
 const linkStyle = {color: '#2FA4E7'};
+const titleStyle = { fontSize: '24px', fontWeight: 500, color: '#333333' };
 const profileLink = <Link to="/profile" style={linkStyle}>Your Profile</Link>;
 const profileUnsubmitted = <span>Please submit {profileLink} to be able to create a Data Access Request</span>;
 const profileSubmitted = <span>Please make sure {profileLink} is updated as it will be used to pre-populate parts of the Data Access Request</span>;
@@ -82,6 +83,7 @@ export default function ResearcherInfo(props) {
             id='researcherName'
             placeholder='Enter Firstname Lastname'
             title='1.1 Researcher'
+            titleStyle={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             defaultValue={researcher.displayName}
@@ -150,6 +152,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={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             validation={validation.piName}
@@ -209,6 +212,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={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             defaultValue={formData.signingOfficial}
@@ -231,6 +235,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={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             validation={validation.itDirector}
@@ -247,6 +252,7 @@ export default function ResearcherInfo(props) {
               disabled={readOnlyMode}
               type={FormFieldTypes.RADIOGROUP}
               title='1.8 Cloud Use Statement'
+              titleStyle={titleStyle}
               description={[
                 <span key='anvil-use-description'>
                   Will you perform all of your data storage and analysis for this project on the