admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark theme support

Browse Source
This commit is contained in:
Amir Adal
2025-05-24 16:15:22 +02:00
parent 1a596eef87
commit 587a463623
6 changed files with 136 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/src/feature/AccountList/index.tsx
View File

@ -1,6 +1,6 @@
import { useDbContext } from "@/context/db/db";
import { type LocalAccount, useAccountRepo } from "@/repository/account";
import { User } from "lucide-react";
import { CirclePlus, User } from "lucide-react";
import { useEffect, useState, type FC } from "react";
const AccountList: FC = () => {
@ -20,7 +20,7 @@ const AccountList: FC = () => {
<div role="status">
<svg
aria-hidden="true"
className="w-12 h-12 text-gray-200 animate-spin fill-blue-600"
className="w-12 h-12 text-gray-200 dark:text-gray-600 animate-spin fill-blue-600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -40,22 +40,40 @@ const AccountList: FC = () => {
);
}
return accounts.map((account) => (
<div
key={account.accountId}
className="flex flex-row items-center p-4 border-gray-200 border sm:border-l sm:border-r border-r-0 border-l-0 sm:rounded-xl select-none cursor-pointer hover:bg-gray-50 transition-colors mb-2"
>
<div>
<div className="rounded-full p-2 bg-gray-100 mr-3">
<User />
return (
<>
{accounts.map((account) => (
<div
key={account.accountId}
className="flex flex-row items-center p-4 border-gray-200 dark:border-gray-700/65 border-b border-r-0 border-l-0 select-none cursor-pointer hover:bg-gray-50/50 dark:hover:bg-gray-800/10 transition-colors mb-0"
>
<div>
<div className="rounded-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-200 mr-3 ring ring-gray-900 dark:ring dark:ring-gray-100">
<User />
</div>
</div>
<div className="flex flex-col">
<p className="text-base text-gray-900 dark:text-gray-200">
{account.label}
</p>
<p className="text-gray-500 dark:text-gray-600 text-sm">
{account.email}
</p>
</div>
</div>
))}
<div className="flex flex-row items-center p-4 border-gray-200 dark:border-gray-700/65 border-b border-r-0 border-l-0 select-none cursor-pointer hover:bg-gray-50/50 dark:hover:bg-gray-800/10 transition-colors mb-0">
<div>
<div className="rounded-full p-2 text-gray-900 dark:text-gray-200 mr-3">
<CirclePlus />
</div>
</div>
<p className="text-base text-gray-900 dark:text-gray-200">
Add new account
</p>
</div>
<div className="flex flex-col">
<p className="text-base">{account.label}</p>
<p className="text-gray-500 text-sm">{account.email}</p>
</div>
</div>
));
</>
);
};
export default AccountList;