Skip to content

Conversation

@daniel-lxs
Copy link
Member

@daniel-lxs daniel-lxs commented Sep 4, 2025

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

  • Reduced excessive padding: Changed from p-16 to p-6 for better space utilization
  • Removed excessive bold text: Used font-medium instead of font-bold for a cleaner look
  • Made components more compact:
    • Reduced provider card padding
    • Smaller icons (32x32px instead of 40x40px)
    • Changed border radius from rounded-lg to rounded-md
  • Improved text visibility:
    • Increased introduction text size from text-sm to text-base
    • Better color contrast using text-vscode-foreground
    • Centered the main greeting title
  • Enhanced visual hierarchy: Added proper spacing and text sizing throughout

Before & After

Before

  • Excessive padding (p-16)
  • Too much bold text everywhere
  • Large components taking too much space
image image

After

  • Balanced padding (p-6)
  • Compact, clean design with better readability
image

Testing

  • Visual testing in VSCode
  • All linting checks pass
  • Type checks pass

- 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
@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. UI/UX UI/UX related or focused labels Sep 4, 2025
@daniel-lxs daniel-lxs moved this from Triage to PR [Needs Review] in Roo Code Roadmap Sep 4, 2025
Copy link
Contributor

@roomote roomote bot left a 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">
Copy link
Contributor

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">
Copy link
Contributor

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.
@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels Sep 4, 2025
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Sep 5, 2025
@mrubens mrubens merged commit 55ea328 into main Sep 5, 2025
12 checks passed
@mrubens mrubens deleted the fix/welcome-view-styling branch September 5, 2025 11:55
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Sep 5, 2025
@github-project-automation github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Sep 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer PR - Needs Review size:S This PR changes 10-29 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

4 participants