Skip to content

Commit 3dc3939

Browse files
protsack-stephanmadm2n
protsack-stephan
and
madm2n
authored
[OSDEV-2224] Update free emission estimate styles (#797)
Add several UI improvements to the facility claim flow and emissions estimate form, focusing on consistency and user clarity. **Emissions Estimate Form** - All energy input placeholders (e.g., "Enter value in J") have been updated to be more descriptive (e.g., "Enter value in Joules (J)"). - The layout for energy source inputs has been refined. The unit label (e.g., "J", "MWh") alignment was changed, and validation errors are repositioned to display cleanly beneath the input field, even on smaller screens. - The tooltip for the "Actual Annual Energy Consumption" section has been updated with a more comprehensive description of the expected data. **Facility Claim Form** - The horizontal padding for the main form (`ClaimForm.jsx`) and the intro page (`ClaimIntro.jsx`) has been standardized (using `4%` on large screens) to ensure a consistent content width. - A `boxWarningContainer` style has been added to the `ClaimForm` to prominently display submission errors in a red-bordered box, making them more visible to the user. --------- Co-authored-by: Stepan Protsak <stephan.protsack@gmail.com>
1 parent 727f915 commit 3dc3939

8 files changed

Lines changed: 185 additions & 86 deletions

File tree

‎src/react/src/components/FreeEmissionsEstimate/EmissionsEstimateForm.jsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -343,17 +343,22 @@ const EmissionsEstimateForm = ({
343343
}}
344344
variant="outlined"
345345
fullWidth
346+
InputProps={{
347+
classes: {
348+
input: classes.inputStyles,
349+
notchedOutline: classes.notchedOutlineStyles,
350+
},
351+
}}
346352
/>
347353
</Grid>
348354
</Grid>
349355
<Grid container spacing={8}>
350356
<Grid item xs={12}>
351-
<Typography
352-
variant="subheading"
357+
<LabelWithTooltip
358+
label={energyConsumptionLabel.label}
353359
className={classes.energyConsumptionTitle}
354-
>
355-
{energyConsumptionLabel.label}
356-
</Typography>
360+
tooltipText={energyConsumptionLabel.tooltipText}
361+
/>
357362
</Grid>
358363
{energySourcesData.map(energyData => (
359364
<Grid item xs={12} key={energyData.source.label}>

‎src/react/src/components/FreeEmissionsEstimate/EnergySourceInput.jsx‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,22 @@ const EnergySourceInput = ({
3737
name={enabledFieldName}
3838
onChange={freeEmissionsEstimateForm.handleChange}
3939
disabled={disabled}
40+
classes={{
41+
root: classes.checkbox,
42+
checked: classes.checkboxChecked,
43+
}}
4044
/>
4145
}
4246
label={`${source.label}:`}
4347
/>
4448
</Grid>
45-
<Grid item xs={12} sm={8} md={9}>
49+
<Grid
50+
item
51+
xs={12}
52+
sm={8}
53+
md={9}
54+
className={classes.energySourceInputContainer}
55+
>
4656
<TextField
4757
value={value}
4858
placeholder={source.placeholder}
@@ -59,30 +69,40 @@ const EnergySourceInput = ({
5969
);
6070
}}
6171
error={hasError}
62-
helperText={
63-
hasError && (
64-
<InputErrorText
65-
text={
66-
freeEmissionsEstimateForm.errors[
67-
valueFieldName
68-
]
69-
}
70-
/>
71-
)
72-
}
7372
InputProps={{
7473
endAdornment: (
7574
<InputAdornment position="end">
76-
<Typography className={classes.unitText}>
75+
<Typography
76+
variant="body1"
77+
className={classes.unitText}
78+
>
7779
{source.unit}
7880
</Typography>
7981
</InputAdornment>
8082
),
83+
classes: {
84+
root: classes.energySourceInputRoot,
85+
input: classes.inputStyles,
86+
notchedOutline: classes.notchedOutlineStyles,
87+
},
8188
}}
8289
variant="outlined"
8390
fullWidth
8491
/>
8592
</Grid>
93+
<Grid
94+
item
95+
xs={12}
96+
sm={8}
97+
md={9}
98+
className={classes.errorTextContainer}
99+
>
100+
{hasError && (
101+
<InputErrorText
102+
text={freeEmissionsEstimateForm.errors[valueFieldName]}
103+
/>
104+
)}
105+
</Grid>
86106
</Grid>
87107
);
88108
};

‎src/react/src/components/FreeEmissionsEstimate/constants.jsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
const energySourcePlaceholder = 'Enter value in Joules (J)';
4+
35
export const freeEmissionsEstimateFormConfig = Object.freeze({
46
title: Object.freeze({
57
label: '🌍 Free Emissions Estimates',
@@ -38,13 +40,15 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
3840
}),
3941
energyConsumptionLabel: Object.freeze({
4042
label: 'Actual Annual Energy Consumption',
43+
tooltipText:
44+
"Report your facility's total annual energy consumption by source. You can enter a mix of various energy sources with the checkbox selection. Solid and liquid fuel sources are shown in Joules (J) such as Coal, Natural Gas, Diesel, Kerosene, Biomass, Charcoal, Animal Waste, and Other sources. Electricity is shown in megawatt-hours (MWh).",
4145
}),
4246
energySourcesData: Object.freeze([
4347
Object.freeze({
4448
source: Object.freeze({
4549
label: 'Coal',
4650
unit: 'J',
47-
placeholder: 'Enter value in J',
51+
placeholder: energySourcePlaceholder,
4852
}),
4953
enabledFieldName: 'energyCoalEnabled',
5054
valueFieldName: 'energyCoal',
@@ -53,7 +57,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
5357
source: Object.freeze({
5458
label: 'Natural Gas',
5559
unit: 'J',
56-
placeholder: 'Enter value in J',
60+
placeholder: energySourcePlaceholder,
5761
}),
5862
enabledFieldName: 'energyNaturalGasEnabled',
5963
valueFieldName: 'energyNaturalGas',
@@ -62,7 +66,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
6266
source: Object.freeze({
6367
label: 'Diesel',
6468
unit: 'J',
65-
placeholder: 'Enter value in J',
69+
placeholder: energySourcePlaceholder,
6670
}),
6771
enabledFieldName: 'energyDieselEnabled',
6872
valueFieldName: 'energyDiesel',
@@ -71,7 +75,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
7175
source: Object.freeze({
7276
label: 'Kerosene',
7377
unit: 'J',
74-
placeholder: 'Enter value in J',
78+
placeholder: energySourcePlaceholder,
7579
}),
7680
enabledFieldName: 'energyKeroseneEnabled',
7781
valueFieldName: 'energyKerosene',
@@ -80,7 +84,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
8084
source: Object.freeze({
8185
label: 'Biomass',
8286
unit: 'J',
83-
placeholder: 'Enter value in J',
87+
placeholder: energySourcePlaceholder,
8488
}),
8589
enabledFieldName: 'energyBiomassEnabled',
8690
valueFieldName: 'energyBiomass',
@@ -89,7 +93,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
8993
source: Object.freeze({
9094
label: 'Charcoal',
9195
unit: 'J',
92-
placeholder: 'Enter value in J',
96+
placeholder: energySourcePlaceholder,
9397
}),
9498
enabledFieldName: 'energyCharcoalEnabled',
9599
valueFieldName: 'energyCharcoal',
@@ -98,7 +102,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
98102
source: Object.freeze({
99103
label: 'Animal Waste',
100104
unit: 'J',
101-
placeholder: 'Enter value in J',
105+
placeholder: energySourcePlaceholder,
102106
}),
103107
enabledFieldName: 'energyAnimalWasteEnabled',
104108
valueFieldName: 'energyAnimalWaste',
@@ -107,7 +111,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
107111
source: Object.freeze({
108112
label: 'Electricity',
109113
unit: 'MWh',
110-
placeholder: 'Enter value in MWh',
114+
placeholder: 'Enter value in Megawatt-Hours (MWh)',
111115
}),
112116
enabledFieldName: 'energyElectricityEnabled',
113117
valueFieldName: 'energyElectricity',
@@ -116,7 +120,7 @@ export const freeEmissionsEstimateFormConfig = Object.freeze({
116120
source: Object.freeze({
117121
label: 'Other',
118122
unit: 'J',
119-
placeholder: 'Enter value in J',
123+
placeholder: energySourcePlaceholder,
120124
}),
121125
enabledFieldName: 'energyOtherEnabled',
122126
valueFieldName: 'energyOther',

‎src/react/src/components/FreeEmissionsEstimate/styles.js‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import COLOURS from '../../util/COLOURS';
2+
13
export const labelStyles = Object.freeze({
24
labelContainer: Object.freeze({
35
flexWrap: 'nowrap',
6+
marginBottom: '5px',
47
}),
58
label: Object.freeze({
69
marginRight: '8px',
@@ -14,6 +17,7 @@ export const labelStyles = Object.freeze({
1417
}),
1518
tooltipPopper: Object.freeze({
1619
opacity: 1,
20+
maxWidth: '512px',
1721
}),
1822
tooltip: Object.freeze({
1923
marginLeft: '8px',
@@ -35,11 +39,20 @@ export const labelStyles = Object.freeze({
3539
}),
3640
});
3741

42+
const inputStyles = Object.freeze({
43+
fontSize: '18px',
44+
fontWeight: 600,
45+
});
46+
47+
const notchedOutlineStyles = Object.freeze({
48+
borderRadius: 0,
49+
});
50+
3851
export const freeEmissionsEstimateStyles = Object.freeze({
3952
emissionsSection: Object.freeze({
4053
background: 'linear-gradient(to right, #f0fdf4, #eff6ff)',
4154
padding: '19px 24px 24px 24px',
42-
borderRadius: '8px',
55+
borderRadius: '0px',
4356
border: '1px solid #bbf7d0',
4457
marginTop: '16px',
4558
}),
@@ -65,22 +78,53 @@ export const freeEmissionsEstimateStyles = Object.freeze({
6578
estimatedAnnualThroughputContainer: Object.freeze({
6679
marginBottom: '10px',
6780
}),
81+
inputStyles,
82+
notchedOutlineStyles,
6883
});
6984

7085
export const energySourceInputStyles = Object.freeze({
7186
unitText: Object.freeze({
7287
minWidth: '50px',
7388
marginLeft: '8px',
74-
fontSize: '14px',
89+
fontSize: '18px',
90+
fontWeight: 600,
7591
color: '#64748b',
92+
display: 'flex',
93+
alignItems: 'center',
94+
justifyContent: 'center',
95+
}),
96+
energySourceInputRoot: Object.freeze({
97+
boxSizing: 'border-box',
7698
}),
7799
energySourceInputContainer: Object.freeze({
100+
display: 'flex',
78101
alignItems: 'center',
102+
justifyContent: 'center',
79103
}),
80104
checkboxLabel: Object.freeze({
81105
fontSize: '18px',
82106
fontWeight: 600,
83107
}),
108+
checkbox: Object.freeze({
109+
color: `${COLOURS.DARK_MATERIAL_GREEN} !important`,
110+
}),
111+
checkboxChecked: Object.freeze({
112+
color: `${COLOURS.DARK_MATERIAL_GREEN} !important`,
113+
}),
114+
inputStyles,
115+
notchedOutlineStyles,
116+
errorTextContainer: Object.freeze({
117+
marginLeft: '25%',
118+
marginTop: '5px',
119+
'@media (max-width: 900px)': {
120+
marginLeft: '32%',
121+
marginTop: '5px',
122+
},
123+
'@media (max-width: 700px)': {
124+
marginLeft: '0',
125+
marginTop: '5px',
126+
},
127+
}),
84128
});
85129

86130
export const yearPickerStyles = Object.freeze({

‎src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Security from '@material-ui/icons/Security';
1515
import People from '@material-ui/icons/People';
1616
import Language from '@material-ui/icons/Language';
1717
import Business from '@material-ui/icons/Business';
18+
import Warning from '@material-ui/icons/Warning';
1819

1920
import ClaimFormStepper from './Stepper/Stepper';
2021
import EligibilityStep from './Steps/EligibilityStep/EligibilityStep';
@@ -304,24 +305,30 @@ const ClaimForm = ({
304305
onEmissionsValidationChange={setEmissionsHasErrors}
305306
/>
306307
{submissionError && (
307-
<Typography
308-
variant="body2"
309-
color="error"
310-
style={{
311-
textAlign: 'center',
312-
marginTop: '24px',
313-
fontSize: '16px',
314-
}}
315-
>
316-
An error prevented submitting the form
317-
</Typography>
308+
<div className={`${classes.boxWarningContainer}`}>
309+
<Typography
310+
variant="body2"
311+
className={classes.boxWarningText}
312+
>
313+
<span
314+
className={classes.boxWarningTextIcon}
315+
>
316+
<Warning
317+
className={classes.warningIcon}
318+
/>
319+
<strong>ERROR!</strong>
320+
</span>
321+
<span>{submissionError}</span>
322+
</Typography>
323+
</div>
318324
)}
319325
<Grid container className={classes.navigationButtons}>
320326
<Grid item>
321327
<Button
322328
variant="outlined"
323329
onClick={handleBack}
324330
className={classes.buttonBack}
331+
disabled={submissionFetching}
325332
>
326333
{isFirstStep(activeStep)
327334
? 'Go Back'
@@ -344,9 +351,14 @@ const ClaimForm = ({
344351
variant="contained"
345352
type="submit"
346353
className={classes.buttonPrimary}
347-
disabled={isButtonDisabled}
354+
disabled={
355+
isButtonDisabled ||
356+
submissionFetching
357+
}
348358
>
349-
Submit Claim
359+
{submissionFetching
360+
? 'Submitting...'
361+
: 'Submit Claim'}
350362
</Button>
351363
)}
352364
</Grid>

‎src/react/src/components/InitialClaimFlow/ClaimForm/Steps/ProfileStep/styles.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export const profileStepStyles = theme =>
8686
padding: '0',
8787
}),
8888
emissionsEstimateContainer: Object.freeze({
89+
marginTop: '24px',
8990
maxWidth: '1071px',
9091
}),
9192
sectionIconWrapper: Object.freeze({

0 commit comments

Comments
 (0)