dahjah/headplane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: support dark mode

Browse Source
This commit is contained in:
Aarnav Tale 2024-03-18 01:41:28 -04:00
parent fdc3cdde39
commit 2ff7736243
No known key found for this signature in database
GPG Key ID: 1CA889B6ACCAF2F2
4 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/app.html
View File

@ -1,12 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="dark:bg-zinc-950 dark:text-white">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

12
src/lib/components/Attribute.svelte
View File

@ -8,12 +8,14 @@
</script>
<dl class="flex gap-1 text-sm">
<dt class="w-1/3 sm:w-1/4 lg:w-1/3 shrink-0 min-w-0 truncate text-gray-700">
<dt
class="w-1/4 shrink-0 min-w-0 truncate text-gray-700 dark:text-gray-300"
>
{key}
</dt>
{#if copyable}
<button
class="focus:outline-none flex items-center gap-x-1 truncate hover:bg-gray-100 rounded-md"
class="focus:outline-none flex items-center gap-x-1 truncate hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md"
on:click={() => {
navigator.clipboard.writeText(value);
toast.push("Copied " + key);
@ -22,7 +24,11 @@
<dd class="min-w-0 truncate px-2 py-1">
{value}
</dd>
<IconCopy stroke={1} size={24} class="text-gray-600 pr-2" />
<IconCopy
stroke={1}
size={24}
class="text-gray-600 dark:text-gray-200 pr-2"
/>
</button>
{:else}
<dd class="min-w-0 truncate px-2 py-1">

21
src/routes/machines/+page.svelte
View File

@ -32,23 +32,26 @@
<th>Last Seen</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-700">
{#each $query.data as machine}
<tr class="hover:bg-gray-100">
<tr class="hover:bg-zinc-100 dark:hover:bg-zinc-800">
<td class="pt-2 pb-4 pl-4">
<a href={`machines/${machine.id}`}>
<h1>{machine.givenName}</h1>
<span class="text-sm font-mono text-gray-500"
<span
class="text-sm font-mono text-gray-500 dark:text-gray-400"
>{machine.name}</span
>
</a>
</td>
<td class="pt-2 pb-4 font-mono text-gray-600">
<td
class="pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300"
>
{#each machine.ipAddresses as ip, i}
<span
class={clsx(
"flex items-center gap-x-1",
i > 0 && "text-sm text-gray-400",
i > 0 && "text-sm text-gray-500",
)}
>
{ip}
@ -62,7 +65,7 @@
<IconCopy
stroke={1}
size={16}
class="text-gray-400"
class="text-gray-400 dark:text-gray-500"
/>
</button>
</span>
@ -70,7 +73,7 @@
</td>
<td>
<span
class="flex items-center gap-x-1 text-sm text-gray-500"
class="flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400"
>
<IconCircleFilled
stroke={1}
@ -78,8 +81,8 @@
class={clsx(
"w-4 h-4",
machine.online
? "text-green-700"
: "text-gray-300",
? "text-green-700 dark:text-green-400"
: "text-gray-300 dark:text-gray-500",
)}
/>
<p>

6
src/routes/machines/[id]/+page.svelte
View File

@ -3,7 +3,7 @@
import { createQuery } from "@tanstack/svelte-query";
import { pull } from "$lib/api";
import type { Machine } from "$lib/types";
import { IconCircleFilled, IconCopy } from "@tabler/icons-svelte";
import { IconCircleFilled } from "@tabler/icons-svelte";
import Attribute from "$lib/components/Attribute.svelte";
import clsx from "clsx";
@ -44,9 +44,7 @@
)}
/>
</span>
<div
class="p-4 md:p-6 border rounded-md grid grid-cols-1 lg:grid-cols-2 gap-y-2 sm:gap-x-12"
>
<div class="p-4 md:p-6 border dark:border-zinc-700 rounded-lg">
<Attribute key="Creator" value={$query.data.user.name} />
<Attribute key="Node ID" value={$query.data.id} />
<Attribute key="Node Name" value={$query.data.givenName} />