From 570f47670bf9f361eeb073b9124be56465498c83 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Wed, 13 Mar 2024 00:10:44 +0000
Subject: feat: style project list

---
 src/pages/ProjectsList.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

(limited to 'src/pages/ProjectsList.tsx')

diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx
index b30c73e..820c457 100644
--- a/src/pages/ProjectsList.tsx
+++ b/src/pages/ProjectsList.tsx
@@ -30,18 +30,20 @@ export const ProjectsList = ({ user }) => {
 		);
 	}
 	return (
-		<main>
-			<h1>{user}</h1>
+		<main class="container">
+			<h1>{user}'s Projects</h1>
 			<form onSubmit={onCreateProject}>
-				<label>
-					Name:
-					<input type="text" value={projectName} onInput={e => projectName.value = e.target.value} />
-				</label>
-				<button>Create roject</button>
+				<fieldset class="group">
+					<label>
+						Name
+						<input type="text" placeholder="Project name" value={projectName} onInput={e => projectName.value = e.target.value} />
+					</label>
+					<input type="submit" value="Create project" />
+				</fieldset>
 			</form>
-			<ul>
+			<ul class="contained">
 				{projects.value.items.map(p => (
-					<li><a href={`/${user}/${p.name}`}>{p.name}</a></li>
+					<li><a class="action" href={`/${user}/${p.name}`}>{p.name}</a></li>
 				))}
 			</ul>
 		</main>
-- 
cgit v1.2.3

