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

93
web/src/pages/Agreement/index.tsx
View File

@ -1,39 +1,102 @@
import { type FC } from "react";
import overlay from "@/assets/overlay.jpg";
import { Card, CardContent } from "@/components/ui/card";
import AccountList from "@/feature/AccountList";
import { ArrowLeftRight, User } from "lucide-react";
import { Button } from "@/components/ui/button";
const AgreementPage: FC = () => {
return (
<div
className="relative min-h-screen bg-cover bg-center bg-white"
style={{ backgroundImage: `url(${overlay})` }}
className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(dark-overlay.jpg)]`}
>
<div className="relative z-10 flex items-center justify-center min-h-screen">
<Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/90 backdrop-blur-md">
<div className="flex sm:flex-row flex-col sm:items-start items-center pt-16 sm:pt-0">
<Card className="sm:w-[425px] sm:min-w-[425px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
<div className="flex flex-col items-center pt-10 sm:pt-0">
<div className="flex flex-col items-center flex-5/6">
<img
{/* <img
src="/icon.png"
alt="icon"
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
/>
/> */}
<div className="flex flex-row items-center gap-4 mt-2 mb-4 sm:mt-6">
<div className="p-2 bg-gray-100 rounded-full ring ring-gray-900 dark:ring dark:ring-gray-100">
<User size={32} />
</div>
<div className="text-gray-400 dark:text-gray-600">
{/* <Activity /> */}
<ArrowLeftRight />
</div>
<div className="p-2 rounded-full bg-gray-900 ring ring-gray-900 dark:ring dark:ring-gray-100">
{/* <img
src="https://lucide.dev/logo.dark.svg"
className="w-8 h-8"
/> */}
<img
src="https://developer.mozilla.org/favicon.svg"
className="w-8 h-8"
/>
</div>
</div>
<div className="px-4 sm:mt-4 mt-8">
<h2 className="text-2xl font-bold text-gray-800 text-left w-full">
Select Account
<h2 className="text-2xl font-medium text-gray-800 dark:text-gray-300 text-center w-full mb-2">
<a href="#" className="text-blue-500">
MDN Lab Services
</a>{" "}
wants to access your Home Account
</h2>
<h4 className="text-base mb-3 text-gray-400 text-left">
Choose one of the accounts below in order to proceed to home
lab services and tools.
<div className="flex flex-row items-center justify-center mb-6 gap-2">
<div className="p-2 bg-gray-100 rounded-full ring ring-gray-900 dark:ring dark:ring-gray-100">
<User />
</div>
<p className="text-sm text-gray-500 dark:text-gray-500">
qwer.009771@gmail.com
</p>
</div>
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
This will allow{" "}
<a href="#" className="text-blue-500">
MDN Lab Services
</a>{" "}
to:
</h4>
</div>
</div>
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
<CardContent className="w-full space-y-4">
<AccountList />
<CardContent className="w-full space-y-4 text-sm">
<div className="flex flex-col gap-3 mb-8">
<div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
<div className="flex flex-row items-center gap-4">
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
<p>View your full name, email and profile image</p>
</div>
</div>
<div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
<div className="flex flex-row items-center gap-4">
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
<p>View your permission from "MDN" group</p>
</div>
</div>
</div>
<div className="mb-10">
<p className="font-medium mb-4 dark:text-gray-200">
Are you sure you want to trust MDN Lab Services?
</p>
<p className="text-sm text-gray-400 dark:text-gray-500">
Please do not share any sensitive, personal, or unnecessary
information unless you trust this service. Protect your
privacy and only provide information that is required for the
intended purpose.
</p>
</div>
<div className="flex flex-row justify-between items-center">
<Button variant="text">Cancel</Button>
<Button>Allow</Button>
</div>
</CardContent>
</div>
</Card>