Frontend refactors

[SamuelPelletierEvraire]

Context

Our current frontend could use some improvement in terms of design, performance, and accessibility. We've built custom components that, while functional, are hard to maintain and haven't followed consistent development patterns, making updates slower and more difficult. We'd like to refresh the look with a more polished and professional design, ensure it meets GoC (Government of Canada) accessibility standards, and explore established open-source tools that could help us work faster and make the code easier to maintain.

Desired Outcome

• A visually improved and more professional-looking frontend.
• Enhanced performance and responsiveness across all components.
• Adoption of well-established open-source frameworks and libraries to streamline development.
• Simplified and more maintainable codebase, following consistent development patterns.
• Faster development cycles with easier component updates and modifications.

Tasks

Project Setup

• As a dev, I want to set up a base project with Next.js, Zustand, and Material-UI #292

Components

Figma designs

• As a dev, I want to refactor the header component #196
• As a dev, I want to create a popup for user information #298
• As a dev, I want to refactor the SideMenu component #197
• As a dev, I want to refactor the CapturPage to HomePage component #198
• As a dev, I want to refactor the AlertBanner Component #199
• As a dev, I want to refactor the Label Data Validation Page #201
• As a dev, I want to refactor the ConfirmPage Page #202
• As a dev, I want to refactor the SettingPage Page #203
• As a dev, I want to refactor the user page call DashboardPage component. #283
• As a dev, I want to refactor the AlertProvider component. #194
• As a dev, I want to refactor the login / sign up component. #284

Other

• As a dev, I want the front-end to respect the GoC accessibility standards and CFIA visual identity #248
• As a dev, I want to explore react frameworks to improve our development speed and modernize our frontend #256
• As a dev, I want design prototypes to guide frontend refactors for GoC compliance, aesthetics, and efficiency #257
• As a dev, I want to transition to JWT for a more reliable authentication system #261
• As a user, I want to upload more images without size limitations by removing the reliance on session storage #263
• As a dev, I want to easly deploy the fertiscan alpha-v2.0.0 through docker #296

[k-allagbe]

This epic has been updated and will now serve to track individual component refactoring tasks as well.

[ChromaticPanic]

Our header should incorporate these according to the GC identity program for internal websites
https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard.html#design
https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/government-canada-websites-design-standard-fip.html

https://design.canada.ca/common-design-patterns/global-header.html

[ChromaticPanic]

The footer also needs a Canada word mark https://design.canada.ca/common-design-patterns/site-footer.html