From f4df73d3751298c91209917a4b1740864dab4854 Mon Sep 17 00:00:00 2001
From: Ayu <hello@ayuhito.com>
Date: Tue, 5 Mar 2024 18:36:20 +0000
Subject: [PATCH] fix(dashboard): cleanup website list page

---
 .../components/settings/Settings.module.css   |  1 +
 .../app/components/settings/Settings.tsx      | 32 +++++++++++++----
 dashboard/app/routes/_index.tsx               | 34 ++++++++++++++-----
 3 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/dashboard/app/components/settings/Settings.module.css b/dashboard/app/components/settings/Settings.module.css
index c240f81a..fa281fb9 100644
--- a/dashboard/app/components/settings/Settings.module.css
+++ b/dashboard/app/components/settings/Settings.module.css
@@ -1,3 +1,4 @@
 .wrapper {
 	background-color: var(--me-color-bg-grey);
+	border-radius: 8px;
 }
diff --git a/dashboard/app/components/settings/Settings.tsx b/dashboard/app/components/settings/Settings.tsx
index 74701aee..f07a49f9 100644
--- a/dashboard/app/components/settings/Settings.tsx
+++ b/dashboard/app/components/settings/Settings.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Group, Stack } from '@mantine/core';
+import { Button, Grid, Group, Stack, Text, TextInput } from '@mantine/core';
 
 import { type components } from '@/api/types';
 
@@ -12,17 +12,37 @@ interface SettingsProps {
 export const Settings = ({ user }: SettingsProps) => {
 	return (
 		<Stack className={classes.wrapper}>
-			<h1>Settings</h1>
+			<Text fw={700} fz={32} p={24}>
+				Settings
+			</Text>
 			<Grid>
 				<Grid.Col span={4}>
 					<Sidebar />
 				</Grid.Col>
-				<Grid.Col span={8}>
+				<Grid.Col span={8} py="xl">
 					<Group>
-						<Box>Account</Box>
-						<Box>Site</Box>
-						{JSON.stringify(user)}
+						<Stack justify="flex-start" align="flex-start">
+							<Text size="xl" fw={700}>
+								Account details
+							</Text>
+							<Text size="sm">Edit your username and password.</Text>
+						</Stack>
+						<Stack>
+							<TextInput
+								label="Username"
+								placeholder="Username"
+								value={user.username}
+							/>
+							<TextInput
+								label="Password"
+								placeholder="Password"
+								type="password"
+							/>
+						</Stack>
 					</Group>
+					<Button variant="light" color="blue">
+						Save
+					</Button>
 				</Grid.Col>
 			</Grid>
 		</Stack>
diff --git a/dashboard/app/routes/_index.tsx b/dashboard/app/routes/_index.tsx
index 040f980d..0f125658 100644
--- a/dashboard/app/routes/_index.tsx
+++ b/dashboard/app/routes/_index.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@mantine/core';
+import { Divider, Paper, Text } from '@mantine/core';
 import {
 	json,
 	type LoaderFunctionArgs,
@@ -7,7 +7,7 @@ import {
 } from '@remix-run/node';
 import {
 	isRouteErrorResponse,
-	NavLink,
+	Link,
 	useLoaderData,
 	useRouteError,
 } from '@remix-run/react';
@@ -50,15 +50,23 @@ export default function Index() {
 	return (
 		<main>
 			<h1>Websites</h1>
-			{JSON.stringify(websites)}
+			<Divider mb={30} />
 			{websites.map((website) => (
-				<Button
+				<Paper
 					key={website.hostname}
-					component={NavLink}
+					withBorder
+					w={300}
+					p={8}
+					radius={8}
+					component={Link}
 					to={`/${website.hostname}`}
+					prefetch="intent"
 				>
-					{website.name}
-				</Button>
+					<Text>{website.name}</Text>
+					<Text size="xs" c="gray">
+						{website.hostname}
+					</Text>
+				</Paper>
 			))}
 		</main>
 	);
@@ -72,9 +80,17 @@ export const ErrorBoundary = () => {
 			<main>
 				<h1>404</h1>
 				<p>No websites found</p>
-				<Button component={NavLink} to="/add">
+				<Paper
+					withBorder
+					w={300}
+					p={8}
+					radius={8}
+					component={Link}
+					to="/add"
+					prefetch="intent"
+				>
 					Add Website
-				</Button>
+				</Paper>
 			</main>
 		);
 	}