Add logo to modal (#542)

This commit is contained in:
Leendert de Borst
2025-03-28 12:22:07 +01:00
committed by Leendert de Borst
parent ea9c3c5683
commit 14ee466bec
3 changed files with 14 additions and 59 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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);
}