update ui and add screenshots for calc and assessment to readme#2
update ui and add screenshots for calc and assessment to readme#2reactlabs-dev merged 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Updates the UI styling toward a darker theme and enhances the project documentation with new screenshots.
Changes:
- Adjust global/theme and component styling (background/text colors, borders, calculator framing).
- Make assessment progress percentage computation safer (avoid divide-by-zero and round the displayed percent).
- Add calculator and assessment screenshots to the README.
Reviewed changes
Copilot reviewed 6 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/styles.scss |
Switches global background/text styling toward a dark theme. |
src/app/pages/home.module.scss |
Removes the jumbotron bottom border accent. |
src/app/components/questionnaire/QuestionnaireDialog.tsx |
Guards and rounds the progress bar percentage calculation. |
src/app/components/footer/Footer.module.scss |
Updates footer text color for dark background. |
src/app/components/calculator/Calculator.module.scss |
Changes calculator border styling to a thicker gold frame. |
README.md |
Adds screenshots for calculator and guided assessment. |
Comments suppressed due to low confidence (1)
src/styles.scss:9
--color-bgwas switched to a dark value, but--color-text-main/--color-text-mutedremain dark. Any components still using these tokens will end up with low-contrast text on the new dark background. Consider updating the text tokens (or introducing a dedicated dark theme token set) so the palette stays consistent and accessible.
--color-bg: #1f2937;
--color-surface: #ffffff;
--color-border-subtle: #d6d0c4;
--color-text-main: #1f2933;
--color-text-muted: #6b7280;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| line-height: 1.4; | ||
| background-color: var(--color-bg); | ||
| color: var(--color-text-main); | ||
| color: #f9fafb; | ||
| } |
There was a problem hiding this comment.
color is now hardcoded to #f9fafb instead of using a design token. Since this file defines global tokens, it would be more maintainable to use var(--color-text-main) (after updating it for the dark background) or introduce a specific token for default body text on dark backgrounds, so component styles don’t need to mix variables and raw hex values.
| width: 95vw; | ||
| height: auto; | ||
| background-color: var(--color-surface); | ||
| border: solid 1px var(--color-border-subtle); | ||
| border-radius: 6px; | ||
| border: solid 10px var(--color-gold); | ||
| border-radius: 18px; | ||
| margin: 25vh auto 0 auto; |
There was a problem hiding this comment.
Changing the border to 10px while keeping width: 95vw can cause the element to exceed the viewport (default box-sizing: content-box adds border to the specified width), leading to horizontal scrolling on smaller screens. Consider switching this component to box-sizing: border-box, reducing the width, or using an outline/shadow effect if the goal is a thick frame without affecting layout.
| margin-top: 40px; | ||
| margin-bottom: 20px; | ||
| color: var(--color-text-muted); | ||
| color: #e5e7eb; | ||
| } No newline at end of file |
There was a problem hiding this comment.
This hardcodes a light text color in the module, while the rest of the styling relies on CSS variables (e.g., var(--color-text-muted) previously). To keep theming consistent, consider updating the global --color-text-muted token for the new dark background and continuing to use the variable here instead of a hex literal.
1 participant
No description provided.