We're working with community non-profits who have a Host Home or empty bedrooms initiative to develop a workflow management tool to make the process scalable (across all providers), reduce institutional bias, and effectively capture data.
Added asterisk based on validation requiring the field
Overrided MUI asterisk color to match designs.
Redid the label per field.
Rationale behind the changes?
Asterisk color was done local to the form and not to the whole website's theme to avoid confusion on color in future usage.
Modified how the field label was rendered since some field types required a label to make the asterisk work. Since I was already modifying the label, I made the change to render the label as field.title by handling them in the switch case to better match the figma designs.
Testing done for these changes
Compared with db\profile.ts to make sure when validation was set to true/false, the asterisk rendered properly.
What did you learn or can share that is new?(optional)
InputLabelProps={{shrink: true}} will make the field label inline to the border, but a label is needed to make it work.
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals before changes are appliedVisuals after changes are applied
Closes #715
What changes did you make?
Rationale behind the changes?
field.titleby handling them in the switch case to better match the figma designs.Testing done for these changes
db\profile.tsto make sure when validation was set to true/false, the asterisk rendered properly.What did you learn or can share that is new?(optional)
InputLabelProps={{shrink: true}}will make the field label inline to the border, but a label is needed to make it work.Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals before changes are applied
Visuals after changes are applied