mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-05-18 13:28:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update UI style (#167)

Browse Source
This commit is contained in:
Leendert de Borst
2025-03-18 12:37:10 +01:00
parent b9d981f80b
commit 5f779ce360
5 changed files with 44 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/AliasVault.Client/Main/Components/Email/EmailModal.razor
View File

@@ -9,7 +9,7 @@
<ClickOutsideHandler OnClose="OnClose" ContentId="emailModal">
<div class="fixed inset-0 z-50 overflow-auto bg-gray-500 bg-opacity-75 flex items-center justify-center">
<div id="emailModal" class="relative bg-white w-3/4 flex flex-col rounded-lg shadow-xl max-h-[90vh]">
<div id="emailModal" class="relative bg-white w-3/4 flex flex-col rounded-lg shadow-xl max-h-[90vh] border-2 border-gray-300 dark:border-gray-400">
<!-- Header -->
<div class="p-4 border-b">
<div class="flex items-center justify-between">

6
src/AliasVault.Client/Main/Components/Settings/PasswordSettingsPopup.razor
View File

@@ -4,8 +4,8 @@
<ClickOutsideHandler OnClose="OnClose" ContentId="passwordSettingsModal">
<div class="fixed inset-0 z-50 overflow-auto bg-gray-500 bg-opacity-75 flex items-center justify-center">
<div id="passwordSettingsModal" class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3">
<div id="passwordSettingsModal" 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">
<div class="m-2">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Change password generator settings</h3>
<div class="mt-4 space-y-4">
<div>
@@ -57,7 +57,7 @@
</div>
</div>
<div class="flex @(IsTemporary ? "justify-between" : "justify-end") pt-4">
<div class="flex @(IsTemporary ? "justify-between" : "justify-end") pt-4 gap-2">
<button type="button" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" @onclick="OnClose">
Cancel
</button>

3
src/AliasVault.Client/Main/Pages/Emails/Home.razor
View File

@@ -44,9 +44,6 @@ else
<Paginator CurrentPage="CurrentPage" PageSize="PageSize" TotalRecords="TotalRecords" OnPageChanged="HandlePageChanged"/>
<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 dark:divide-gray-600">
@if (EmailList.Count == 0)
{

6
src/AliasVault.Client/package-lock.json generated
View File

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

62
src/AliasVault.Client/wwwroot/css/tailwind.css
View File

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