added new toast

app/(private)/Inscripcion/page.tsx

@@ -58,28 +58,40 @@ export default async function Page(props: {
           <SearchUser value={numAcount} />
 
           {student && (
-            <Information
-              NoCuenta={student.id_cuenta}
-              Nombre={student.nombre}
-              Carrera={student.carrera.carrera}
-              Credito={student.credito}
-            />
+            <>
+              <Information
+                NoCuenta={student.id_cuenta}
+                Nombre={student.nombre}
+                Carrera={student.carrera.carrera}
+                Credito={student.credito}
+              />
+            </>
           )}
           {!student && numAcount && (
-            <button className="button buttonSearch">
+            <button
+              className="button buttonSearch"
+              style={{ marginTop: "1rem" }}
+            >
               Registrar Estudiante
             </button>
           )}
         </div>
 
-        {student && <Table headers={headers} data={data} />}
+        {student && (
+          <>
+            <Table headers={headers} data={data} />
+            <button
+              className="button buttonSearch"
+              style={{ marginTop: "2rem" }}
+            >
+              Restablecer contraseña
+            </button>
+          </>
+        )}
       </div>
 
       {student && (
         <>
-          <button className="button buttonSearch">
-            Restablecer contraseña
-          </button>
           <section className="inscripcion">
             <Selection />
 

app/(private)/layout.tsx

@@ -9,7 +9,6 @@ export default async function PrivateLayout({
 }) {
   return (
     <div className="mainContainer">
-      <BarNavigation />
       <div className="container">
         <Logout />
         <div className="img"></div>

app/Components/layout/BarNavigation/BarNavigation.css

@@ -1,11 +1,11 @@
 .barNavigation {
   text-align: center;
-  background-color: #003e79;
-  padding: 0 20px;
+  background-color: #ffffff;
   display: flex;
   width: 100%;
   top: 0;
-  min-height: 40px;
+  height: 45px;
+  max-height: 40px;
 }
 
 .barNavigation ul {
@@ -20,17 +20,13 @@
   cursor: pointer;
   color: white;
   width: 100%;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease, border 0.3s ease;
   font-size: 1.5rem;
 }
 
 .barNavigation li:hover {
-  background-color: #bd8c01;
-}
-
-.barNavigation ul.active {
-  display: flex;
-  width: 100%;
+  background-color: #f9f9f9;
+  color: black;
 }
 
 .menuToggle {
@@ -46,7 +42,7 @@
 .menuToggle div {
   width: 25px;
   height: 3px;
-  background-color: white;
+  background-color: #7a7a7a;
   border-radius: 4px;
 }
 
@@ -105,8 +101,13 @@
   height: 100%;
   align-items: center;
   justify-content: center;
-  color: rgb(255, 255, 255);
-  font-size: 2rem;
+  color: #383838;
+  font-size: 1.5rem;
+}
+
+.subMenu:hover > span,
+.subMenu > a:hover > span {
+  color: black;
 }
 
 .containerLinks {
@@ -142,6 +143,13 @@ tbody {
     margin: 0;
   }
 
+  .barNavigation ul.active {
+    position: absolute;
+    left: 0;
+    display: flex;
+    width: 100%;
+  }
+
   .barNavigation {
     font-size: 15px;
     display: block;

app/Components/layout/Header/Header.module.css

@@ -1,15 +1,20 @@
 .logo {
   position: relative;
-  filter: invert(1);
   z-index: 3;
-  margin: 5px;
+}
+
+.center {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  width: 350px;
 }
 
 .cedetecContainer {
   position: absolute;
   top: 0;
   right: 0;
-  width: 300px;
+  width: 200px;
   height: 100%;
   z-index: -1;
 }
@@ -26,10 +31,10 @@
   content: "";
   top: 0;
   left: -20px;
-  width: 65%;
-  height: 100%;
+  width: 100%;
+  height: 30px;
   min-width: 300px;
-  background: linear-gradient(to right, #bd8c01, #f9f9f9);
+  background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }

app/Components/layout/Header/Header.tsx

@@ -1,8 +1,13 @@
+"use client";
 import Image from "next/image";
 import header from "./Header.module.css";
 import Link from "next/link";
+import BarNavigation from "../BarNavigation/BarNavigation";
+import { usePathname } from "next/navigation";
 
 function Header() {
+  const pathname = usePathname();
+
   return (
     <header>
       <Link
@@ -14,18 +19,21 @@ function Header() {
           className={header.logo}
           src="/logo_fes.png"
           alt="Logo FES"
-          width={200}
-          height={50}
+          width={250}
+          height={70}
         />
       </Link>
       <div className={header.yellowPart}></div>
-      <div className={header.cedetecContainer}>
-        <Image
-          src="/cedetec.jpg"
-          alt="Image of CEDETEC"
-          width={300}
-          height={71}
-        />
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          maxHeight: "50%",
+          alignItems: "end",
+        }}
+        className=""
+      >
+        {pathname !== "/" && <BarNavigation />}
       </div>
     </header>
   );

app/globals.css

@@ -1,12 +1,12 @@
 * {
-  padding: 0;
-  margin: 0;
   color: #333333;
 }
 
 *,
 *::before,
 *::after {
+  margin: 0;
+  padding: 0;
   box-sizing: inherit;
 }
 
@@ -34,38 +34,36 @@ main {
 header {
   display: grid;
   grid-template-columns: auto 1fr;
-  padding: 5px 40px;
+  padding: 0 20px;
   position: relative;
-  overflow: hidden;
-  background-color: #f9f9f9;
   z-index: 1;
-  height: 70px;
+  height: 90px;
+  align-items: end;
 }
 
 header::after {
   content: "";
   top: 0;
-  left: -40px;
+  left: -45px;
   position: absolute;
   background-color: #003e79;
   height: 100%;
-  width: 30%;
-  min-width: 300px;
+  min-width: 350px;
   transform: skew(45deg);
-  z-index: 1;
+  z-index: 2;
 }
 
 header::before {
   content: "";
   top: 0;
-  left: -20px;
+  left: -25px;
   position: absolute;
   background-color: rgb(1, 92, 184);
   height: 100%;
-  width: 30%;
-  min-width: 300px;
+  width: 10%;
+  min-width: 350px;
   transform: skew(45deg);
-  z-index: 1;
+  z-index: 2;
 }
 
 footer {
@@ -88,7 +86,6 @@ footer p {
 .mainContainer {
   position: relative;
   display: grid;
-  grid-template-rows: auto 1fr;
   align-items: center;
   justify-items: center;
   height: 100%;
@@ -588,10 +585,6 @@ table td:last-child {
     border-radius: 0;
   }
 
-  .mainContainer {
-    grid-template-rows: 40px 1fr;
-  }
-
   .img {
     background-image: url("/rock.jpg");
     right: 50%;

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Poppins } from "next/font/google";
+import { Inter } from "next/font/google";
 
 import Header from "./Components/layout/Header/Header";
 import Footer from "./Components/layout/Footer/Footer";
@@ -7,11 +7,7 @@ import Footer from "./Components/layout/Footer/Footer";
 import "./globals.css";
 import { ToastProvider } from "./Components/layout/ToastProvider";
 
-const poppins = Poppins({
-  variable: "--font-poppins",
-  subsets: ["latin"],
-  weight: ["400", "600", "700"],
-});
+const inter = Inter({ subsets: ["latin"], weight: ["400", "700"] });
 
 export const metadata: Metadata = {
   title: "Servicio AT",
@@ -27,7 +23,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="es">
-      <body className={poppins.variable} suppressHydrationWarning>
+      <body className={inter.className}>
         <ToastProvider>
           <Header />
           <main>{children}</main>