Component styles

Moped is built with Material UI and Devias. We apply/retain the Material UI default styles and functionality unless user testing or technical complications justify customization.

Text fields

Use the Standard styling for all text field inputs.

Select fields

Use the basic standard variant for single select.

If the value in a dropdown menu is not a required field, provide a - hyphen at the end of the list for users to clear any previously selected value.

Use checkmarks for multiple select. Checked boxes should be rendered in our Primary Main color.

Edit confirmation

Based on the Material Design confirmation dialog:

• Align on the right side

• "Cancel" to the left of "Save" button

Material Table customizations

• Form validation fix

• Move action buttons to the far right

• Add row button should have a specific text label

• Add row button should remain in upper right

• Add row button should have a circle-plus icon instead of a square-plus icon (see "Projects" page)

• Hide/remove "Actions" column heading

• Show pagination only when there are more than 25 rows.

• Render dates as mm/dd/yyyy

• Enable date-clearing

• Make the "No records to display" text context-dependent, e.g. "No team members to display" on the Team tab.

• Remove min-height on table

• Change table title from h6 to h2

Icons

Use the outline variant of the official Google Material Icons. React Feather is included in Devias, but doesn't have as many icons.