refactor: pull title style into constant

DataBiosphere · Oct 29, 2024 · 35f5eb6 · 35f5eb6
1 parent 59eb8f0
commit 35f5eb6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
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,
@@ -144,7 +146,7 @@ export default function DataAccessRequest(props) {
 
         {DAAUtils.isEnabled() ?
           <div>
-            <label style={{ fontSize: '24px', fontWeight: 500, color: '#333333', 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}
@@ -160,7 +162,7 @@ export default function DataAccessRequest(props) {
             isAsync={true}
             isMulti={true}
             title={'2.1 Select Dataset(s)'}
-            titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+            titleStyle={titleStyle}
             validators={[FormValidators.REQUIRED]}
             validation={validation.datasetIds}
             onValidationChange={onValidationChange}
@@ -188,7 +190,7 @@ export default function DataAccessRequest(props) {
           id={'projectTitle'}
           key={'projectTitle'}
           title={'2.2 Descriptive Title of Project'}
-          titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+          titleStyle={titleStyle}
           disabled={readOnlyMode}
           validators={[FormValidators.REQUIRED]}
           validation={validation.projectTitle}
@@ -211,7 +213,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' }}
+          titleStyle={titleStyle}
           validators={[FormValidators.REQUIRED]}
           description={
             <>
@@ -329,7 +331,7 @@ export default function DataAccessRequest(props) {
           disabled={readOnlyMode}
           type={FormFieldTypes.TEXTAREA}
           title={'2.4 Non-Technical Summary'}
-          titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+          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,7 +83,7 @@ export default function ResearcherInfo(props) {
             id='researcherName'
             placeholder='Enter Firstname Lastname'
             title='1.1 Researcher'
-            titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+            titleStyle={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             defaultValue={researcher.displayName}
@@ -151,7 +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={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+            titleStyle={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             validation={validation.piName}
@@ -211,7 +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={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+            titleStyle={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             defaultValue={formData.signingOfficial}
@@ -234,7 +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={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+            titleStyle={titleStyle}
             validators={[FormValidators.REQUIRED]}
             ariaLevel={ariaLevel + 1}
             validation={validation.itDirector}
@@ -251,7 +252,7 @@ export default function ResearcherInfo(props) {
               disabled={readOnlyMode}
               type={FormFieldTypes.RADIOGROUP}
               title='1.8 Cloud Use Statement'
-              titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
+              titleStyle={titleStyle}
               description={[
                 <span key='anvil-use-description'>
                   Will you perform all of your data storage and analysis for this project on the