[x] Move "Current Sample ID" item and "Audit" button next to audit progress items
[x] Add section headers
[x] Visually delimit sections with divider
[x] Compact excess whitespace
[x] Election summary
[x] Election outcomes listing
[x] Audit mark listing
[x] Use friendlier, large, square-ish cards for home page
Comments
For a first pass, we are going to use "inline styles". This means that we pass a style prop to style particular component root elements. Our styles are thus defined in code, and there is no built-in cascading. This is dead-simple, and is the original API for styling material-ui components.
This is, however, possibly less designer-friendly, the material-ui project is moving away from it, and it can be suboptimal w.r.t. performance. In the long-term, we should instead set the className prop for components, using whatever CSS scheme the design team prefers (e.g. BEM). We can then just use a stylesheet like usual (which we already include).
For now, this approach allows us to make narrow adjustments at the cost of a bit of extra typing. Other future alternatives include making custom "generic" components (wrappers around the material-ui components) which set styles in the way we prefer.
For #47, #9.
Todo
Comments
For a first pass, we are going to use "inline styles". This means that we pass a
styleprop to style particular component root elements. Our styles are thus defined in code, and there is no built-in cascading. This is dead-simple, and is the original API for stylingmaterial-uicomponents.This is, however, possibly less designer-friendly, the
material-uiproject is moving away from it, and it can be suboptimal w.r.t. performance. In the long-term, we should instead set theclassNameprop for components, using whatever CSS scheme the design team prefers (e.g. BEM). We can then just use a stylesheet like usual (which we already include).For now, this approach allows us to make narrow adjustments at the cost of a bit of extra typing. Other future alternatives include making custom "generic" components (wrappers around the
material-uicomponents) which set styles in the way we prefer.