EPIC: TDM UI Adjustments

[Noushie]

Overview

As a result of creating a design system, there were a few glaring inconsistencies between the website and the Figma files we were hoping to clear up (i.e., colours, button states, text adjustments, icons, etc.). Our hope is to align dev team and UI, to ensure website wide consistency

Action Items

• [ ] #1908
• [ ] Site Audit: Check Create Project page 1 for visual design consistency
• [ ] Site Audit: Check Create Project page 2 for visual design consistency
• [ ] Site Audit: Check Create Project page 3 for visual design consistency
• [ ] Site Audit: Check Create Project page 4 for visual design consistency
• [ ] Site Audit: Check Create Project page 5 for visual design consistency
• [ ] Site Audit: Check FAQ page for visual design consistency
• [ ] Site Audit: Check About for visual design consistency
• [ ] Site Audit: Check Feedback page for visual design consistency
• [ ] Site Audit: Check My Projects for visual design consistency
• [ ] Provide appropriate screenshots and figma links to #1341
• [ ] Release the dependency on #1341

Resources/Instructions

Previous resources and action items

Action Items

• [ ] Adjust colours that do not match current design system (ex. standardising error red to the confirmed error shade in the design system)**
• [ ] Resize/replace inconsistent text styles**
• [ ] Alter some component states for better UX (ex. appearance of disabled next buttons)**
• [ ] Replace certain icons with updated versions**

Resources

You will find the annotated Figma file for these changes here

Since a design system is a living file and we are looking at possible changes in the formatting of the website (due to the newest sidebar issue), we may have more UI alterations to add in the near future to match that. I can also create separate issues for that, if that is easier.

Please let me know if you have any questions or concerns - @Noushie