From 81a7dc7acc2e145db04e71d029505d1f6c2238e9 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Fri, 19 Jul 2024 01:55:53 -0400
Subject: [PATCH] Fix Welcome screen spacing

---
 package-lock.json                         |  5 +++--
 webview-ui/src/components/WelcomeView.tsx | 14 +++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3826cf2..47e5b08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,13 @@
 {
   "name": "claude-dev",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "claude-dev",
-      "version": "0.0.1",
+      "version": "0.0.6",
+      "license": "MIT",
       "dependencies": {
         "@anthropic-ai/sdk": "^0.24.3",
         "@vscode/codicons": "^0.0.36",
diff --git a/webview-ui/src/components/WelcomeView.tsx b/webview-ui/src/components/WelcomeView.tsx
index d98d625..f8659d7 100644
--- a/webview-ui/src/components/WelcomeView.tsx
+++ b/webview-ui/src/components/WelcomeView.tsx
@@ -35,8 +35,8 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiKey, setApiKey }) => {
 	}, [])
 
 	return (
-		<div style={{ maxWidth: "600px", margin: "0 auto", padding: "20px" }}>
-			<h1 style={{ color: "var(--vscode-foreground)" }}>Hi, I'm Claude Dev</h1>
+		<div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, padding: "0 15px" }}>
+			<h2>Hi, I'm Claude Dev</h2>
 			<p>
 				I can do all kinds of tasks thanks to the latest breakthroughs in Claude Sonnet 3.5's agentic coding
 				capabilities. I am prompted to think through tasks step-by-step and have access to tools that let me get
@@ -44,8 +44,8 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiKey, setApiKey }) => {
 				of course).
 			</p>
 
-			<h3>To get started, this extension needs an Anthropic API key:</h3>
-			<ol>
+			<b>To get started, this extension needs an Anthropic API key:</b>
+			<ol style={{ paddingLeft: "15px" }}>
 				<li>
 					Go to{" "}
 					<VSCodeLink href="https://console.anthropic.com/" style={{ display: "inline" }}>
@@ -53,7 +53,7 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiKey, setApiKey }) => {
 					</VSCodeLink>
 				</li>
 				<li>You may need to buy some credits (although Anthropic is offering $5 free credit for new users)</li>
-				<li>Click 'Get API Keys' and create a new key for me (you can delete it any time)</li>
+				<li>Click 'Get API Keys' and create a new key (you can delete it any time)</li>
 			</ol>
 
 			<VSCodeDivider />
@@ -61,12 +61,12 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiKey, setApiKey }) => {
 			<div style={{ marginTop: "20px", display: "flex", alignItems: "center" }}>
 				<VSCodeTextField
 					style={{ flexGrow: 1, marginRight: "10px" }}
-					placeholder="Enter your Anthropic API Key"
+					placeholder="Enter API Key..."
 					value={apiKey}
 					onInput={handleApiKeyChange}
 				/>
 				<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton}>
-					Let's go!
+					Submit
 				</VSCodeButton>
 			</div>