mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-03-20 15:41:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update client for dark theme compatibility (#175)

Browse Source
This commit is contained in:
Leendert de Borst
2024-10-08 21:50:41 +02:00
parent 359fa1752f
commit e80c351ee6
8 changed files with 79 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/AliasVault.Client/Main/Components/Attachments/AttachmentUploader.razor
View File

@@ -1,35 +1,28 @@
@using System.IO
<div class="col">
<div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold dark:text-white">Attachments</h3>
<div class="grid gap-6">
<div class="col-span-6 sm:col-span-3">
<InputFile OnChange="@HandleFileSelection" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />
@if (!string.IsNullOrEmpty(StatusMessage))
<div class="col-span-6 sm:col-span-3">
<InputFile OnChange="@HandleFileSelection" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />
@if (!string.IsNullOrEmpty(StatusMessage))
{
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">@StatusMessage</p>
}
@if (Attachments.Any())
{
<div class="mt-4">
<h4 class="mb-2 text-lg font-semibold dark:text-white">Attachments:</h4>
<ul class="list-disc list-inside">
@foreach (var attachment in Attachments)
{
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">@StatusMessage</p>
<li class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
<span>@attachment.Filename</span>
<button type="button" @onclick="() => DeleteAttachment(attachment)" class="text-red-500 hover:text-red-700">
Delete
</button>
</li>
}
@if (Attachments.Any())
{
<div class="mt-4">
<h4 class="mb-2 text-lg font-semibold dark:text-white">Attachments:</h4>
<ul class="list-disc list-inside">
@foreach (var attachment in Attachments)
{
<li class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
<span>@attachment.Filename</span>
<button type="button" @onclick="() => DeleteAttachment(attachment)" class="text-red-500 hover:text-red-700">
Delete
</button>
</li>
}
</ul>
</div>
}
</div>
</ul>
</div>
</div>
}
</div>
@code {

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

@@ -46,7 +46,7 @@
}
else if (MailboxEmails.Count == 0)
{
<div>No emails found.</div>
<div class="text-gray-900 dark:text-white">No emails found.</div>
}
else
{

4
src/AliasVault.Client/Main/Components/Widgets/CreateNewIdentityWidget.razor
View File

@@ -11,9 +11,9 @@
@if (IsPopupVisible)
{
<ClickOutsideHandler OnClose="ClosePopup" ContentId="quickIdentityPopup,quickIdentityButton">
<div id="quickIdentityPopup" class="absolute z-50 mt-2 p-4 bg-white rounded-lg shadow-xl border border-gray-300"
<div id="quickIdentityPopup" class="absolute z-50 mt-2 p-4 bg-white rounded-lg shadow-xl border border-gray-300 dark:bg-gray-800 dark:border-gray-400"
style="@PopupStyle">
<h3 class="text-lg font-semibold mb-4">Create New Alias</h3>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Create New Alias</h3>
<EditForm Model="Model" OnValidSubmit="CreateIdentity">
<DataAnnotationsValidator />
<div class="mb-4">

4
src/AliasVault.Client/Main/Pages/Credentials/Delete.razor
View File

@@ -21,11 +21,11 @@ else
<h3 class="mb-4 text-xl font-semibold dark:text-white">Credential entry</h3>
<div class="mb-4">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Id</label>
<div>@Id</div>
<div class="text-gray-900 dark:text-white">@Id</div>
</div>
<div class="mb-4">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Service name</label>
<div>@Obj?.Service.Name</div>
<div class="text-gray-900 dark:text-white">@Obj?.Service.Name</div>
</div>
<button @onclick="DeleteConfirm" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2.5 text-center mr-2 dark:focus:ring-red-900">
Yes, I'm sure

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

@@ -43,11 +43,11 @@ else
<div class="overflow-x-auto px-4">
<Paginator CurrentPage="CurrentPage" PageSize="PageSize" TotalRecords="TotalRecords" OnPageChanged="HandlePageChanged"/>
<div class="bg-white border rounded-lg overflow-hidden mt-6">
<div class="px-4 py-2 bg-gray-100 border-b">
<h2 class="font-semibold text-gray-800">Inbox</h2>
<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">
<ul class="divide-y divide-gray-200 dark:divide-gray-600">
@if (EmailList.Count == 0)
{
<li class="p-4 text-center text-gray-500">
@@ -58,7 +58,7 @@ else
{
@foreach (var email in EmailList)
{
<li class="hover:bg-gray-50 transition duration-150 ease-in-out">
<li class="hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
<div @onclick="() => ShowAliasVaultEmailInModal(email.Id)" class="p-4 flex justify-start items-start">
<div class="mr-4 flex-shrink-0">
<SenderInitials SenderName="@email.FromName" SenderEmail="@email.FromEmail" />
@@ -66,16 +66,16 @@ else
<div class="flex-grow">
<div class="flex items-center justify-between mb-2 mr-4">
<div>
<div class="text-gray-800 mb-2">
<div class="text-gray-800 dark:text-gray-200 mb-2">
@email.Subject
</div>
<div class="text-sm text-gray-400 line-clamp-2">
<div class="text-sm text-gray-400 dark:text-gray-100 line-clamp-2">
@email.MessagePreview
</div>
</div>
<div class="flex justify-end">
<div @onclick="() => NavigateToCredential(email.CredentialId)" class="text-sm text-gray-700 cursor-pointer mr-4 hover:underline">@email.CredentialName</div>
<div class="text-sm text-gray-500">@email.Date.ToString("yyyy-MM-dd")</div>
<div @onclick="() => NavigateToCredential(email.CredentialId)" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer mr-4 hover:underline">@email.CredentialName</div>
<div class="text-sm text-gray-500 dark:text-gray-400">@email.Date.ToString("yyyy-MM-dd")</div>
</div>
</div>
</div>

4
src/AliasVault.Client/Main/Pages/Settings/Vault.razor
View File

@@ -26,9 +26,9 @@
<div class="p-4 mx-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold dark:text-white">Import vault</h3>
<div class="mb-4">
<div>
<div class="text-gray-900 dark:text-white">
Import unencrypted CSV file:
<InputFile OnChange="@LoadFiles" />
<InputFile class="dark:text-white" OnChange="@LoadFiles" />
</div>
</div>
</div>

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

@@ -695,6 +695,10 @@ video {
margin-bottom: 2rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
@@ -763,10 +767,6 @@ video {
margin-top: 2rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
@@ -2041,6 +2041,11 @@ video {
border-color: rgb(75 85 99 / var(--tw-divide-opacity));
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-divide-opacity));
}
.dark\:border-amber-800:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(146 64 14 / var(--tw-border-opacity));
@@ -2066,6 +2071,11 @@ video {
border-color: rgb(7 89 133 / var(--tw-border-opacity));
}
.dark\:border-gray-400:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(156 163 175 / var(--tw-border-opacity));
}
.dark\:bg-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -2140,6 +2150,16 @@ video {
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.dark\:text-gray-100:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark\:text-gray-200:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.dark\:text-gray-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2175,11 +2195,6 @@ video {
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.dark\:text-red-500:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.dark\:text-sky-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity));
@@ -2190,6 +2205,21 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:text-gray-700:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.dark\:text-gray-500:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark\:text-gray-900:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));

8
src/Shared/AliasVault.RazorComponents/Headings/Breadcrumb.razor
View File

@@ -11,8 +11,8 @@
@if (item.Url is not null)
{
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<div class="flex items-center text-gray-400 dark:text-gray-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<a href="@item.Url" class="text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-500">@item.DisplayName</a>
</div>
</li>
@@ -20,8 +20,8 @@
else
{
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<div class="flex items-center text-gray-400 dark:text-gray-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
@item.DisplayName
</div>
</li>