Modified Alerts

app/(private)/Alta/page.tsx

@@ -11,7 +11,7 @@ export default function Page() {
       <h1 className="title">ALTA</h1>
 
       <StepNavigator totalSteps={2} onFinish={() => console.log()}>
-        <form className="containerForm">
+        <form className="containerForm gap">
           <label className="label">No.Cuenta</label>
           <input
             type="text"
@@ -44,7 +44,7 @@ export default function Page() {
             placeholder="Coloca el apellido materno"
           />
         </form>
-        <form>
+        <form className="gap">
           <label className="label">Email</label>
           <input
             type="text"

app/(private)/Impresiones/page.tsx

@@ -7,7 +7,6 @@ import AlertBox from "@/app/Components/AlertBox/AlertBox";
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "@/app/globals.css";
-
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;
@@ -34,7 +33,9 @@ export default async function Page(props: {
   return (
     <section className="containerSection">
       {showError && (
-        <AlertBox key={Date.now()} message={showError} type="error" />
+        <>
+          <AlertBox key={Date.now()} message={showError} type="error" />
+        </>
       )}
 
       {showSuccess && (

app/(private)/Programas/page.tsx

@@ -62,7 +62,7 @@ export default function Page() {
           <div className="margin">
             <button className="button buttonSearch">Guardar</button>
             <button
-              className={`button buttonSearch ${styleprograms.button}`}
+              className={`button buttonCancel ${styleprograms.button}`}
               onClick={handleCancelar}
             >
               Cancelar
@@ -79,7 +79,7 @@ export default function Page() {
           <div className="margin">
             <button className="button buttonSearch">Insertar</button>
             <button
-              className={`button buttonSearch ${styleprograms.button}`}
+              className={`button buttonCancel ${styleprograms.button}`}
               onClick={handleCancelar}
             >
               Cancelar

app/Components/AlertBox/AlertBox.css

@@ -1,4 +1,3 @@
-/* Animaciones */
 @keyframes slideInLeft {
   0% {
     opacity: 0;

app/Components/ChangePassword/changePassword.tsx

@@ -61,7 +61,7 @@ export default function ChangePassword() {
           </button>
 
           <button
-            className="button buttonSearch"
+            className="button buttonCancel"
             style={{ maxWidth: "100%", width: "100%" }}
             type="submit"
           >

app/Components/ClearParams/ClearParams.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ClearParamsProps {
+  paramsToClear: string[];
+}
+
+export default function ClearParams({ paramsToClear }: ClearParamsProps) {
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    let changed = false;
+
+    paramsToClear.forEach((param) => {
+      if (url.searchParams.has(param)) {
+        url.searchParams.delete(param);
+        changed = true;
+      }
+    });
+
+    if (changed) {
+      window.history.replaceState({}, "", url.toString());
+    }
+  }, [paramsToClear]);
+
+  return null;
+}

app/Components/visual/GlobalAlert.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import AlertBox from "@/app/Components/AlertBox/AlertBox";
+import ClearParams from "@/app/Components/ClearParams/ClearParams";
+
+export default function GlobalAlert() {
+  const [showSuccess, setShowSuccess] = useState<string | null>(null);
+  const [showError, setShowError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    const success = url.searchParams.get("success");
+    const error = url.searchParams.get("error");
+
+    if (success) setShowSuccess(success);
+    if (error) setShowError(error);
+  }, []);
+
+  return (
+    <section className="containerAlerts">
+      {showError && (
+        <>
+          <AlertBox key={Date.now()} message={showError} type="error" />
+          <ClearParams paramsToClear={["error"]} />
+        </>
+      )}
+
+      {showSuccess && (
+        <>
+          <AlertBox key={Date.now()} message={showSuccess} type="success" />
+          <ClearParams paramsToClear={["success"]} />
+        </>
+      )}
+    </section>
+  );
+}

app/globals.css

@@ -26,6 +26,10 @@ body {
   overflow: hidden;
 }
 
+main {
+  position: relative;
+}
+
 header {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -215,6 +219,14 @@ button {
   background-color: #15803d;
 }
 
+.buttonCancel {
+  background-color: #d32f2f;
+}
+
+.buttonCancel:hover {
+  background-color: #d12020;
+}
+
 .absoluteButton {
   position: absolute;
   bottom: 1rem;
@@ -406,6 +418,12 @@ table tr {
   width: 300px;
 }
 
+.containerAlert {
+  position: absolute;
+  background-color: #003e79;
+  z-index: 10;
+}
+
 @media (max-width: 1330px) {
   .mainContainer {
     grid-template-rows: 60px 1fr;

app/layout.tsx

@@ -2,10 +2,9 @@ import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import Header from "./Components/Header/Header";
 import Footer from "./Components/Footer/Footer";
-import FallingSquares from "./Components/visual/FallingSquares/FallingSquares";
-import WavesBackground from "./Components/visual/Wave/wavesBack";
 
 import "./globals.css";
+import GlobalAlert from "./Components/visual/GlobalAlert";
 
 const poppins = Poppins({
   variable: "--font-poppins",