Update Guidance/Validation Icon

[jzichichi]

Update Info button to the right of the element title so that icon displayed is based on element requirement and status, as follows:

Mandatory element, empty: https://fontawesome.com/icons/exclamation-triangle?style=solid Color: #fdae61

Optional element, empty: https://fontawesome.com/icons/question-circle?style=solid Color: #ffffbf

Any element, populated and valid: https://fontawesome.com/icons/check-circle?style=solid Color: #1a9641

Any element, populated and invalid: https://fontawesome.com/icons/check-circle?style=solid Color: #d7191c

[aergul]

Implemented

[jzichichi]

@aergul - I really like how these came out; I see what you mean on the coloring - the yellow one may be hard to discern from background. @torrin47 - your thoughts?

[torrin47]

The yellow is definitely tough to see on that particular shade of grey background. I experimented with a few options, and ultimately I prefer the idea of darkening the grey (#9e9e9e91) to picking a different yellow. With how central we're making these icons to the user experience, I also wonder about bumping the font size of that list header from 0.9em to 1.0em.

I'm not seeing the orange triangle on the mandatory empty elements - is that still in the works?

[aergul]

@torrin47 's suggestions addressed.

[jzichichi]

@aergul - I believe you captured @torrin47's suggestions - I see orange triangle, grey looks darker; font looks bigger. Will see what @torrin47 thinks

[torrin47]

Is great, let's go ahead and remove the i information icons.

[aergul]

removed

[jzichichi]

@aergul - LOOKS GOOD - MOVING OVER

[torrin47]

This issue was moved to USEPA/EPA_Non-geo_Metadata_Editor#7