From 205319567320a1f604fb735ced26a29ad9c275b2 Mon Sep 17 00:00:00 2001
From: Jess Martin <jessmartin@gmail.com>
Date: Tue, 30 Aug 2022 16:59:49 -0400
Subject: [PATCH] Dark Mode updates (#49)

* Minor dark mode changes
* Add dark mode to gallery
---
 src/components/auth/link/DelegateAccount.svelte       |  6 ++++--
 src/components/auth/link/LinkDevice.svelte            | 10 ++++------
 src/components/gallery/imageGallery/ImageModal.svelte |  8 +++++---
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/auth/link/DelegateAccount.svelte b/src/components/auth/link/DelegateAccount.svelte
index 202c7e4..9cfae08 100644
--- a/src/components/auth/link/DelegateAccount.svelte
+++ b/src/components/auth/link/DelegateAccount.svelte
@@ -123,7 +123,9 @@
     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">
           A new device would like to connect to your account
@@ -132,7 +134,7 @@
           <input
             id="pin"
             type="text"
-            class="input input-bordered w-full max-w-xs mb-2"
+            class="input input-bordered w-full max-w-xs mb-2 font-mono text-3xl text-center tracking-[0.18em] font-light"
             bind:value={pinInput}
           />
           <label for="pin" class="label">
diff --git a/src/components/auth/link/LinkDevice.svelte b/src/components/auth/link/LinkDevice.svelte
index fab91da..0c291ff 100644
--- a/src/components/auth/link/LinkDevice.svelte
+++ b/src/components/auth/link/LinkDevice.svelte
@@ -7,7 +7,7 @@
 
   let loadingFilesystem = false
 
-  let displayPin: string = ''
+  let displayPin: string = '844204'
   let url = $page.url
   const username = url.searchParams.get('username')
 
@@ -19,7 +19,7 @@
     const accountLinkingConsumer = await createAccountLinkingConsumer(username)
 
     accountLinkingConsumer.on('challenge', ({ pin }) => {
-      displayPin = pin.join(' ')
+      displayPin = pin.join('')
     })
 
     accountLinkingConsumer.on('link', async ({ approved, username }) => {
@@ -62,7 +62,7 @@
         >
           {#if displayPin}
             <span
-              class="btn btn-info btn-lg rounded-full text-2xl tracking-widest w-3/4 cursor-default"
+              class="btn bg-blue-900 btn-lg rounded-full text-3xl tracking-[.18em] font-normal w-3/4 cursor-default font-mono font-light"
             >
               {displayPin}
             </span>
@@ -78,9 +78,7 @@
           </div>
         </div>
         <div>
-          <button
-            class="btn btn-primary btn-outline text-base font-normal mt-4"
-          >
+          <button class="btn btn-primary btn-outline text-base font-normal">
             Cancel Request
           </button>
         </div>
diff --git a/src/components/gallery/imageGallery/ImageModal.svelte b/src/components/gallery/imageGallery/ImageModal.svelte
index 2d13cb0..be7a30b 100644
--- a/src/components/gallery/imageGallery/ImageModal.svelte
+++ b/src/components/gallery/imageGallery/ImageModal.svelte
@@ -101,10 +101,12 @@
     class="modal cursor-pointer z-50"
     on:click|self={handleCloseModal}
   >
-    <div class="modal-box relative text-center text-base-content">
+    <div
+      class="modal-box relative text-center text-base-content border dark:border-slate-600"
+    >
       <label
         for={`image-modal-${image.cid}`}
-        class="btn btn-xs btn-circle absolute right-2 top-2"
+        class="btn btn-xs btn-circle absolute right-2 top-2 dark:bg-slate-600"
         on:click={handleCloseModal}
       >
         ✕
@@ -139,7 +141,7 @@
           <a
             href={`https://ipfs.runfission.net/ipfs/${image.cid}/userland`}
             target="_blank"
-            class="underline mb-4"
+            class="underline mb-4 hover:text-slate-500"
           >
             View on IPFS
           </a>