From 5f779ce360f97a19cbf07b0d78726b0d82ea1196 Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Tue, 18 Mar 2025 12:37:10 +0100 Subject: [PATCH] Update UI style (#167) --- .../Main/Components/Email/EmailModal.razor | 2 +- .../Settings/PasswordSettingsPopup.razor | 6 +- .../Main/Pages/Emails/Home.razor | 3 - src/AliasVault.Client/package-lock.json | 6 +- .../wwwroot/css/tailwind.css | 62 +++++++++++-------- 5 files changed, 44 insertions(+), 35 deletions(-) diff --git a/src/AliasVault.Client/Main/Components/Email/EmailModal.razor b/src/AliasVault.Client/Main/Components/Email/EmailModal.razor index a4d620adb..771e7e377 100644 --- a/src/AliasVault.Client/Main/Components/Email/EmailModal.razor +++ b/src/AliasVault.Client/Main/Components/Email/EmailModal.razor @@ -9,7 +9,7 @@
-
+
diff --git a/src/AliasVault.Client/Main/Components/Settings/PasswordSettingsPopup.razor b/src/AliasVault.Client/Main/Components/Settings/PasswordSettingsPopup.razor index 71019390a..553fa8b2f 100644 --- a/src/AliasVault.Client/Main/Components/Settings/PasswordSettingsPopup.razor +++ b/src/AliasVault.Client/Main/Components/Settings/PasswordSettingsPopup.razor @@ -4,8 +4,8 @@
-
-
+
+

Change password generator settings

@@ -57,7 +57,7 @@
-
+
diff --git a/src/AliasVault.Client/Main/Pages/Emails/Home.razor b/src/AliasVault.Client/Main/Pages/Emails/Home.razor index 8f7cec524..02b774b04 100644 --- a/src/AliasVault.Client/Main/Pages/Emails/Home.razor +++ b/src/AliasVault.Client/Main/Pages/Emails/Home.razor @@ -44,9 +44,6 @@ else
-
-

Inbox

-
    @if (EmailList.Count == 0) { diff --git a/src/AliasVault.Client/package-lock.json b/src/AliasVault.Client/package-lock.json index b61b98e57..9e7155d82 100644 --- a/src/AliasVault.Client/package-lock.json +++ b/src/AliasVault.Client/package-lock.json @@ -280,9 +280,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001626", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001626.tgz", - "integrity": "sha512-JRW7kAH8PFJzoPCJhLSHgDgKg5348hsQ68aqb+slnzuB5QFERv846oA/mRChmlLAOdEDeOkRn3ynb1gSFnjt3w==", + "version": "1.0.30001706", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001706.tgz", + "integrity": "sha512-3ZczoTApMAZwPKYWmwVbQMFpXBDds3/0VciVoUwPUbldlYyVLmRVuRs/PcUZtHpbLRpzzDvrvnFuREsGt6lUug==", "funding": [ { "type": "opencollective", diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css index 9271dd38f..453e7b616 100644 --- a/src/AliasVault.Client/wwwroot/css/tailwind.css +++ b/src/AliasVault.Client/wwwroot/css/tailwind.css @@ -698,6 +698,10 @@ video { margin: 0px !important; } +.m-2 { + margin: 0.5rem; +} + .mx-4 { margin-left: 1rem; margin-right: 1rem; @@ -1337,6 +1341,14 @@ video { border-width: 2px; } +.border-4 { + border-width: 4px; +} + +.border-8 { + border-width: 8px; +} + .border-b { border-bottom-width: 1px; } @@ -1420,6 +1432,11 @@ video { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } +.border-gray-400 { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); +} + .bg-amber-50 { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity)); @@ -1579,11 +1596,6 @@ video { background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } -.bg-yellow-600 { - --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); -} - .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -2211,11 +2223,6 @@ video { background-color: rgb(153 27 27 / var(--tw-bg-opacity)); } -.hover\:bg-yellow-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(161 98 7 / var(--tw-bg-opacity)); -} - .hover\:from-primary-600:hover { --tw-gradient-from: #d68338 var(--tw-gradient-from-position); --tw-gradient-to: rgb(214 131 56 / 0) var(--tw-gradient-to-position); @@ -2342,6 +2349,11 @@ video { --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity)); } +.focus\:ring-gray-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity)); +} + .focus\:ring-green-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity)); @@ -2377,11 +2389,6 @@ video { --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); } -.focus\:ring-yellow-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity)); -} - .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } @@ -2461,6 +2468,21 @@ video { border-color: rgb(234 179 8 / var(--tw-border-opacity)); } +.dark\:border-gray-300:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.dark\:border-gray-100:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-border-opacity)); +} + +.dark\:border-gray-200:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + .dark\:bg-blue-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity)); @@ -2559,11 +2581,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.dark\:bg-yellow-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(161 98 7 / var(--tw-bg-opacity)); -} - .dark\:bg-yellow-800:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(133 77 14 / var(--tw-bg-opacity)); @@ -2742,11 +2759,6 @@ video { background-color: rgb(185 28 28 / var(--tw-bg-opacity)); } -.dark\:hover\:bg-yellow-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); -} - .dark\:hover\:from-primary-500:hover:is(.dark *) { --tw-gradient-from: #f49541 var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 149 65 / 0) var(--tw-gradient-to-position);