From b30b8503f90b9de8db89b9f05f34f8972a658a5c Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Wed, 15 Apr 2026 13:10:33 +0100 Subject: [PATCH] add theme toggle button --- app/layout.tsx | 15 ++++----- app/login/page.tsx | 79 +++++++++++++++++++++++++++------------------- tailwind.config.ts | 15 --------- 3 files changed, 53 insertions(+), 56 deletions(-) delete mode 100644 tailwind.config.ts diff --git a/app/layout.tsx b/app/layout.tsx index a59f053..d160d05 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -38,16 +38,13 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - // Remova o style={{ colorScheme: 'light' }} daqui, - // pois o Next.js tem dificuldade em hidratar estilos inline no - - + // 1. We remove "light" from className so ThemeProvider can inject it + // 2. We remove style={{ colorScheme: 'light' }} + + - + {/* Ensure attribute="class" is set here */} + {children} diff --git a/app/login/page.tsx b/app/login/page.tsx index b094f82..8249213 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -1,29 +1,49 @@ "use client"; import Image from 'next/image'; - -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useGoogleLogin } from "@react-oauth/google"; +import { useTheme } from 'next-themes'; +import { Sun, Moon } from 'lucide-react'; // Optional: install lucide-react for clean icons export default function AppleStyleAuth() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const [isLoading, setIsLoading] = useState(false); + const { theme, setTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + + // Avoid hydration mismatch by waiting for mount + useEffect(() => { + setMounted(true); + }, []); - // Lógica do Google Login const googleLogin = useGoogleLogin({ onSuccess: (res) => console.log("Google Success", res), onError: () => console.log("Google Failed"), }); + if (!mounted) return null; + return ( -
+
+ + {/* THEME TOGGLE BUTTON */} + +
- {/* 1. LOGOTIPO (Apple Style) */} + {/* 1. LOGOTIPO */}
-
- {/* Substitui pelo teu SVG de logo real */} - {/* tv1 */} +
logo

@@ -32,33 +52,28 @@ export default function AppleStyleAuth() {

Usa a tua conta TVone.

- {/* 2. FORMULÁRIO DE CREDENCIAIS */} + {/* 2. FORMULÁRIO */}
-
- setEmail(e.target.value)} - className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900" - /> -
-
- setPassword(e.target.value)} - className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900" - /> -
- + setEmail(e.target.value)} + className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white" + /> + setPassword(e.target.value)} + className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white" + />
- {/* 3. DIVISOR COM "OU" */} + {/* 3. DIVISOR */}
@@ -67,7 +82,7 @@ export default function AppleStyleAuth() {
- {/* 4. BOTÃO GOOGLE (Melhorado) */} + {/* 4. BOTÃO GOOGLE */} - {/* 5. LINKS ADICIONAIS */} + {/* 5. LINKS */}