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

16
web/src/pages/Login/index.tsx
View File

@ -5,7 +5,6 @@ import { Link } from "react-router-dom";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import overlay from "@/assets/overlay.jpg";
import { useForm, type SubmitHandler } from "react-hook-form";
import { useCallback, useState } from "react";
import { loginApi } from "@/api/login";
@ -71,11 +70,10 @@ export default function LoginPage() {
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-96 sm:min-w-96 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">
<Card className="sm:w-96 sm:min-w-96 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/70 backdrop-blur-md">
<div className="flex flex-col items-center pt-16 sm:pt-0">
<img
src="/icon.png"
@ -84,10 +82,10 @@ export default function LoginPage() {
/>
<div className="px-4 sm:mt-4 mt-8">
<h2 className="text-2xl font-bold text-gray-800 text-left w-full">
<h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 text-left w-full">
Sign In
</h2>
<h4 className="text-base mb-3 text-gray-400 text-left">
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
Enter your credentials to access home services and tools.
</h4>
</div>
@ -96,7 +94,7 @@ export default function LoginPage() {
<form onSubmit={handleSubmit(onSubmit)}>
<div className="mb-4">
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600 w-4 h-4" />
<Input
id="email"
type="email"
@ -121,7 +119,7 @@ export default function LoginPage() {
<div className="mb-4">
<div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600 w-4 h-4" />
<Input
id="password"
type="password"
@ -147,7 +145,7 @@ export default function LoginPage() {
)}
{error.length > 0 && (
<div className="border border-red-400 p-2 rounded bg-red-200 text-sm">
<div className="border border-red-400 p-2 rounded bg-red-200 dark:border-red-600 dark:bg-red-400 text-sm">
{error}
</div>
)}