fix obvious components with color issues

web/src/lib/components/empty/empty-description.svelte

@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<div class={cn('text-black/25', className)} {...$$restProps}>
+<div class={cn('text-black/50 dark:text-white/50', className)} {...$$restProps}>
   <slot />
 </div>

web/src/lib/components/empty/empty-simple-img.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
+  import { mode } from 'mode-watcher';
   import { cn } from '$lib/utils';
 
   type $$Props = HTMLAttributes<SVGImageElement> & {
@@ -11,7 +12,12 @@
   let className: $$Props['class'] = undefined;
   export let borderColor: $$Props['borderColor'] = '#d9d9d9';
   export let shadowColor: $$Props['shadowColor'] = '#f5f5f5';
-  export let contentColor: $$Props['contentColor'] = '#fafafa';
+  export let contentColor: $$Props['contentColor'] = 'transparent';
+
+  $: $mode, (contentColor = $mode === 'dark' ? 'transparent' : 'transparent');
+  $: $mode, (shadowColor = $mode === 'dark' ? '#1e2021' : '#f5f5f5');
+  $: $mode, (borderColor = $mode === 'dark' ? '#d0ccc6' : '#d9d9d9');
+
   export { className as class };
 </script>
 

web/src/routes/Server.svelte

@@ -60,6 +60,6 @@
   </div>
 
   <a href={`/${server.id}`} title="Manage the Server" class="hidden md:block">
-    <Button variant="ghost" size="sm">Manage</Button>
+    <Button variant="outline" size="sm">Manage</Button>
   </a>
 </div>

web/src/routes/Service.svelte

@@ -45,6 +45,6 @@
   </div>
 
   <a href={`/service/${slug}`} title="Manage the Server" class="hidden md:block">
-    <Button variant="ghost" size="sm">Manage</Button>
+    <Button variant="outline" size="sm">Manage</Button>
   </a>
 </div>

web/src/routes/[serverId]/Peer.svelte

@@ -7,6 +7,7 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import { getPeerConf } from '$lib/wireguard/utils';
   import { QRCodeDialog } from '$lib/components/qrcode-dialog';
+  import { cn } from '$lib/utils';
 
   export let peer: Peer;
 
@@ -56,7 +57,10 @@
 </script>
 
 <div
-  class="flex items-center justify-between p-4 border border-neutral-200/60 rounded-md hover:border-neutral-200"
+  class={cn(
+    'flex items-center justify-between p-4 rounded-md',
+    'border border-input bg-background hover:bg-accent/30 hover:text-accent-foreground',
+  )}
 >
   <div class="flex items-center gap-x-2">
     <div
@@ -84,18 +88,18 @@
     <!-- QRCode -->
     <QRCodeDialog let:builder content={conf}>
       <PeerActionButton builders={[builder]} disabled={isLoading}>
-        <i class={'fal text-neutral-700 group-hover:text-primary fa-qrcode'} />
+        <i class={'fal fa-qrcode'} />
       </PeerActionButton>
     </QRCodeDialog>
 
     <!-- Download -->
     <PeerActionButton disabled={isLoading} on:click={handleDownload}>
-      <i class={'fal text-neutral-700 group-hover:text-primary fa-download'} />
+      <i class={'fal fa-download'} />
     </PeerActionButton>
 
     <!-- Remove -->
     <PeerActionButton loading={isLoading} on:click={handleRemove}>
-      <i class={'fal text-neutral-700 group-hover:text-primary text-lg fa-trash-can'} />
+      <i class={'fal fa-trash-can'} />
     </PeerActionButton>
   </div>
 </div>

web/src/routes/[serverId]/PeerActionButton.svelte

@@ -25,7 +25,8 @@
   {...$$restProps}
   class={cn(
     'group flex items-center justify-center w-10 aspect-square rounded-md',
-    'bg-gray-200/80 hover:bg-gray-100/50',
+    'bg-gray-200/80 hover:bg-gray-100/50 dark:bg-neutral-800/80 dark:hover:bg-neutral-800/50',
+    'text-neutral-700 dark:text-neutral-300 hover:text-primary dark:hover:text-primary',
     'border border-transparent hover:border-primary',
     'transition-colors duration-200 ease-in-out',
     'cursor-pointer',

web/src/routes/service/[serviceName]/+page.svelte

@@ -73,7 +73,7 @@
       <CardTitle>Logs</CardTitle>
     </CardHeader>
     <CardContent class="relative">
-      <textarea class="w-full h-80 p-2 bg-gray-100" readonly bind:value={logs} />
+      <textarea class="w-full h-80 p-2" readonly bind:value={logs} />
       {#if !logs}
         <div class="absolute inset-0 flex items-center justify-center">
           <i class="text-4xl animate-spin fas fa-circle-notch"></i>
@@ -81,7 +81,7 @@
       {/if}
     </CardContent>
     <CardFooter class="flex justify-end gap-2">
-      <Button on:click={restart}>Restart</Button>
+      <Button on:click={restart} variant="outline">Restart</Button>
       <Button variant="destructive" on:click={clearLogs} disabled={!logs}>Clear</Button>
     </CardFooter>
   </Card>