Fix Welcome screen spacing

This commit is contained in:
Saoud Rizwan
2024-07-19 01:55:53 -04:00
parent a5898d8903
commit 81a7dc7acc
2 changed files with 10 additions and 9 deletions

5
package-lock.json generated
View File

@@ -1,12 +1,13 @@
{ {
"name": "claude-dev", "name": "claude-dev",
"version": "0.0.1", "version": "0.0.6",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "claude-dev", "name": "claude-dev",
"version": "0.0.1", "version": "0.0.6",
"license": "MIT",
"dependencies": { "dependencies": {
"@anthropic-ai/sdk": "^0.24.3", "@anthropic-ai/sdk": "^0.24.3",
"@vscode/codicons": "^0.0.36", "@vscode/codicons": "^0.0.36",

View File

@@ -35,8 +35,8 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiKey, setApiKey }) => {
}, []) }, [])
return ( return (
<div style={{ maxWidth: "600px", margin: "0 auto", padding: "20px" }}> <div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, padding: "0 15px" }}>
<h1 style={{ color: "var(--vscode-foreground)" }}>Hi, I'm Claude Dev</h1> <h2>Hi, I'm Claude Dev</h2>
<p> <p>
I can do all kinds of tasks thanks to the latest breakthroughs in Claude Sonnet 3.5's agentic coding 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 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). of course).
</p> </p>
<h3>To get started, this extension needs an Anthropic API key:</h3> <b>To get started, this extension needs an Anthropic API key:</b>
<ol> <ol style={{ paddingLeft: "15px" }}>
<li> <li>
Go to{" "} Go to{" "}
<VSCodeLink href="https://console.anthropic.com/" style={{ display: "inline" }}> <VSCodeLink href="https://console.anthropic.com/" style={{ display: "inline" }}>
@@ -53,7 +53,7 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiKey, setApiKey }) => {
</VSCodeLink> </VSCodeLink>
</li> </li>
<li>You may need to buy some credits (although Anthropic is offering $5 free credit for new users)</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> </ol>
<VSCodeDivider /> <VSCodeDivider />
@@ -61,12 +61,12 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiKey, setApiKey }) => {
<div style={{ marginTop: "20px", display: "flex", alignItems: "center" }}> <div style={{ marginTop: "20px", display: "flex", alignItems: "center" }}>
<VSCodeTextField <VSCodeTextField
style={{ flexGrow: 1, marginRight: "10px" }} style={{ flexGrow: 1, marginRight: "10px" }}
placeholder="Enter your Anthropic API Key" placeholder="Enter API Key..."
value={apiKey} value={apiKey}
onInput={handleApiKeyChange} onInput={handleApiKeyChange}
/> />
<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton}> <VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton}>
Let's go! Submit
</VSCodeButton> </VSCodeButton>
</div> </div>