DRAFT: Re-skin and remove MUI

[benloh]

Re-skin MEME based on Evan's design and remove reliance on MUI.

To Do

• [X] "Evidence Library"
• [X] "Evidence Link"
• [X] The width of the library is also pending a more general revamp.
• [X] Clicking "New Evidence Link" takes you to the Resource View. It should stay in the Evidence Library view.
• [X] The ResourceView window can scroll off screen
• [X] Main View is now functional
• [X] SVG canvas is now displayed in the right place
• [X] SVG canvas properly resizes with sidebar expansion/collapse
• [x] Sidebars now scroll vertically when necessary
• [X] "Elements" tool panel now styled and operational
• [X] Control bar (selected entity/mech/outcome buttons) are now operational
• [ ] Custom icons have not been added yet
• [ ] SVG views still have problem layouts
• [ ] Ratings are still using the "+"/"X" icons
• [ ] Final colors and layout tweaking to match Evan's design

To Test

Focus testing just on the overall look at feel currently. There are features/nuances that aren't implemented yet. Packages have been updated, so don't forget to run npm ci.

1. git fetch
2. git checkout dev-bl/de-muiify-evidence
3. npm run clean
4. npm ci
5. npm start or npm run dev
6. Focus on the Evidence Library -- the rest of the app has not been fixed yet. Try:
   • open resource
   • add a new evidence link
   • expand and contract the evidence link
   • edit the link text
   • attach a screenshot/image
   • link the evidence to an outcome/process/entity

Reference

• Figma Design

[jdanish]

The parts I can see look good... doesn't seem like much to test yet unless I'm misunderstanding? Excited to see it develop!

[benloh]

Yeah, ideally it'd just seem to work like it did before even though we tore out all the guts and tried to hook everything back up again.

[benloh]

Archiving initial comment:

@jdanish here is a first pass at implementing Evan's design as well as removing our reliance on MUI.

Currently only the Evidence Library and Resource Views are mostly done. I changed a few things from the figma designs for various reasons (in some cases because Figma does not render exactly as it does in the browser, in other cases because it was easier to implement). Please give it a whirl to make sure you like the basic gist. Don't worry about reporting any UX issues yet because there are still a lot of broken pieces.

I imagine we'll have to do some more tweaking.

To Do

• [ ] "Evidence Library" navbar heading is not styled yet.
• [ ] The width of the library is also pending a more general revamp.
• [ ] Ratings are still using the "+"/"X" icons
• [ ] Clicking "New Evidence Link" takes you to the Resource View. It should stay in the Evidence Library view.
• [ ] The ResourceView window can scroll off screen
• [ ] All other widgets have not been converted (e.g. the right sidebar, the navbar, all the outcome/process/entity dialogs, sticky notes)

[benloh]

Much of the basics are now styled: