git added new style , little style

app/Components/Global/table.module.css

@@ -44,6 +44,11 @@
   margin-right: 6px;
   vertical-align: middle;
 }
+@media(max-height:550px) {
+  .tableContainer {
+    margin-top: 1.5rem;
+  }
+}
 
 @media(max-width:800px) {
   .tableContainer {

app/Components/Selection/Selection.css

@@ -15,6 +15,10 @@
 }
 
 .buttonSelection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
   width: 50px;
   height: 50px;
   border-radius: 100%;
@@ -24,6 +28,13 @@
   padding: 5px;
 }
 
+.imageSelection {
+  width: 30px;
+  height: 30px;
+  position: relative;
+  object-fit: contain;
+}
+
 .buttonSelection:hover {
   transform: scale(1.1);
   background-color: #d0e1ff;
@@ -41,3 +52,31 @@
   color: #333;
   text-align: center;
 }
+
+@media(max-height:550px) {
+  .buttonLabel {
+    margin-top: 2px;
+    font-size: 1rem;
+  }
+}
+
+@media(max-height:550px) {
+  .selection {
+    margin-bottom: 0rem;
+    gap: 2rem;
+
+  }
+
+  .buttonSelection {
+    width: 40px;
+    height: 40px;
+    padding: 0px;
+  }
+
+  .imageSelection {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    object-fit: contain;
+  }
+}

app/Components/Selection/Selection.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import "./Selection.css";
+import Image from "next/image";
 
 export default function Selection({
   plataformasInscritas = [],
@@ -24,11 +25,11 @@ export default function Selection({
     },
     {
       name: "MACINTOSH",
-      img: "apple.png",
+      img: "/apple.png",
     },
     {
       name: "PROFESORES",
-      img: "teacher.png",
+      img: "/teacher.png",
     },
   ];
 
@@ -45,16 +46,16 @@ export default function Selection({
           onClick={() => handleSelect(option.name)}
         >
           <button
-            className={`buttonSelection ${
-              selected === option.name ? "active" : ""
-            }`}
+            className={`buttonSelection ${selected === option.name ? "active" : ""
+              }`}
           >
-            <img
-              src={option.img}
-              alt={option.name.toLowerCase()}
-              height={30}
-              width={30}
-            />
+            <div className="imageSelection">
+              <Image
+                src={option.img}
+                alt={option.name.toLowerCase()}
+                fill
+              />
+            </div>
           </button>
           <span className="buttonLabel">{option.name}</span>
         </div>

app/Components/Selection/SelectionCo.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import "./Selection.css";
+import Image from "next/image";
 
 export default function SelectionCo({
   plataformasInscritas = [],
@@ -46,16 +47,16 @@ export default function SelectionCo({
           onClick={() => handleSelect(option.name)}
         >
           <button
-            className={`buttonSelection ${
-              selected === option.name ? "active" : ""
-            }`}
+            className={`buttonSelection ${selected === option.name ? "active" : ""
+              }`}
           >
-            <img
-              src={option.img}
-              alt={option.name.toLowerCase()}
-              height={30}
-              width={30}
-            />
+            <div className="imageSelection">
+              <Image
+                src={option.img}
+                alt={option.name.toLowerCase()}
+                fill
+              />
+            </div>
           </button>
           <span className="buttonLabel">{option.name}</span>
         </div>

app/Components/auth/Logout/Logout.css

@@ -10,7 +10,7 @@
   background-color: #d12020;
 }
 
-.session{
+.session {
   position: absolute;
   top: 10px;
   right: 10px;
@@ -19,18 +19,18 @@
   gap: 2rem;
 }
 
-.userName{
+.userName {
   background-color: white;
   border-radius: 6px;
   padding: 6px 12px;
   z-index: 1;
 }
 
-@media(max-width: 1000px){
-  .session{
-  top: 5px;
-  right: 5px;
-}
+@media(max-height: 550px) {
+  .session {
+    top: 5px;
+    right: 5px;
+  }
 }
 
 @media (max-width: 800px) {
@@ -64,16 +64,17 @@
     transform: translate(0, -50%);
   }
 
-  .userName{
+  .userName {
     position: absolute;
     top: 0px;
     right: 50px;
   }
 }
-@media(max-width:450px){
-  .userName{
+
+@media(max-width:450px) {
+  .userName {
     position: absolute;
     top: 50px;
     right: 0px;
   }
-}
+}

app/Components/layout/BarNavigation/BarNavigation.css

@@ -137,6 +137,13 @@ tbody {
   font-size: 1.25rem;
 }
 
+@media(max-height:550px) {
+  .barNavigation {
+    height: 25px;
+    max-height: 35px;
+  }
+}
+
 @media (min-width: 1001px) {
   .subMenu:hover ul {
     opacity: 1;

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

@@ -1,3 +1,9 @@
+.link {
+  display: flex;
+  align-items: center;
+  margin: 10px 5px;
+}
+
 .logo {
   position: relative;
   z-index: 3;
@@ -86,15 +92,50 @@
   max-height: 60%;
 }
 
+@media (max-height: 550px) {
+  .containerBarNav {
+    max-height: 70%;
+  }
+
+  .yellowPart {
+    height: 15px;
+  }
+
+  .logoContainer {
+    min-width: 150px;
+    aspect-ratio: 250/70;
+  }
+
+  .link {
+    display: flex;
+    align-items: center;
+    margin: 5px 2px;
+  }
+
+  .header::after {
+    left: -60px;
+    min-width: 300px;
+  }
+
+  .header::before {
+    left: -40px;
+    width: 10%;
+    min-width: 300px;
+  }
+
+}
+
 @media (max-width: 800px) {
   .yellowPart {
     left: 0;
     background: #bd8c01;
     transform: skew(0deg);
   }
+
   .header::after {
     left: -100px;
   }
+
   .header::before {
     left: -80px;
   }
@@ -105,11 +146,13 @@
     min-width: 100%;
     transform: skew(25deg);
   }
+
   .header::before {
     min-width: 100%;
     transform: skew(25deg);
   }
+
   .containerBarNav {
     padding-left: 0;
   }
-}
+}

app/Components/layout/Header/Header.tsx

@@ -27,8 +27,7 @@ export default async function Header() {
       <Link
         href="https://www.unam.mx/"
         target="_blank"
-        className={header.center}
-        style={{ display: "flex", alignItems: "center", margin: "10px 5px" }}
+        className={`${header.center} ${header.link}`}
       >
         <div className={header.logoContainer}>
           <Image