diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx index ae14491..783808a 100644 --- a/app/(private)/layout.tsx +++ b/app/(private)/layout.tsx @@ -1,7 +1,5 @@ import { ReactNode } from "react"; -import BarNavigation from "../Components/layout/BarNavigation/BarNavigation"; import Logout from "../Components/auth/Logout/Logout"; - export default async function PrivateLayout({ children, }: { diff --git a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx index f862b42..bd7a882 100644 --- a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx +++ b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx @@ -34,6 +34,7 @@ export default function MesasDisponibles() { style={{ overflow: "auto", height: "430px", + width:"100%", scrollbarColor: "#2563eb white", }} > diff --git a/app/Components/auth/Logout/Logout.css b/app/Components/auth/Logout/Logout.css index 88d5711..0f2dcf9 100644 --- a/app/Components/auth/Logout/Logout.css +++ b/app/Components/auth/Logout/Logout.css @@ -1,6 +1,5 @@ .button-logout { background-color: #d32f2f; - position: absolute; top: 10px; right: 10px; cursor: pointer; @@ -11,6 +10,22 @@ background-color: #d12020; } +.session{ + position: absolute; + top: 10px; + right: 10px; + display: flex; + align-items: center; + gap: 2rem; +} + +.userName{ + background-color: white; + border-radius: 6px; + padding: 6px 12px; + z-index: 1; +} + @media (max-width: 800px) { .button-logout { color: transparent; @@ -41,4 +56,10 @@ top: 50%; transform: translate(0, -50%); } + + .userName{ + position: absolute; + top: 50px; + right: 0px; + } } diff --git a/app/Components/auth/Logout/Logout.tsx b/app/Components/auth/Logout/Logout.tsx index 04c49da..0eeb731 100644 --- a/app/Components/auth/Logout/Logout.tsx +++ b/app/Components/auth/Logout/Logout.tsx @@ -2,11 +2,17 @@ import Cookies from "js-cookie"; import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; import "./Logout.css"; export default function Logout() { const router = useRouter(); + const [userName, setUserName] = useState(null); + + useEffect(() => { + setUserName(Cookies.get("user") ?? null); + }, []); const handleLogout = () => { Cookies.remove("token", { path: "/" }); @@ -15,15 +21,14 @@ export default function Logout() { router.push("/"); router.refresh(); - }; return ( - <> -

+
+ {userName &&

{userName}

} - +
); } diff --git a/app/globals.css b/app/globals.css index e397ad4..1dc6de0 100644 --- a/app/globals.css +++ b/app/globals.css @@ -89,7 +89,6 @@ footer p { overflow: hidden; background-color: #f9f9f9; z-index: 0; - animation: fadeInUp 1s ease forwards; } .containerSection { @@ -375,6 +374,7 @@ a { top: 0; left: 0; width: 100%; + min-height: 45px; font-size: 2.5rem; font-weight: bold; text-align: start; @@ -404,7 +404,6 @@ form { .toggleSection { width: 100%; max-width: 750px; - margin-top: 1rem; border-radius: 4px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @@ -660,7 +659,7 @@ table td:last-child { } .containerSection { - align-items: center; + align-items: start; scrollbar-width: none; } @@ -690,6 +689,11 @@ table td:last-child { .toggleButton { padding: 0; } + + .toggleSection { + margin-top: 2rem; + } + } @media (max-height: 960px) { @@ -700,8 +704,10 @@ table td:last-child { @media (max-width: 450px) { .title { - text-align: center; max-width: 250px; overflow-wrap: break-word; + font-size: 2.2rem; + min-height: 50px; + align-items: center; } } \ No newline at end of file