Style login and signup pages

9 files changed, 202 insertions, 33 deletions

diff --git a/src/NodeEditor.module.css b/src/NodeEditor.module.css
index caa549e..10cedc3 100644
--- a/src/NodeEditor.module.css
+++ b/src/NodeEditor.module.css
@@ -1,3 +1,14 @@
+:global(:root) {
+	--base: #122236;
+	--surface: #242424;
+	--overlay: #484848;
+	--primary: #1c4c87;
+
+	--data-any: #36c965;
+	--data-float: #a0a0a0;
+	--data-vector: #5e29d9;
+}
+
 .link {
 	fill: none;
 	stroke: var(--data-float);
diff --git a/src/icons/arrow-right.svg b/src/icons/arrow-right.svg
new file mode 100644
index 0000000..4c6dc1f
--- /dev/null
+++ b/src/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="2.0" width="20" height="20" viewBox="0 0 20 20">
+	<path fill="none" stroke="white" stroke-width="2" stroke-linecap="square" d="M 0 10 h 17.5 m -6 -7 l 7 7 l -7 7" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/down-arrow.svg b/src/icons/chevron-down.svg
index eefe5ef..eefe5ef 100644
--- a/src/assets/down-arrow.svg
+++ b/src/icons/chevron-down.svg
diff --git a/src/assets/right-arrow.svg b/src/icons/chevron-right.svg
index 7ac9997..7ac9997 100644
--- a/src/assets/right-arrow.svg
+++ b/src/icons/chevron-right.svg
diff --git a/src/index.css b/src/index.css
index aac86b5..19f1e8b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,15 @@
-/*@font-face {
+@font-face {
 	font-family: 'Inter';
 	src: url('Inter.ttf');
-}*/
+}
 
 :root {
-	--base: #121212;
-	--surface: #242424;
-	--overlay: #484848;
+	--base: hsl(0, 0%, 10%);
+	--surface: hsl(0, 0%, 15%);
+	--overlay: hsl(0, 0%, 20%);
+	--primary: hsl(220, 100%, 50%);
 	--text: #ffffff;
-	--primary: #1c4c87;
-
-	--data-any: #36c965;
-	--data-float: #a0a0a0;
-	--data-vector: #5e29d9;
+	--subtext: #dddddd;
 
 	font-family: 'Inter', Helvetica, sans-serif;
 	box-sizing: border-box;
@@ -22,7 +19,148 @@ body {
 	background-color: var(--base);
 	color: var(--text);
 	margin: 0;
-	width: 100vw;
-	height: 100vh;
-	overflow: hidden;
+}
+
+main {
+	margin: 2rem;
+}
+
+header {
+	height: 3rem;
+	border-bottom: 1px solid var(--overlay);
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+
+	> .title {
+		padding-left: 1rem;
+		font-size: 1rem;
+		font-weight: 500;
+		text-decoration: none;
+		color: var(--text);
+	}
+
+	nav {
+		height: 100%;
+		display: flex;
+		flex-direction: row;
+	}
+
+	.action {
+		color: var(--text);
+		text-decoration: none;
+		padding: 0 1rem;
+		height: 100%;
+		display: flex;
+		align-items: center;
+
+		&:hover {
+			background-color: var(--surface);
+		}
+
+		&:focus {
+			outline: 2px solid var(--primary);
+		}
+	}
+}
+
+h1 {
+	margin: 0;
+	padding: 0;
+}
+
+h1, h2 {
+	font-weight: 500;
+}
+
+.container {
+	width: 50%;
+	margin: 1rem auto;
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 2rem;
+	grid-auto-rows: minmax(100px, auto);
+}
+
+.row {
+	display: flex;
+	flex-direction: row;
+}
+
+hr {
+	border: 1px solid var(--overlay);
+	width: 100%;
+}
+
+p {
+	margin: 0;
+}
+
+a {
+	color: color-mix(in srgb, var(--text) 40%, var(--primary));
+}
+
+article {
+	background-color: var(--surface);
+	border-radius: 1rem;
+	padding: 1rem;
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	max-width: 26rem;
+}
+
+label {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	color: var(--subtext);
+}
+
+input {
+	background-color: var(--surface);
+	color: var(--text);
+	height: 2.5rem;
+	padding: 0 0.5rem;
+	border: none;
+	border-bottom: 2px solid color-mix(in srgb, white 20%, var(--surface));
+	font-size: 1rem;
+
+	&:focus {
+		outline: 2px solid var(--primary);
+		border-bottom: none;
+		margin-bottom: 2px;
+	}
+}
+
+button, input[type="submit"] {
+	background-color: var(--primary);
+	color: var(--text);
+	width: 100%;
+	height: 3rem;
+	font-size: 1rem;
+	border: 1px solid var(--primary);
+	cursor: pointer;
+
+	&:focus {
+		border-color: var(--base);
+		outline: 2px solid var(--primary);
+	}
+}
+
+input[type="submit"] {
+	margin-top: 1rem;
+	padding: 0 1rem;
+	text-align: left;
+	align-self: flex-end;
+	background-image: url('icons/arrow-right.svg');
+	background-position: right 1rem center;
+	background-repeat: no-repeat;
 }
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 610fb70..b49ee66 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
 import { render } from 'preact';
-import { useMemo } from 'preact/hooks';
+import { useEffect, useMemo } from 'preact/hooks';
 import { Router } from 'preact-router';
 import PocketBase from 'pocketbase';
 import { Pb } from './pb.ts';
@@ -11,6 +11,13 @@ export const App = () => {
 	const pb = useMemo(() => new PocketBase(`https://${window.location.hostname}:8080/`));
 	return (
 		<Pb.Provider value={pb}>
+			<header>
+				<a class="title action" href="/">DataNodes</a>
+				<nav>
+					<a class="action" href="/login">Log In</a>
+					<a class="action" href="/signup">Sign Up</a>
+				</nav>
+			</header>
 			<Router>
 				<Home path="/" />
 				<SignUp path="/signup" />
diff --git a/src/node.module.css b/src/node.module.css
index 76ef2df..2a65c56 100644
--- a/src/node.module.css
+++ b/src/node.module.css
@@ -46,10 +46,10 @@
 		padding-left: 6px;
 		margin-bottom: 4px;
 		border-radius: 6px 6px 0 0;
-		list-style-image: url('assets/down-arrow.svg');
+		list-style-image: url('icons/chevron-down.svg');
 	}
 	&:not([open]) summary {
-		list-style-image: url('assets/right-arrow.svg');
+		list-style-image: url('icons/chevron-right.svg');
 	}
 
 	ul {
diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx
index c787dce..55b2109 100644
--- a/src/pages/LogIn.tsx
+++ b/src/pages/LogIn.tsx
@@ -18,16 +18,23 @@ export const LogIn = () => {
 	};
 
 	return (
+		<main>
 		<form onSubmit={onSubmit}>
+			<h1>Log In</h1>
+			<p>
+				Don't have an account? <a href="/signup">Sign up</a>
+			</p>
+			<hr />
 			<label>
-				Email:
-				<input type="text" value={email} onInput={e => email.value = e.target.value} />
+				Email
+				<input type="text" placeholder="Email" value={email} onInput={e => email.value = e.target.value} />
 			</label>
 			<label>
-				Password:
-				<input type="password" value={password} onInput={e => password.value = e.target.value} />
+				Password
+				<input type="password" placeholder="Password" value={password} onInput={e => password.value = e.target.value} />
 			</label>
-			<button>Log In</button>
+			<input type="submit" value="Continue" />
 		</form>
+		</main>
 	);
 };
\ No newline at end of file
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 99cc7d6..b707b7d 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -26,28 +26,31 @@ export const SignUp = () => {
 	};
 
 	return (
-		<main class="container">
-			<article>
+		<main>
 				<form onSubmit={onSubmit}>
+					<h1>Sign Up</h1>
+					<p>
+						Already have an account? <a href="/login">Log in</a>
+					</p>
+					<hr />
 					<label>
-						Username:
-						<input type="text" value={username} onInput={e => username.value = e.target.value} />
+						Username
+						<input type="text" placeholder="Username" value={username} onInput={e => username.value = e.target.value} />
 					</label>
 					<label>
-						Email:
-						<input type="text" value={email} onInput={e => email.value = e.target.value} />
+						Email
+						<input type="text" placeholder="Email" value={email} onInput={e => email.value = e.target.value} />
 					</label>
 					<label>
-						Password:
-						<input type="password" value={password} onInput={e => password.value = e.target.value} />
+						Password
+						<input type="password" placeholder="Password" value={password} onInput={e => password.value = e.target.value} />
 					</label>
 					<label>
-						Confirm Password:
-						<input type="password" value={confirm} onInput={e => confirm.value = e.target.value} />
+						Confirm password
+						<input type="password" placeholder="Confirm password" value={confirm} onInput={e => confirm.value = e.target.value} />
 					</label>
-					<button>Sign Up</button>
+					<input type="submit" value="Continue" />
 				</form>
-			</article>
 		</main>
 	);
 };
\ No newline at end of file