UI assessments

[kristi-h]

Description

I created a page for Assessments in app.

Right now, it shows all the 3 subtasks:
AssessmentResults
AssessmentForm
ResultsLoading

Just comment out the other components if you want to see them individually.

I found out about the subtask for AssessmentPage last night, so that one is still a work in progress (pls ignore that for now).

Issue link

https://app.clickup.com/t/86b3pm1hj

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• [ x] New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

I've tested the changes locally on:
http://localhost:3000/assessment
after using yarn dev

used creds listed on clickup

Checklist:

• [x ] My code follows the style guidelines of this project
• [x ] I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• [x ] My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
chingu-dashboard	❌ Failed (Inspect)			Feb 28, 2025 10:40pm

[Dan-Y-Ko]

The form page layout doesn't look quite the same as in the design. This is what I see

There's also a lot of styles missing and hardcoded styles. Make sure to look at the properties in the figma and match those. All the colors should be using our theme colors, and other styles like font weight, font size, border radius, etc should follow the designs. We have a full design system and components that follow this so that needs to be followed. For example, we have button component with different variants and sizes to match the buttons the design team has in their design system. To use the continue button as an example, that one would be variant of primary and size of xxl.

For the loading animation, I would like you to use framer motion, not adding the animation to the tailwind config

the assessments result page has issues too. Mostly the issues I mentioned above with hardcoding styles but also the layout is off

[Dan-Y-Ko]

I pushed some changes that I think will help you with the layout. There was some padding, and a max width applied to the entire main route which was causing issues, so I just moved that.

[kristi-h]

Got rid of the custom animation in the tailwind.config file and replaced it animation using framer motion.
Also finished the AssessmentPage component.
Working on tidying up styles for AssessmentResults and AssessmentForm next.