From 123c61d2199ba33f9c5c12c0eea7d9c16336e982 Mon Sep 17 00:00:00 2001
From: Daniel Riccio <ricciodaniel98@gmail.com>
Date: Thu, 4 Sep 2025 18:05:17 -0500
Subject: [PATCH 1/2] fix: improve WelcomeView styling and readability

- 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
---
 .../src/components/welcome/WelcomeView.tsx    | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx
index 215a290d0da9..6a268698e9a9 100644
--- a/webview-ui/src/components/welcome/WelcomeView.tsx
+++ b/webview-ui/src/components/welcome/WelcomeView.tsx
@@ -49,21 +49,21 @@ const WelcomeView = () => {
 
 	return (
 		<Tab>
-			<TabContent className="flex flex-col gap-5 p-16">
+			<TabContent className="flex flex-col gap-4 p-6">
 				<RooHero />
-				<h2 className="mt-0 mb-0">{t("welcome:greeting")}</h2>
+				<h2 className="mt-0 mb-4 text-xl text-center">{t("welcome:greeting")}</h2>
 
-				<div className="font-bold">
-					<p>
+				<div className="text-base text-vscode-foreground py-2 px-2 mb-4">
+					<p className="mb-3 leading-relaxed">
 						<Trans i18nKey="welcome:introduction" />
 					</p>
-					<p>
+					<p className="mb-0 leading-relaxed">
 						<Trans i18nKey="welcome:chooseProvider" />
 					</p>
 				</div>
 
 				<div className="mb-4">
-					<p className="font-bold mt-0">{t("welcome:startRouter")}</p>
+					<p className="text-sm font-medium mt-4 mb-3">{t("welcome:startRouter")}</p>
 
 					<div>
 						{/* Define the providers */}
@@ -94,10 +94,10 @@ const WelcomeView = () => {
 								<a
 									key={index}
 									href={provider.authUrl}
-									className="flex-1 border border-vscode-panel-border hover:bg-secondary rounded-lg py-4 px-6 mb-2 flex flex-row gap-4 cursor-pointer transition-all no-underline text-inherit"
+									className="flex-1 border border-vscode-panel-border hover:bg-secondary rounded-md py-3 px-4 mb-2 flex flex-row gap-3 cursor-pointer transition-all no-underline text-inherit"
 									target="_blank"
 									rel="noopener noreferrer">
-									<div className="w-10 h-10">
+									<div className="w-8 h-8 flex-shrink-0">
 										<img
 											src={`${imagesBaseUri}/${provider.slug}.png`}
 											alt={provider.name}
@@ -105,13 +105,17 @@ const WelcomeView = () => {
 										/>
 									</div>
 									<div>
-										<div className="font-bold text-vscode-foreground">{provider.name}</div>
+										<div className="text-sm font-medium text-vscode-foreground">
+											{provider.name}
+										</div>
 										<div>
 											<div className="text-xs text-vscode-descriptionForeground">
 												{provider.description}
 											</div>
 											{provider.incentive && (
-												<div className="text-xs font-bold">{provider.incentive}</div>
+												<div className="text-xs text-vscode-warningForeground mt-1">
+													{provider.incentive}
+												</div>
 											)}
 										</div>
 									</div>
@@ -120,7 +124,7 @@ const WelcomeView = () => {
 						})()}
 					</div>
 
-					<p className="font-bold mt-8 mb-6">{t("welcome:startCustom")}</p>
+					<p className="text-sm font-medium mt-6 mb-3">{t("welcome:startCustom")}</p>
 					<ApiOptions
 						fromWelcomeView
 						apiConfiguration={apiConfiguration || {}}
@@ -131,8 +135,8 @@ const WelcomeView = () => {
 					/>
 				</div>
 			</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">
+				<div className="flex flex-col gap-2">
 					<div className="flex justify-end">
 						<VSCodeLink
 							href="#"

From 319b920a5d0c87687456a960b5ac79603f4a5dc8 Mon Sep 17 00:00:00 2001
From: Daniel Riccio <ricciodaniel98@gmail.com>
Date: Thu, 4 Sep 2025 18:22:02 -0500
Subject: [PATCH 2/2] fix: remove undefined color class from incentive text

Removed the text-vscode-warningForeground class as it wasn't defined in index.css. The incentive text now uses default color which looks good.
---
 webview-ui/src/components/welcome/WelcomeView.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx
index 6a268698e9a9..12ef319f92c5 100644
--- a/webview-ui/src/components/welcome/WelcomeView.tsx
+++ b/webview-ui/src/components/welcome/WelcomeView.tsx
@@ -113,9 +113,7 @@ const WelcomeView = () => {
 												{provider.description}
 											</div>
 											{provider.incentive && (
-												<div className="text-xs text-vscode-warningForeground mt-1">
-													{provider.incentive}
-												</div>
+												<div className="text-xs mt-1">{provider.incentive}</div>
 											)}
 										</div>
 									</div>