From e80c351ee66f8979bb8e46aabe35e8165eb00629 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Tue, 8 Oct 2024 21:50:41 +0200
Subject: [PATCH] Update client for dark theme compatibility (#175)

---
 .../Attachments/AttachmentUploader.razor      | 47 ++++++++----------
 .../Main/Components/Email/RecentEmails.razor  |  2 +-
 .../Widgets/CreateNewIdentityWidget.razor     |  4 +-
 .../Main/Pages/Credentials/Delete.razor       |  4 +-
 .../Main/Pages/Emails/Home.razor              | 18 +++----
 .../Main/Pages/Settings/Vault.razor           |  4 +-
 .../wwwroot/css/tailwind.css                  | 48 +++++++++++++++----
 .../Headings/Breadcrumb.razor                 |  8 ++--
 8 files changed, 79 insertions(+), 56 deletions(-)

diff --git a/src/AliasVault.Client/Main/Components/Attachments/AttachmentUploader.razor b/src/AliasVault.Client/Main/Components/Attachments/AttachmentUploader.razor
index 7e7be8124..2fa24f1a1 100644
--- a/src/AliasVault.Client/Main/Components/Attachments/AttachmentUploader.razor
+++ b/src/AliasVault.Client/Main/Components/Attachments/AttachmentUploader.razor
@@ -1,35 +1,28 @@
 @using System.IO
 
-<div class="col">
-    <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
-        <h3 class="mb-4 text-xl font-semibold dark:text-white">Attachments</h3>
-        <div class="grid gap-6">
-            <div class="col-span-6 sm:col-span-3">
-                <InputFile OnChange="@HandleFileSelection" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />
-                @if (!string.IsNullOrEmpty(StatusMessage))
+<div class="col-span-6 sm:col-span-3">
+    <InputFile OnChange="@HandleFileSelection" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />
+    @if (!string.IsNullOrEmpty(StatusMessage))
+    {
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">@StatusMessage</p>
+    }
+    @if (Attachments.Any())
+    {
+        <div class="mt-4">
+            <h4 class="mb-2 text-lg font-semibold dark:text-white">Attachments:</h4>
+            <ul class="list-disc list-inside">
+                @foreach (var attachment in Attachments)
                 {
-                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">@StatusMessage</p>
+                    <li class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
+                        <span>@attachment.Filename</span>
+                        <button type="button" @onclick="() => DeleteAttachment(attachment)" class="text-red-500 hover:text-red-700">
+                            Delete
+                        </button>
+                    </li>
                 }
-                @if (Attachments.Any())
-                {
-                    <div class="mt-4">
-                        <h4 class="mb-2 text-lg font-semibold dark:text-white">Attachments:</h4>
-                        <ul class="list-disc list-inside">
-                            @foreach (var attachment in Attachments)
-                            {
-                                <li class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
-                                    <span>@attachment.Filename</span>
-                                    <button type="button" @onclick="() => DeleteAttachment(attachment)" class="text-red-500 hover:text-red-700">
-                                        Delete
-                                    </button>
-                                </li>
-                            }
-                        </ul>
-                    </div>
-                }
-            </div>
+            </ul>
         </div>
-    </div>
+    }
 </div>
 
 @code {
diff --git a/src/AliasVault.Client/Main/Components/Email/RecentEmails.razor b/src/AliasVault.Client/Main/Components/Email/RecentEmails.razor
index b6fb427a4..c37362792 100644
--- a/src/AliasVault.Client/Main/Components/Email/RecentEmails.razor
+++ b/src/AliasVault.Client/Main/Components/Email/RecentEmails.razor
@@ -46,7 +46,7 @@
         }
         else if (MailboxEmails.Count == 0)
         {
-            <div>No emails found.</div>
+            <div class="text-gray-900 dark:text-white">No emails found.</div>
         }
         else
         {
diff --git a/src/AliasVault.Client/Main/Components/Widgets/CreateNewIdentityWidget.razor b/src/AliasVault.Client/Main/Components/Widgets/CreateNewIdentityWidget.razor
index 0eaa59288..923539c22 100644
--- a/src/AliasVault.Client/Main/Components/Widgets/CreateNewIdentityWidget.razor
+++ b/src/AliasVault.Client/Main/Components/Widgets/CreateNewIdentityWidget.razor
@@ -11,9 +11,9 @@
 @if (IsPopupVisible)
 {
     <ClickOutsideHandler OnClose="ClosePopup" ContentId="quickIdentityPopup,quickIdentityButton">
-        <div id="quickIdentityPopup" class="absolute z-50 mt-2 p-4 bg-white rounded-lg shadow-xl border border-gray-300"
+        <div id="quickIdentityPopup" class="absolute z-50 mt-2 p-4 bg-white rounded-lg shadow-xl border border-gray-300 dark:bg-gray-800 dark:border-gray-400"
              style="@PopupStyle">
-            <h3 class="text-lg font-semibold mb-4">Create New Alias</h3>
+            <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Create New Alias</h3>
             <EditForm Model="Model" OnValidSubmit="CreateIdentity">
                 <DataAnnotationsValidator />
                 <div class="mb-4">
diff --git a/src/AliasVault.Client/Main/Pages/Credentials/Delete.razor b/src/AliasVault.Client/Main/Pages/Credentials/Delete.razor
index 3c737e5a5..bee47a10e 100644
--- a/src/AliasVault.Client/Main/Pages/Credentials/Delete.razor
+++ b/src/AliasVault.Client/Main/Pages/Credentials/Delete.razor
@@ -21,11 +21,11 @@ else
         <h3 class="mb-4 text-xl font-semibold dark:text-white">Credential entry</h3>
         <div class="mb-4">
             <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Id</label>
-            <div>@Id</div>
+            <div class="text-gray-900 dark:text-white">@Id</div>
         </div>
         <div class="mb-4">
             <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Service name</label>
-            <div>@Obj?.Service.Name</div>
+            <div class="text-gray-900 dark:text-white">@Obj?.Service.Name</div>
         </div>
         <button @onclick="DeleteConfirm" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2.5 text-center mr-2 dark:focus:ring-red-900">
             Yes, I'm sure
diff --git a/src/AliasVault.Client/Main/Pages/Emails/Home.razor b/src/AliasVault.Client/Main/Pages/Emails/Home.razor
index 84819127f..cf75b5da0 100644
--- a/src/AliasVault.Client/Main/Pages/Emails/Home.razor
+++ b/src/AliasVault.Client/Main/Pages/Emails/Home.razor
@@ -43,11 +43,11 @@ else
     <div class="overflow-x-auto px-4">
         <Paginator CurrentPage="CurrentPage" PageSize="PageSize" TotalRecords="TotalRecords" OnPageChanged="HandlePageChanged"/>
 
-        <div class="bg-white border rounded-lg overflow-hidden mt-6">
-            <div class="px-4 py-2 bg-gray-100 border-b">
-                <h2 class="font-semibold text-gray-800">Inbox</h2>
+        <div class="bg-white border rounded-lg dark:bg-gray-800 dark:border-gray-700 overflow-hidden mt-6">
+            <div class="px-4 py-2 bg-gray-100 border-b dark:bg-gray-600 dark:border-gray-700">
+                <h2 class="font-semibold text-gray-800 dark:text-gray-200">Inbox</h2>
             </div>
-            <ul class="divide-y divide-gray-200">
+            <ul class="divide-y divide-gray-200 dark:divide-gray-600">
                 @if (EmailList.Count == 0)
                 {
                     <li class="p-4 text-center text-gray-500">
@@ -58,7 +58,7 @@ else
                 {
                     @foreach (var email in EmailList)
                     {
-                        <li class="hover:bg-gray-50 transition duration-150 ease-in-out">
+                        <li class="hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
                             <div @onclick="() => ShowAliasVaultEmailInModal(email.Id)" class="p-4 flex justify-start items-start">
                                 <div class="mr-4 flex-shrink-0">
                                     <SenderInitials SenderName="@email.FromName" SenderEmail="@email.FromEmail" />
@@ -66,16 +66,16 @@ else
                                 <div class="flex-grow">
                                     <div class="flex items-center justify-between mb-2 mr-4">
                                         <div>
-                                            <div class="text-gray-800 mb-2">
+                                            <div class="text-gray-800 dark:text-gray-200 mb-2">
                                                 @email.Subject
                                             </div>
-                                            <div class="text-sm text-gray-400 line-clamp-2">
+                                            <div class="text-sm text-gray-400 dark:text-gray-100 line-clamp-2">
                                                 @email.MessagePreview
                                             </div>
                                         </div>
                                         <div class="flex justify-end">
-                                            <div @onclick="() => NavigateToCredential(email.CredentialId)" class="text-sm text-gray-700 cursor-pointer mr-4 hover:underline">@email.CredentialName</div>
-                                            <div class="text-sm text-gray-500">@email.Date.ToString("yyyy-MM-dd")</div>
+                                            <div @onclick="() => NavigateToCredential(email.CredentialId)" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer mr-4 hover:underline">@email.CredentialName</div>
+                                            <div class="text-sm text-gray-500 dark:text-gray-400">@email.Date.ToString("yyyy-MM-dd")</div>
                                         </div>
                                     </div>
                                 </div>
diff --git a/src/AliasVault.Client/Main/Pages/Settings/Vault.razor b/src/AliasVault.Client/Main/Pages/Settings/Vault.razor
index 1e7c671d0..0e0bd2af4 100644
--- a/src/AliasVault.Client/Main/Pages/Settings/Vault.razor
+++ b/src/AliasVault.Client/Main/Pages/Settings/Vault.razor
@@ -26,9 +26,9 @@
 <div class="p-4 mx-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
     <h3 class="mb-4 text-xl font-semibold dark:text-white">Import vault</h3>
     <div class="mb-4">
-        <div>
+        <div class="text-gray-900 dark:text-white">
             Import unencrypted CSV file:
-            <InputFile OnChange="@LoadFiles" />
+            <InputFile class="dark:text-white" OnChange="@LoadFiles" />
         </div>
     </div>
 </div>
diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css
index 4b0fb961d..75bbe82b3 100644
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -695,6 +695,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -763,10 +767,6 @@ video {
   margin-top: 2rem;
 }
 
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
@@ -2041,6 +2041,11 @@ video {
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
 }
 
+.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+}
+
 .dark\:border-amber-800:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(146 64 14 / var(--tw-border-opacity));
@@ -2066,6 +2071,11 @@ video {
   border-color: rgb(7 89 133 / var(--tw-border-opacity));
 }
 
+.dark\:border-gray-400:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .dark\:bg-gray-600:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -2140,6 +2150,16 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.dark\:text-gray-100:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.dark\:text-gray-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .dark\:text-gray-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2175,11 +2195,6 @@ video {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.dark\:text-red-500:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .dark\:text-sky-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(125 211 252 / var(--tw-text-opacity));
@@ -2190,6 +2205,21 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark\:text-gray-700:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.dark\:text-gray-500:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.dark\:text-gray-900:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
diff --git a/src/Shared/AliasVault.RazorComponents/Headings/Breadcrumb.razor b/src/Shared/AliasVault.RazorComponents/Headings/Breadcrumb.razor
index ef3a4b6a5..54ea0008d 100644
--- a/src/Shared/AliasVault.RazorComponents/Headings/Breadcrumb.razor
+++ b/src/Shared/AliasVault.RazorComponents/Headings/Breadcrumb.razor
@@ -11,8 +11,8 @@
             @if (item.Url is not null)
             {
                 <li>
-                    <div class="flex items-center">
-                        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+                    <div class="flex items-center text-gray-400 dark:text-gray-400">
+                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                         <a href="@item.Url" class="text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-500">@item.DisplayName</a>
                     </div>
                 </li>
@@ -20,8 +20,8 @@
             else
             {
                 <li>
-                    <div class="flex items-center">
-                        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+                    <div class="flex items-center text-gray-400 dark:text-gray-400">
+                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                         @item.DisplayName
                     </div>
                 </li>