Create edit and approve page component

[nina-py]

Implementation details

• Added EditAndApproveStory component with all the required fields.

• Deleted unneeded .css files.

• Added a global theme, making solid green and brick red primary and secondary colors respectively.

• Global theme contains style overrides for all the buttons.

• Updated all components that use buttons to use the updated button code.

• Added styles for the switch component.

• Fixed minor layout issues in several components to closer match the screenshots in Figma for each component.

• Props are passed into the form (uncontrolled for now).

• Tests have been added for the form.

Closes #70. Closes #93.

Buttons

Quite a bit of work went into theming the buttons and updating components to use the new buttons as each component styled the buttons in its own way thing prior to this change. I have had to update the layout of some of these components (i.e. the login form) as well to match the screenshots supplied in completed issues.

At the moment, App.tsx contains all four components affected so that the changes can easily be reviewed. These are the new EditAndApproveStory component, AddStory, Card, and LoginForm. The Header component also uses the new buttons but more work is needed there - the way it's set up right now it's not taking advantage of Material UI's responsive styles. This should probably be addressed in a separate PR.

This is how buttons can be styled in the app now with the custom Button component:

// Positive (default), i.e. "Approve":
<Button>Approve</Button>
// or, if explicitly defining the type:
<Button buttonType="positive">Approve</Button>

// Negative, i.e. "Reject":
<Button buttonType="negative">Reject</Button>

// Neutral, i.e. "Snooze":
<Button buttonType="neutral">Snooze</Button>

// Hollow, i.e. "Log Out":
<Button buttonType="hollow">Log Out</Button>

//Neutral & hollow, i.e. "Cancel":
<Button buttonType="hollow-neutral">Cancel</Button>

[nina-py]

For the switch component, I have adapted styles from an AirBnB-inspired switch here: https://mui-treasury.com/styles/switch/ (GitHub: https://github.com/siriwatknp/mui-treasury). It's mostly fine but it is off by one (!) pixel in the "on" position. I will hunt this down later; for now I think it's good to go as is.

Just the props/tests remaining, not much left to do in this PR.

[nina-py]

Just a note that tests are passing but output is flooded with warnings identical to the ones mentioned here: https://github.com/testing-library/dom-testing-library/issues/774. The suggested fix doesn't fix the warnings for me but I will look into it in more detail over the coming days.

[nina-py]

All issues with the tests and the Switch component styles have been fixed. Please review - I think this is good to go. All affected components (Card, AddStory, EditAndApproveStory, and LoginForm) are rendered on the home page temporarily. Header is also using the updated buttons but needs refactoring to use MUI Grid components, so please forgive the misalignment of some elements for now.

[kkyeboah]

@nina-py Why do we have all the components rendered in App.tsx, is that intended to stay or just for demo on the PR

[nina-py]

@kkyeboah, yes, that is just to demo the new form and all the other components that use the custom Button component. I can remove those now that you've reviewed everything?

[kkyeboah]

@kkyeboah, yes, that is just to demo the new form and all the other components that use the custom Button component. I can remove those now that you've reviewed everything?

Cool, let's do that.

[nina-py]

Cool, let's do that.

Done.

[nina-py]

Thank you @kkyeboah!