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 */}
Esqueceste-te da palavra-passe? diff --git a/tailwind.config.ts b/tailwind.config.ts deleted file mode 100644 index ca7385d..0000000 --- a/tailwind.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { Config } from "tailwindcss"; - -const config: Config = { - darkMode: "class", // Isto desativa o modo automático do sistema - content: [ - "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", - "./src/components/**/*.{js,ts,jsx,tsx,mdx}", - "./src/app/**/*.{js,ts,jsx,tsx,mdx}", - ], - theme: { - extend: {}, - }, - plugins: [], -}; -export default config; \ No newline at end of file