added new animations

app/(private)/layout.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-import { PrivateRoute } from "../Routes/PrivateRoute";
 import BarNavigation from "../Components/BarNavigation/BarNavigation";
 import Logout from "../Components/Logout/Logout";
 
@@ -8,7 +7,7 @@ export default function PrivateLayout({ children }: { children: ReactNode }) {
     <div className="mainContainer">
       <BarNavigation />
       <div className="container">
-        <Logout/>
+        <Logout />
         <div className="img"></div>
         {children}
       </div>

app/Components/AlertBox/AlertBox.css

@@ -1,3 +1,26 @@
+/* Animaciones */
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 0.9;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    opacity: 0.9;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
 .messageBox {
   display: flex;
   position: absolute;
@@ -6,20 +29,20 @@
   font-weight: bold;
   font-size: 2rem;
   text-align: center;
-  opacity: 1;
   z-index: 100;
   top: 0;
   left: 0;
-  width: 100%;
+  max-width: 500px;
   max-height: min-content;
-  opacity: 0.9;
-  transition: opacity 0.5s ease, transform 0.5s ease;
+  opacity: 0;
+}
+
+.messageBox:not(.hidden) {
+  animation: slideInLeft 0.5s ease forwards;
 }
 
 .messageBox.hidden {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 1s ease-out,transform 0.5 ease;
+  animation: slideOutRight 0.5s ease forwards;
 }
 
 .success {
@@ -32,4 +55,4 @@
   background-color: #ffcdd2;
   color: #000000;
   border: 1px solid #ef9a9a;
-}
+}

app/Components/BarNavigation/BarNavigation.css

@@ -62,13 +62,19 @@
 }
 
 .subMenu ul {
-  display: none;
+  opacity: 0;
+  max-height: 0;
   position: absolute;
   flex-direction: column;
   top: 100%;
   width: 100%;
   background-color: #003e79;
-  transition: color 0.3s ease, opacity 0.3s ease;
+  transition: color 0.3s ease;
+  transition: opacity 0.4s ease, max-height 0.4s ease;
+}
+
+.subMenu ul a {
+  display: none;
 }
 
 .subMenu.open ul {
@@ -81,6 +87,11 @@
 }
 
 .subMenu:hover ul {
+  opacity: 1;
+  max-height: 500px;
+}
+
+.subMenu:hover ul a {
   display: flex;
 }
 

app/Components/ChangePassword/changePassword.tsx

@@ -42,7 +42,7 @@ export default function ChangePassword() {
         <div className="containerInput relative">
           <label className="label">Confirmar la contraña</label>
           <input
-            placeholder="Coloca tu contraseña..."
+            placeholder="Coloca tu nueva contraseña..."
             value={confirmNewPass}
             onChange={(e) => {
               setconfirmNewPass(e.target.value);

app/Components/Header/Header.module.css

@@ -26,10 +26,16 @@
   content: "";
   top: 0;
   left: -20px;
-  width: 50%;
+  width: 65%;
   height: 100%;
   min-width: 300px;
-  background: #bd8c01;
+  background: linear-gradient(to right, #bd8c01, #f9f9f9);
   transform: skew(-45deg);
   z-index: 0;
 }
+
+@media (max-width: 800px) {
+  .yellowPart {
+    background: #bd8c01;
+  }
+}

app/Components/Impressions/impressions.tsx

@@ -84,7 +84,7 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
         <div className="groupInput">
           <label className="label">Costo:</label>
           <select value={cost} onChange={(e) => setCost(e.target.value)}>
-            <option value="">-- Selecciona un tiempo --</option>
+            <option value="">Selecciona el costo</option>
             {costs.map((c) => (
               <option key={c.value} value={c.value}>
                 ${c.value}

app/Components/Login/Login.tsx

@@ -24,10 +24,10 @@ function Login() {
     } else {
       const token = data.access_token;
       const payload = JSON.parse(atob(token.split(".")[1]));
-      const id_usuario = payload.id;
+      const usuario = payload.usuario;
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
-      document.cookie = `id_usuario=${id_usuario}; path=/; SameSite=Strict`;
+      document.cookie = `usuario=${usuario}; path=/; SameSite=Strict`;
 
       setAlert("Inicio de sesión exitoso");
       router.push("/Impresiones");

app/Components/Logout/Logout.css

@@ -23,8 +23,8 @@
     content: "";
     border: 3px solid white;
     border-radius: 2px;
-    height: 15px;
-    width: 15px;
+    height: 2rem;
+    width: 2rem;
     position: absolute;
     left: 50%;
     top: 50%;
@@ -36,7 +36,7 @@
     border: 2px solid white;
     border-radius: 1px;
     height: 0px;
-    width: 10px;
+    width: 1.5rem;
     position: absolute;
     left: 50%;
     top: 50%;

app/Components/Receipt/Receipt.tsx

@@ -93,7 +93,7 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
                 setFolio(value);
               }
             }}
-            placeholder="Numero de folio..."
+            placeholder="Numero de tiket..."
             inputMode="numeric"
             pattern="[0-9]*"
           />

app/globals.css

@@ -90,6 +90,17 @@ footer p {
   width: 100%;
 }
 
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -108,6 +119,7 @@ footer p {
   overflow: hidden;
   background-color: #f9f9f9;
   z-index: 0;
+  animation: fadeInUp 1s ease forwards;
 }
 
 .containerSection {
@@ -129,7 +141,7 @@ footer p {
   right: 0;
   width: 725px;
   height: 615px;
-  background-image: url("https://www.acatlan.unam.mx/images/fes_05.jpg");
+  background-image: url("/rock2.jpg");
   background-size: cover;
   background-position: center;
   overflow: hidden;
@@ -523,7 +535,7 @@ table tr {
 
 @media (max-width: 450px) {
   .title {
-    max-width: 300px;
+    max-width: 250px;
     overflow-wrap: break-word;
   }
 }