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

12
web/src/pages/Register/index.tsx
View File

@ -4,7 +4,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 { useCallback, useState } from "react";
import { useForm, type SubmitHandler } from "react-hook-form";
@ -75,11 +74,10 @@ export default function RegisterPage() {
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/65 backdrop-blur-md">
<div className="flex flex-col items-center pt-16 sm:pt-0">
<img
src="/icon.png"
@ -88,10 +86,10 @@ export default function RegisterPage() {
/>
<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 Up
</h2>
<h4 className="text-base mb-3 text-gray-400 text-left">
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-600 text-left">
Fill up this form to start using homelab services and tools.
</h4>
</div>
@ -235,7 +233,7 @@ export default function RegisterPage() {
)}
{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>
)}