DEV - Implement Settings Page Figma Design #295
Description
Overview
This ticket does not include the change password popup or the edit personal info functionality.
In this ticket you will be implementing the Settings FIgma design. When implementing this keep in mind the cleanness of the code. In our frontend a lot of things are just hard coded as huge components so try to split up this component to smaller components. Along with our large files the file structure can be quite confusing so for all of the components you make for this implementation put them in the same folder with an adequate name saying they are for the settings page.
Also reminder to use the new frontend clean ups we have done like the color variables and sticking to tailwind.
When it comes to viewing the component to make sure it looks good you can put in a route in the AppRoutes.tsx.
Just add in something that looks like this <Route path="/settings" element={} />.
Make sure it is put before login so you can access it without having to login or do anything fancy.
PS this ticket does not include the sidebar just the settings on the right.
Tasks
- Create 3 components for each section of the page
- Put in dummy information as a plaveholder
- Create a dummy page /settings in AppRoutes.tsx so the component can be viewed.
Acceptance Criteria
- Design is fully implemented
- Page can be accessed by going to a dummy /settings url
- Components are neatly organized in a folder in an appropriate place in our current file structure