From 55ea32842b6ade6c4d6b72ac675895a751a32948 Mon Sep 17 00:00:00 2001
From: Daniel <57051444+daniel-lxs@users.noreply.github.com>
Date: Fri, 5 Sep 2025 06:55:15 -0500
Subject: [PATCH] Fix: Improve WelcomeView styling and readability (#7682)

* 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

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

diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx
index 215a290d0d..12ef319f92 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,15 @@ 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 mt-1">{provider.incentive}</div>
 											)}
 										</div>
 									</div>
@@ -120,7 +122,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 +133,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="#"