-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Fix: Improve WelcomeView styling and readability #7682
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
- Reduced excessive padding from p-16 to p-6 - Removed excessive bold text throughout - Made provider cards more compact with smaller icons (32x32px) - Increased introduction text size from text-sm to text-base for better visibility - Centered the main greeting title - Improved visual hierarchy with proper text sizing and spacing - Added subtle borders and improved color contrast
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your contribution! I've reviewed the changes and they successfully address the styling issues mentioned in the description. The WelcomeView is now more compact and readable. I have a few suggestions for improvement.
| target="_blank" | ||
| rel="noopener noreferrer"> | ||
| <div className="w-10 h-10"> | ||
| <div className="w-8 h-8 flex-shrink-0"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The icon size reduction from 40x40px to 32x32px improves compactness, but have we considered the accessibility impact? Would it be worth making this configurable or ensuring it meets WCAG guidelines for minimum target sizes?
| </TabContent> | ||
| <div className="sticky bottom-0 bg-vscode-sideBar-background p-5"> | ||
| <div className="flex flex-col gap-1"> | ||
| <div className="sticky bottom-0 bg-vscode-sideBar-background p-4 border-t border-vscode-panel-border"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great addition of the border-top here! To ensure sufficient contrast across all VSCode themes, could we verify that provides adequate visibility in both light and dark themes?
Removed the text-vscode-warningForeground class as it wasn't defined in index.css. The incentive text now uses default color which looks good.
Description
This PR improves the styling and readability of the WelcomeView component, addressing issues with excessive padding and bold text that made the interface look cluttered.
Changes Made
p-16top-6for better space utilizationfont-mediuminstead offont-boldfor a cleaner lookrounded-lgtorounded-mdtext-smtotext-basetext-vscode-foregroundBefore & After
Before
After
Testing