Implement DB interface for Piece CRUD

packages/frontend/src/routes/Home.css.ts

@@ -1,10 +1,14 @@
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
-	width: 800,
+	width: 1000,
 	maxWidth: "100%",
 
 	margin: "0 auto",
+
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "stretch",
 });
 
 export const loading = style({
@@ -13,6 +17,70 @@ export const loading = style({
 	textAlign: "center",
 });
 
-export const content = style({
+export const header = style({
 	padding: 8,
+
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "baseline",
+});
+
+export const logout = style({
+	padding: 8,
+
+	backgroundColor: "#C0C0C0",
+
+	borderWidth: 2,
+	borderStyle: "solid",
+	borderTopColor: "#E0E0E0",
+	borderLeftColor: "#E0E0E0",
+	borderRightColor: "#404040",
+	borderBottomColor: "#404040",
+
+	borderRadius: 4,
+
+	cursor: "pointer",
+
+	"selectors": {
+		"&:focus": {
+			outlineWidth: 2,
+			outlineStyle: "solid",
+			outlineColor: "#8080FF",
+
+			"@media": {
+				"(prefers-color-scheme: dark)": {
+					outlineColor: "#C0C0FF",
+				},
+			},
+		},
+
+		"&:active": {
+			borderTopColor: "#404040",
+			borderLeftColor: "#404040",
+			borderRightColor: "#E0E0E0",
+			borderBottomColor: "#E0E0E0",
+
+			"@media": {
+				"(prefers-color-scheme: dark)": {
+					outlineColor: "#C0C0FF",
+
+					borderTopColor: "#202020",
+					borderLeftColor: "#202020",
+					borderRightColor: "#606060",
+					borderBottomColor: "#606060",
+				},
+			},
+		},
+	},
+
+	"@media": {
+		"(prefers-color-scheme: dark)": {
+			backgroundColor: "#404040",
+
+			borderTopColor: "#606060",
+			borderLeftColor: "#606060",
+			borderRightColor: "#202020",
+			borderBottomColor: "#202020",
+		},
+	},
 });

packages/frontend/src/routes/Home.tsx

@@ -71,9 +71,9 @@ export const Home = () => {
 
 	return (
 		<div class={style.container}>
-			<div class={style.content}>
-				Użytkownik: {user.username}
-				<button type="button" onClick={onLogoutClick}>Wyloguj się</button>
+			<div class={style.header}>
+				<div>Użytkownik: {user.username}</div>
+				<div><button class={style.logout} type="button" onClick={onLogoutClick}>Wyloguj się</button></div>
 			</div>
 		</div>
 	);