Add base style, typography #26
Conversation
GavinSin
requested review from
Jovin-Ang,
Nicholas-Cheng-De-Fei,
Copilot,
okkhoy,
rollingpencil and
sheenkerr
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive design system update implementing new base styles and typography based on a Figma design. The changes establish a consistent visual foundation across the application with improved font usage and modern styling patterns.
- Adds custom typography system with IBM Plex Serif and Inter fonts
- Updates UI components to use responsive design with clamp() functions
- Implements new color scheme and border radius standards through CSS custom properties
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| PeerPrep/src/frontend/pages/auth/Login.tsx | Restructured login form layout with responsive typography and improved button styling |
| PeerPrep/src/frontend/pages/LandingPage.tsx | Updated landing page with responsive text sizing and improved grid layout |
| PeerPrep/src/frontend/assets/styles.css | Added comprehensive design system with custom fonts, base styles, and updated theme variables |
| PeerPrep/package.json | Added IBM Plex Serif font dependency |
| .vscode/settings.json | Added VS Code configuration for consistent file formatting |
Files not reviewed (1)
- PeerPrep/package-lock.json: Language not supported
Comments suppressed due to low confidence (1)
PeerPrep/src/frontend/pages/LandingPage.tsx:1
- The company name should be capitalized as 'GitHub' (with a capital 'H'), not 'Github'.
import { Link } from "react-router";
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| Connect with peers, practice problems, and ace your next technical | ||
| interview! | ||
| </p> | ||
| <div className="grid grid-cols-2 gap-7 w-7/10"> |
There was a problem hiding this comment.
The class w-7/10 is not a standard Tailwind CSS utility class. Use w-[70%] or define a custom width utility in your Tailwind configuration instead.
| <div className="grid grid-cols-2 gap-7 w-7/10"> | |
| <div className="grid grid-cols-2 gap-7 w-[70%]"> |
Copilot uses AI. Check for mistakes.
# Conflicts: # PeerPrep/package-lock.json # PeerPrep/src/frontend/pages/auth/Register.tsx
2 participants
Closes #28