Admin home restructure

[pierpuccini]

Restructured admin home for mango v4

[terrypacker]

@jazdw can we merge this? There is a backend issue with the units on the disk space and things we will likely want to tweak but in general it is ready.

[jazdw]

@pierpuccini Terry wants to get this merged in pretty soon. Some things that I need fixed first are -

• Remove the changes to package.json and yarn.lock
• CSS classes without a prefix e.g. .big, .biggerIcon, .smallerIcon
• Hardcoded colors in the CSS
• Id references in the CSS, use classes in instead e.g. #ma-ui-home-page-watermark
• Remove id attributes from the markup
• Move SVG images to the adminHomePage component directory
• Remove console.log

Other things which may need to be changed are

• CSS grid layout - not used anywhere else in our codebase, could cause issues, need cross browser testing. If possible change to flex layout
• There seems to be a lot of CSS in general, see if you can condense this down into some utility classes which you can apply to multiple elements. The more CSS we have the harder it is to update and maintain down the track

[jazdw]

Contrast needs to be fixed, please ensure you are using colors from the material palette and testing with the default light and dark themes -

This should also have a thicker line around it -

[jazdw]

The code is much better now, way less CSS, thanks for that. I think we still need to work on making it match the design better though. I will play around with it a bit.

Few things -

• Utilities view all button goes to log files for some reason
• Reports view all button does nothing
• Events view all button does nothing
• White border on hover should be around outside of whole box
• Graph is clipped
• Fix hover colors
• Adjust padding/borders to match design
• Add large watermark images to system/users/events/reports cards

[jazdw]

Current appearance after changes I made -