Dark Mode changes (#38)

src/components/auth/backup/AreYouSure.svelte

@@ -26,7 +26,9 @@
 
 <input type="checkbox" id="are-you-sure-modal" checked class="modal-toggle" />
 <div class="modal">
-  <div class="modal-box w-80 relative text-center">
+  <div
+    class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+  >
     <div>
       <h3 class="mb-7 text-xl font-serif">Are you sure?</h3>
 

src/components/auth/backup/Backup.svelte

@@ -14,7 +14,9 @@
 
 <input type="checkbox" id="backup-modal" checked class="modal-toggle" />
 <div class="modal">
-  <div class="modal-box w-80 relative text-center">
+  <div
+    class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+  >
     <div id="backup-message" class="peer-checked:hidden">
       <h3 class="mb-7 text-xl font-serif">Backup your account</h3>
       <p class="mt-8 mb-4">

src/components/auth/connect/Connect.svelte

@@ -4,8 +4,15 @@
 
 <input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
 <div class="modal">
-  <div class="modal-box w-80 relative text-center">
-    <a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
+  <div
+    class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+  >
+    <a
+      href="/"
+      class="btn btn-xs btn-circle absolute right-2 top-2 dark:bg-slate-600"
+    >
+      ✕
+    </a>
 
     <div>
       <h3 class="mb-7 text-xl font-serif">Connect to {appName}</h3>

src/components/auth/link/DelegateAccount.svelte

@@ -93,11 +93,13 @@
     class="modal-toggle"
   />
   <div class="modal">
-    <div class="modal-box w-80 relative text-center">
+    <div
+      class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+    >
       <div>
         <h3 class="pb-1 text-xl font-serif">Connect a backup device</h3>
         {@html qrcode}
-        <p class="font-extralight pt-1 mb-8">
+        <p class="pt-1 mb-8">
           Scan this code on the new device, or share the connection link.
         </p>
         <button class="btn btn-primary btn-outline" on:click={copyLink}>

src/components/auth/link/LinkDevice.svelte

@@ -35,25 +35,25 @@
 
 <input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
 <div class="modal">
-  <div class="modal-box w-80 relative text-center">
+  <div
+    class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+  >
     <div class="grid grid-flow-row auto-rows-max gap-7">
       <h3 class="text-xl font-serif">Connection Requested</h3>
       <div class="grid grid-flow-row auto-rows-max gap-4 justify-items-center">
         {#if displayPin}
           <span
-            class="btn btn-info btn-lg rounded-full text-2xl font-extralight tracking-widest w-3/4 cursor-default"
+            class="btn btn-info btn-lg rounded-full text-2xl tracking-widest w-3/4 cursor-default"
           >
             {displayPin}
           </span>
         {/if}
-        <span class="text-md">
-          Open {appName} on your already connected device and enter this code.
-        </span>
+        <span class="text-md">Enter this code on your connected device.</span>
         <div
           class="grid grid-flow-col auto-cols-max gap-4 justify-center items-center text-slate-500"
         >
           <span
-            class="rounded-lg border-t-2 border-l-2 border-slate-600 w-4 h-4 block animate-spin"
+            class="rounded-lg border-t-2 border-l-2 border-slate-600 dark:border-slate-50 w-4 h-4 block animate-spin"
           />
           Waiting for a response...
         </div>

src/components/auth/register/Register.svelte

@@ -40,11 +40,11 @@
   <input type="checkbox" id="initializing" checked class="modal-toggle" />
   <div class="modal">
     <div
-      class="modal-box rounded-lg shadow-sm bg-slate-100 w-80 relative text-center"
+      class="modal-box rounded-lg shadow-sm bg-slate-100 w-80 relative text-center dark:bg-slate-900 dark:border-slate-600 dark:border "
     >
-      <p class="text-slate-500">
+      <p class="text-slate-500 dark:text-slate-50">
         <span
-          class="rounded-lg border-t-2 border-l-2 border-slate-500 w-4 h-4 inline-block animate-spin mr-1"
+          class="rounded-lg border-t-2 border-l-2 border-slate-500 dark:border-slate-50 w-4 h-4 inline-block animate-spin mr-1"
         />
         Initializing file system...
       </p>
@@ -53,8 +53,15 @@
 {:else}
   <input type="checkbox" id="register-modal" checked class="modal-toggle" />
   <div class="modal">
-    <div class="modal-box w-80 relative text-center">
-      <a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
+    <div
+      class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+    >
+      <a
+        href="/"
+        class="btn btn-xs btn-circle absolute right-2 top-2 dark:bg-slate-600"
+      >
+        ✕
+      </a>
 
       <div>
         <h3 class="mb-7 text-xl font-serif">Choose a username</h3>
@@ -63,14 +70,14 @@
             id="registration"
             type="text"
             placeholder="Type here"
-            class="input input-bordered w-full block"
+            class="input input-bordered w-full block dark:border-slate-300"
             class:input-error={username.length !== 0 &&
               (!usernameValid || !usernameAvailable)}
             on:input={checkUsername}
           />
           {#if checkingUsername}
             <span
-              class="rounded-lg border-t-2 border-l-2 border-slate-600 w-4 h-4 block absolute top-4 right-4 animate-spin"
+              class="rounded-lg border-t-2 border-l-2 border-slate-600 dark:border-slate-50 w-4 h-4 block absolute top-4 right-4 animate-spin"
             />
           {/if}
           {#if !(username.length === 0) && usernameAvailable && usernameValid && !checkingUsername}
@@ -117,7 +124,7 @@
           <input
             type="checkbox"
             id="shared-computer"
-            class="peer checkbox checkbox-primary inline-grid align-bottom"
+            class="peer checkbox checkbox-primary inline-grid align-bottom dark:border-slate-300"
           />
           <!-- Warning when "This is a shared computer" is checked -->
           <label
@@ -140,7 +147,7 @@
         <div class="mt-5">
           <a class="btn btn-primary btn-outline" href="/connect">Back</a>
           <button
-            class="btn btn-primary"
+            class="ml-2 btn btn-primary"
             disabled={username.length === 0 ||
               !usernameValid ||
               !usernameAvailable}

src/components/auth/register/Welcome.svelte

@@ -6,7 +6,9 @@
 
 <input type="checkbox" id="link-device-modal" checked class="modal-toggle" />
 <div class="modal">
-  <div class="modal-box w-80 relative text-center">
+  <div
+    class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+  >
     <div>
       <h3 class="mb-7 text-xl font-serif">
         Welcome, {$sessionStore.username}!