From 14ee466bec72502f0ba8dc2cc0bd6b9585bcb032 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Fri, 28 Mar 2025 12:22:07 +0100
Subject: [PATCH] Add logo to modal (#542)

---
 .../Components/ImportServiceCard.razor        |  2 +-
 .../Components/ImportServiceKeePass.razor     |  2 +-
 .../wwwroot/css/tailwind.css                  | 69 ++++---------------
 3 files changed, 14 insertions(+), 59 deletions(-)

diff --git a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor
index 9bcbe0958..8508c884b 100644
--- a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor
+++ b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor
@@ -41,7 +41,7 @@
             <div id="importServiceModal" class="relative top-20 mx-auto p-5 shadow-lg rounded-md bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-400 md:min-w-[32rem]">
                 <div class="bg-white dark:bg-gray-800 rounded-lg p-4 max-w-lg w-full mx-auto">
                     <div class="flex justify-between items-center mb-4">
-                        <h3 class="text-xl font-semibold dark:text-white">Import from @ServiceName</h3>
+                        <div class="flex"><img src="@LogoUrl" alt="@ServiceName logo" class="w-8 h-8 float-left mr-4" /><h3 class="text-xl font-semibold dark:text-white">Import from @ServiceName</h3></div>
                         <button @onclick="CloseModal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
diff --git a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor
index 38a7ed226..2313808ca 100644
--- a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor
+++ b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor
@@ -6,7 +6,7 @@
 
 <ImportServiceCard
     ServiceName="KeePass"
-    Description="Import passwords from your KeePass vault"
+    Description="Import passwords from KeePass"
     LogoUrl="img/importers/keepass.svg"
     ProcessFileCallback="ProcessFile">
     <p class="text-gray-700 dark:text-gray-300 mb-4">In order to import your KeePass vault, you need to export it as a CSV file. You can do this by going to the 'File' menu and selecting 'Export' (to CSV).</p>
diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css
index 878c1bee7..592e2aa73 100644
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -694,6 +694,10 @@ video {
   grid-column: 1 / -1;
 }
 
+.float-left {
+  float: left;
+}
+
 .\!m-0 {
   margin: 0px !important;
 }
@@ -1381,9 +1385,9 @@ video {
   border-top-width: 2px;
 }
 
-.border-blue-200 {
+.border-amber-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  border-color: rgb(251 191 36 / var(--tw-border-opacity));
 }
 
 .border-blue-700 {
@@ -1436,11 +1440,6 @@ video {
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
-.border-amber-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 191 36 / var(--tw-border-opacity));
-}
-
 .bg-amber-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity));
@@ -2148,11 +2147,6 @@ video {
   border-width: 0px;
 }
 
-.file\:bg-blue-50::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
-}
-
 .file\:bg-primary-50::file-selector-button {
   --tw-bg-opacity: 1;
   background-color: rgb(255 224 150 / var(--tw-bg-opacity));
@@ -2177,11 +2171,6 @@ video {
   font-weight: 600;
 }
 
-.file\:text-blue-700::file-selector-button {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
 .file\:text-primary-700::file-selector-button {
   --tw-text-opacity: 1;
   color: rgb(184 112 47 / var(--tw-text-opacity));
@@ -2362,11 +2351,6 @@ video {
   text-decoration-line: underline;
 }
 
-.hover\:file\:bg-blue-100::file-selector-button:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
 .hover\:file\:bg-primary-100::file-selector-button:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(253 222 133 / var(--tw-bg-opacity));
@@ -2493,6 +2477,10 @@ video {
   border-width: 1px;
 }
 
+.dark\:border-amber-500\/50:is(.dark *) {
+  border-color: rgb(245 158 11 / 0.5);
+}
+
 .dark\:border-blue-500:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -2548,13 +2536,8 @@ video {
   border-color: rgb(234 179 8 / var(--tw-border-opacity));
 }
 
-.dark\:border-amber-600:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 119 6 / var(--tw-border-opacity));
-}
-
-.dark\:border-amber-500\/50:is(.dark *) {
-  border-color: rgb(245 158 11 / 0.5);
+.dark\:bg-amber-800\/30:is(.dark *) {
+  background-color: rgb(146 64 14 / 0.3);
 }
 
 .dark\:bg-blue-600:is(.dark *) {
@@ -2572,10 +2555,6 @@ video {
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-blue-900\/20:is(.dark *) {
-  background-color: rgb(30 58 138 / 0.2);
-}
-
 .dark\:bg-gray-500:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -2670,15 +2649,6 @@ video {
   background-color: rgb(113 63 18 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-amber-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(120 53 15 / var(--tw-bg-opacity));
-}
-
-.dark\:bg-amber-800\/30:is(.dark *) {
-  background-color: rgb(146 64 14 / 0.3);
-}
-
 .dark\:bg-opacity-80:is(.dark *) {
   --tw-bg-opacity: 0.8;
 }
@@ -2797,20 +2767,10 @@ video {
   --tw-ring-offset-color: #1f2937;
 }
 
-.dark\:file\:bg-gray-700:is(.dark *)::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 .dark\:file\:bg-primary-900\/40:is(.dark *)::file-selector-button {
   background-color: rgb(123 74 30 / 0.4);
 }
 
-.dark\:file\:text-gray-300:is(.dark *)::file-selector-button {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
 .dark\:file\:text-primary-300:is(.dark *)::file-selector-button {
   --tw-text-opacity: 1;
   color: rgb(248 185 99 / var(--tw-text-opacity));
@@ -2926,11 +2886,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark\:hover\:file\:bg-gray-600:is(.dark *)::file-selector-button:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
 .dark\:hover\:file\:bg-primary-800\/60:is(.dark *)::file-selector-button:hover {
   background-color: rgb(154 93 38 / 0.6);
 }