gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-08-24 19:46:29 +00:00
Code Issues Packages Projects Releases 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
4 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+12 -9
View File
@@ -1,12 +1,15 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
%sveltekit.head% <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> %sveltekit.head%
<body data-sveltekit-preload-data="hover"> </head>
<div style="display: contents">%sveltekit.body%</div>
</body> <body data-sveltekit-preload-data="hover" class="dark:bg-zinc-950 dark:text-white">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html> </html>
src/lib/components/Attribute.svelte
+9 -3
View File
@@ -8,12 +8,14 @@
</script> </script>
<dl class="flex gap-1 text-sm"> <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} {key}
</dt> </dt>
{#if copyable} {#if copyable}
<button <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={() => { on:click={() => {
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
toast.push("Copied " + key); toast.push("Copied " + key);
@@ -22,7 +24,11 @@
<dd class="min-w-0 truncate px-2 py-1"> <dd class="min-w-0 truncate px-2 py-1">
{value} {value}
</dd> </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> </button>
{:else} {:else}
<dd class="min-w-0 truncate px-2 py-1"> <dd class="min-w-0 truncate px-2 py-1">
src/routes/machines/+page.svelte
+12 -9
View File
@@ -32,23 +32,26 @@
<th>Last Seen</th> <th>Last Seen</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-zinc-200 dark:divide-zinc-700">
{#each $query.data as machine} {#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"> <td class="pt-2 pb-4 pl-4">
<a href={`machines/${machine.id}`}> <a href={`machines/${machine.id}`}>
<h1>{machine.givenName}</h1> <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 >{machine.name}</span
> >
</a> </a>
</td> </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} {#each machine.ipAddresses as ip, i}
<span <span
class={clsx( class={clsx(
"flex items-center gap-x-1", "flex items-center gap-x-1",
i > 0 && "text-sm text-gray-400", i > 0 && "text-sm text-gray-500",
)} )}
> >
{ip} {ip}
@@ -62,7 +65,7 @@
<IconCopy <IconCopy
stroke={1} stroke={1}
size={16} size={16}
class="text-gray-400" class="text-gray-400 dark:text-gray-500"
/> />
</button> </button>
</span> </span>
@@ -70,7 +73,7 @@
</td> </td>
<td> <td>
<span <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 <IconCircleFilled
stroke={1} stroke={1}
@@ -78,8 +81,8 @@
class={clsx( class={clsx(
"w-4 h-4", "w-4 h-4",
machine.online machine.online
? "text-green-700" ? "text-green-700 dark:text-green-400"
: "text-gray-300", : "text-gray-300 dark:text-gray-500",
)} )}
/> />
<p> <p>
src/routes/machines/[id]/+page.svelte
+2 -4
View File
@@ -3,7 +3,7 @@
import { createQuery } from "@tanstack/svelte-query"; import { createQuery } from "@tanstack/svelte-query";
import { pull } from "$lib/api"; import { pull } from "$lib/api";
import type { Machine } from "$lib/types"; 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 Attribute from "$lib/components/Attribute.svelte";
import clsx from "clsx"; import clsx from "clsx";
@@ -44,9 +44,7 @@
)} )}
/> />
</span> </span>
<div <div class="p-4 md:p-6 border dark:border-zinc-700 rounded-lg">
class="p-4 md:p-6 border rounded-md grid grid-cols-1 lg:grid-cols-2 gap-y-2 sm:gap-x-12"
>
<Attribute key="Creator" value={$query.data.user.name} /> <Attribute key="Creator" value={$query.data.user.name} />
<Attribute key="Node ID" value={$query.data.id} /> <Attribute key="Node ID" value={$query.data.id} />
<Attribute key="Node Name" value={$query.data.givenName} /> <Attribute key="Node Name" value={$query.data.givenName} />