Add importer help text (#542)

src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor

@@ -29,7 +29,7 @@
     {
         <div class="mb-6">
             <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Recommended for Your Browser</h3>
-            <div class="p-4 border rounded-lg dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20 border-blue-200">
+            <div class="p-4 border rounded-lg dark:border-amber-500/50 bg-amber-50 dark:bg-amber-800/30 border-amber-400">
                 <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                     <div class="flex items-center">
                         <img src="@CurrentBrowserExtension?.IconPath" alt="@CurrentBrowserExtension?.Name" class="w-8 h-8 mr-3">

src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceAliasVault.razor

@@ -9,6 +9,7 @@
     Description="Import passwords from another AliasVault instance or manual back-up"
     LogoUrl="img/logo.svg"
     ProcessFileCallback="ProcessFile">
+    <p class="text-gray-700 dark:text-gray-300 mb-4">If you have a CSV file back-up of your AliasVault database (from a different AliasVault instance), you can import it here.</p>
 </ImportServiceCard>
 
 @code {

src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceBitwarden.razor

@@ -9,6 +9,8 @@
     Description="Import passwords from your Bitwarden vault"
     LogoUrl="img/importers/bitwarden.svg"
     ProcessFileCallback="ProcessFile">
+    <p class="text-gray-700 dark:text-gray-300 mb-4">In order to import your Bitwarden vault, you need to export it as a CSV file. You can do this by logging into your Bitwarden account, going to the 'Tools' menu and selecting 'Export vault' (to CSV).</p>
+    <p class="text-gray-700 dark:text-gray-300 mb-4">Once you have exported the file, you can upload it below.</p>
 </ImportServiceCard>
 
 @code {

src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor

@@ -68,9 +68,10 @@
                             }
 
                             <div class="@(IsImporting ? "hidden" : "")">
-                                <div class="mb-4">
-                                    <p class="mb-4 text-gray-700 dark:text-gray-300">Upload your @ServiceName export file:</p>
-                                    <InputFile OnChange="HandleFileUpload" class="text-gray-700 dark:text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 dark:file:bg-gray-700 dark:file:text-gray-300 dark:hover:file:bg-gray-600" />
+                                @ChildContent
+                                <div class="mb-4 bg-amber-50 border border-amber-400 dark:bg-amber-800/30 dark:border-amber-500/50 rounded-lg p-4">
+                                    <p class="mb-4 text-gray-700 dark:text-gray-200">Upload your @ServiceName export file:</p>
+                                    <InputFile OnChange="HandleFileUpload" class="text-gray-700 dark:text-gray-200 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 dark:file:bg-primary-900/40 dark:file:text-primary-300 dark:hover:file:bg-primary-800/60" />
                                 </div>
                                 <div class="flex justify-end mt-6 space-x-2">
                                     <Button OnClick="@CloseModal" Color="secondary">Cancel</Button>
@@ -311,6 +312,9 @@
         ImportSuccessMessage = null;
         StateHasChanged();
 
+        // Let UI update to start showing the loading indicator as the save database call below can block the UI thread momentarily.
+        await Task.Delay(50);
+
         try
         {
             // Convert imported credentials to AliasVault format and insert them to the database.

src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor

@@ -9,6 +9,8 @@
     Description="Import passwords from your KeePass vault"
     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>
+    <p class="text-gray-700 dark:text-gray-300 mb-4">Once you have exported the file, you can upload it below.</p>
 </ImportServiceCard>
 
 @code {

src/AliasVault.Client/wwwroot/css/tailwind.css

@@ -1436,6 +1436,11 @@ 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,6 +2153,11 @@ video {
   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));
+}
+
 .file\:px-4::file-selector-button {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2172,6 +2182,11 @@ video {
   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));
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -2352,6 +2367,11 @@ video {
   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));
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -2528,6 +2548,15 @@ 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-blue-600:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -2641,6 +2670,15 @@ 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;
 }
@@ -2764,11 +2802,20 @@ video {
   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));
+}
+
 .dark\:hover\:bg-blue-500:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -2884,6 +2931,10 @@ video {
   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);
+}
+
 .dark\:focus\:border-blue-500:focus:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));