✅ Deploy Preview for sporosdaoapp-dev ready!

Name	Link
🔨 Latest commit	e4dd2f6
🔍 Latest deploy log	https://app.netlify.com/sites/sporosdaoapp-dev/deploys/6330ddc82d80ae00087510c9
😎 Deploy Preview	https://deploy-preview-137--sporosdaoapp-dev.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

I have read the CLA Document and I hereby sign the CLA

recheck

GM @brightiron ! Starting review this morning.

Does it make sense to add a section to the frontend readme on Custom MUI Theme?

• how to use
• how to manually test
• how to contribute
• how to write regression tests

GM @brightiron ! Starting review this morning.

Does it make sense to add a section to the frontend readme on Custom MUI Theme?

• how to use
• how to manually test
• how to contribute
• how to write regression tests

i can add some docs around how to spin up the storybook server locally, and general guide for contributing new styles.
In terms of use, you'll just use the existing MUI components, and import those directly from mui. I didn't go the custom component route for this iteration.

The storybook itself would serve as a reference for usage/implementation/docs.

For regression tests, since these are really just css styles, there's not a ton to test. You could use something like chromatic though, if that's what your thinking.. but there's nothing to really to write for tests, as it just relies on storybook stories.

All sounds good. Please drop an update to README.md so anyone can follow along the same process and tools for styling.

I will tinker with yarn test fixes in a separate PR. No need to hold this one.

@brightiron are you able to use the app on this branch? I am getting wallet connectivity errors:

These metamask errors turned out to be a problem with metamask. The chrome extension crashed after a few more tries and after restarting it in the browser, it works again as expected. I experienced the same issue with a different version of the app.

I've spent some time testing the look and feel of the new styles. Noticing some visible changes that I am not sure are by design. For example accents disappeared from some pages. Tribute buttons are usually the primary color (blue in the default MUI app) and Active are usually in an accented green color. With the new theme all seem to show monochromatic for the most part.

Also the font sizes do not seem proportional as compared to the default look and feel. See screenshots.

How do we go about testing look and feel, fixing any open issues and preventing regression in a reliable way?

@ivelin, font sizes are implemented by the design system. I did not go through and update the app. There are several cases where MUI typography tags are not being used.. For example, MUI recommends using for an h6.

Buttons are implemented via the design system specification. For example:

Text buttons are implemented using the text button variant (see above). Which is monochromatic by netbees design.

if you run yarn storybook locally, you will spin up a storybook instance where you can see all the different states implemented.

If a style is off, i.e. you previously had a 'text' button implemented, but it should be a 'contained' button instead, you'll need to implement a different variant.

Again, the scope of this PR was purely css changes and implementing styling over existing components to align with the future design system. In a couple limited cases i adjusted the main layout to show a simple implementation example, but adjustments to the site will still need to be made to align properly with material UI usage and Netbee's new designs.

Hope that clears things up. Anything else around issues w/ functionality of the site (wallet connection) wouldn't have been touched with this PR

running yarn storybook locally will allow you to independently verify mui styling. as well as how to implement specific styles:

OK. Merging this PR. Let's discuss separately how to polish the app so it matches netbee's figma work.