From 5ddb758a0408c2039855fb1259a1f523f900ed41 Mon Sep 17 00:00:00 2001
From: Bojay Liu <189326887+BojayL@users.noreply.github.com>
Date: Sat, 20 Jun 2026 01:13:33 +0800
Subject: [PATCH] Update dashboard shell with Tailwind

---
 .../Navbar/LinkNavbar/LinkNavbar.module.css   | 43 ----------
 .../components/Navbar/LinkNavbar/index.jsx    |  8 +-
 .../Navbar/MenuNavbar/MenuNavbar.module.css   | 59 --------------
 .../components/Navbar/MenuNavbar/index.jsx    | 45 +++++++----
 .../src/components/Navbar/Navbar.module.css   | 81 -------------------
 frontend/src/components/Navbar/index.jsx      | 49 +++++++----
 .../src/views/Dashboard/Dashboard.module.css  | 77 ------------------
 frontend/src/views/Dashboard/index.jsx        | 30 ++++---
 8 files changed, 86 insertions(+), 306 deletions(-)
 delete mode 100644 frontend/src/components/Navbar/LinkNavbar/LinkNavbar.module.css
 delete mode 100644 frontend/src/components/Navbar/MenuNavbar/MenuNavbar.module.css
 delete mode 100644 frontend/src/components/Navbar/Navbar.module.css
 delete mode 100644 frontend/src/views/Dashboard/Dashboard.module.css

diff --git a/frontend/src/components/Navbar/LinkNavbar/LinkNavbar.module.css b/frontend/src/components/Navbar/LinkNavbar/LinkNavbar.module.css
deleted file mode 100644
index e684103..0000000
--- a/frontend/src/components/Navbar/LinkNavbar/LinkNavbar.module.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.link-0 {
-    background-color: #00000000;
-    color: #ffffff;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 10px;
-    border: 0px;
-    border-radius: 100px;
-    margin-right: 32px;
-    font-family: 'SourceSansPro-Regular', serif;
-    font-size: 14px;
-}
-.link-0:hover {
-    cursor: pointer;
-}
-.link-1 {
-    background-color: #335065;
-    color: #ffffff;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 10px;
-    border: 0px;
-    border-radius: 100px;
-    margin-right: 32px;
-    font-family: 'SourceSansPro-Regular', serif;
-    font-size: 14px;
-}
-@media only screen and (max-width: 800px) {
-    .link-0 {
-        margin-left: 16px;
-        margin-right: 0px;
-        font-size: 20px;
-        padding: 14.8px;
-    }
-    .link-1 {
-        margin-left: 16px;
-        margin-right: 0px;
-        font-size: 20px;
-        padding: 14.8px;
-    }
-}
diff --git a/frontend/src/components/Navbar/LinkNavbar/index.jsx b/frontend/src/components/Navbar/LinkNavbar/index.jsx
index d834af2..68d6da9 100644
--- a/frontend/src/components/Navbar/LinkNavbar/index.jsx
+++ b/frontend/src/components/Navbar/LinkNavbar/index.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-//styles
-import Styles from './LinkNavbar.module.css';
 
 const LinkNavbar = ({ to, text, close, path = '' }) => {
     const navigate = useNavigate();
     const { pathname } = useLocation();
+    const active = `/${path}/${to}` === pathname;
     const handlerClicks = () => {
         navigate(`/${path}/${to}`);
         if (close) {
@@ -14,8 +13,11 @@ const LinkNavbar = ({ to, text, close, path = '' }) => {
     };
     return (
         <button
-            className={Styles[`link-${`/dashboard/${to}` === pathname ? '1' : '0'}`]}
+            className={`mr-8 flex items-start rounded-full border-0 px-2.5 py-2.5 text-sm text-white max-[800px]:ml-4 max-[800px]:mr-0 max-[800px]:p-[14.8px] max-[800px]:text-xl ${
+                active ? 'bg-[#335065]' : 'bg-transparent'
+            }`}
             onClick={handlerClicks}
+            type="button"
         >
             {text}
         </button>
diff --git a/frontend/src/components/Navbar/MenuNavbar/MenuNavbar.module.css b/frontend/src/components/Navbar/MenuNavbar/MenuNavbar.module.css
deleted file mode 100644
index 4b5b62b..0000000
--- a/frontend/src/components/Navbar/MenuNavbar/MenuNavbar.module.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.main {
-    display: none;
-}
-.close {
-    margin-top: 35px;
-    margin-right: 16px;
-    width: 32px;
-    height: 32px;
-}
-.head {
-    height: 96px;
-    display: flex;
-    justify-content: space-between;
-}
-.title {
-    font-family: 'SourceSansPro-Bold', serif;
-    color: #ffffff;
-    font-size: 32px;
-    margin-top: 32px;
-    margin-left: 16px;
-}
-.options {
-    height: calc(100% - 208px);
-    overflow-y: auto;
-}
-.footer {
-    width: 100%;
-    height: 112px;
-}
-.footer-option {
-    display: flex;
-    width: min-content;
-    padding-right: 10px;
-    align-items: center;
-    margin-left: 31px;
-    margin-bottom: 32px;
-}
-.footer-option p {
-    font-size: 14px;
-}
-.icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    color: #ffffff;
-}
-@media only screen and (max-width: 800px) {
-    .main {
-        display: flex;
-        flex-direction: column;
-        position: fixed;
-        background-color: #7291a0;
-        color: #ffffff;
-        width: 80%;
-        height: 100%;
-        z-index: 100;
-        overflow: hidden;
-    }
-}
diff --git a/frontend/src/components/Navbar/MenuNavbar/index.jsx b/frontend/src/components/Navbar/MenuNavbar/index.jsx
index 185e19b..80d12c3 100644
--- a/frontend/src/components/Navbar/MenuNavbar/index.jsx
+++ b/frontend/src/components/Navbar/MenuNavbar/index.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-//styles
-import Styles from './MenuNavbar.module.css';
 //actions
 import { logOut } from './../../../redux/actions/auth';
 //icons
@@ -23,16 +21,25 @@ const MenuNavbar = ({ setMenu, options = [], path = '' }) => {
         setMenu(false);
     };
     const handleSetting = () => {
-        navigate('setting');
+        navigate(`/${path}/setting`);
         setMenu(false);
     };
     return (
-        <div className={Styles[`main`]}>
-            <div className={Styles[`head`]}>
-                <p className={Styles[`title`]}>Menu</p>{' '}
-                <RxCross2 onClick={handleClose} className={Styles[`close`]} />
+        <div className="fixed left-0 top-0 z-[100] flex h-full w-4/5 flex-col overflow-hidden bg-[#7291a0] text-white min-[801px]:hidden">
+            <div className="flex h-24 justify-between">
+                <p className="ml-4 mt-8 text-[32px] [font-family:'SourceSansPro-Bold',serif]">
+                    Menu
+                </p>
+                <button
+                    className="mr-4 mt-[35px] border-0 bg-transparent p-0 text-white"
+                    onClick={handleClose}
+                    type="button"
+                    aria-label="Cerrar menu"
+                >
+                    <RxCross2 className="h-8 w-8" aria-hidden="true" />
+                </button>
             </div>
-            <div className={Styles[`options`]}>
+            <div className="h-[calc(100%-208px)] overflow-y-auto">
                 {options.map((link, index) => {
                     return link.permissions.every((permission) =>
                         user.permissions.includes(permission)
@@ -47,15 +54,23 @@ const MenuNavbar = ({ setMenu, options = [], path = '' }) => {
                     ) : null;
                 })}
             </div>
-            <div className={Styles[`footer`]}>
-                <div className={Styles[`footer-option`]} onClick={handleSetting}>
-                    <AiOutlineSetting className={Styles[`icon`]} />
+            <div className="h-28 w-full">
+                <button
+                    className="mb-8 ml-[31px] flex w-min items-center border-0 bg-transparent pr-2.5 text-white"
+                    onClick={handleSetting}
+                    type="button"
+                >
+                    <AiOutlineSetting className="mr-2 h-6 w-6 text-white" aria-hidden="true" />
                     <p>Configuración</p>
-                </div>
-                <div className={Styles[`footer-option`]} onClick={handleLogOut}>
-                    <TbLogout className={Styles[`icon`]} />
+                </button>
+                <button
+                    className="mb-8 ml-[31px] flex w-min items-center border-0 bg-transparent pr-2.5 text-white"
+                    onClick={handleLogOut}
+                    type="button"
+                >
+                    <TbLogout className="mr-2 h-6 w-6 text-white" aria-hidden="true" />
                     <p>Logout</p>
-                </div>
+                </button>
             </div>
         </div>
     );
diff --git a/frontend/src/components/Navbar/Navbar.module.css b/frontend/src/components/Navbar/Navbar.module.css
deleted file mode 100644
index 6666f8b..0000000
--- a/frontend/src/components/Navbar/Navbar.module.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.main {
-    width: 100%;
-    height: 96px;
-    background-color: #233d54;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.navbar {
-    width: 90%;
-    margin-top: auto;
-    margin-bottom: 16px;
-    color: #ebf3f7;
-    font-family: 'SourceSansPro-Regular', serif;
-    max-width: 1236px;
-    font-size: 14px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-.menu-left {
-    display: flex;
-    align-items: center;
-}
-.menu-left-option {
-    display: flex;
-}
-.menu-mobile {
-    display: none;
-}
-.logo {
-    width: 132px;
-    margin-right: 54px;
-    user-select: none;
-}
-.logo:hover {
-    cursor: pointer;
-}
-.menu-right {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-.link {
-    color: #ebf3f7;
-    text-decoration: none;
-    font-family: 'SourceSansPro-Regular', serif;
-    margin-right: 32px;
-}
-.link:hover {
-    cursor: pointer;
-}
-.logout {
-    color: #ebf3f7;
-    text-decoration: none;
-    font-family: 'SourceSansPro-Regular', serif;
-}
-.logout:hover {
-    cursor: pointer;
-}
-@media only screen and (max-width: 800px) {
-    .main {
-        height: 60px;
-    }
-    .navbar {
-        margin: auto;
-    }
-    .menu-mobile {
-        display: block;
-        width: 30px;
-        height: 30px;
-    }
-    .menu-right {
-        display: none;
-    }
-    .menu-left-option {
-        display: none;
-    }
-}
diff --git a/frontend/src/components/Navbar/index.jsx b/frontend/src/components/Navbar/index.jsx
index 90f5a22..22793a7 100644
--- a/frontend/src/components/Navbar/index.jsx
+++ b/frontend/src/components/Navbar/index.jsx
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, Link } from 'react-router-dom';
-//styles
-import Styles from './Navbar.module.css';
 //components
 import LinkNavbar from './LinkNavbar';
 import MenuNavbar from './MenuNavbar';
@@ -22,16 +20,22 @@ const Navbar = ({ options = [], path = '' }) => {
     return (
         <>
             {menu && <MenuNavbar setMenu={setMenu} options={options} path={path} />}
-            <div className={Styles[`main`]}>
-                <div className={Styles[`navbar`]}>
-                    <div className={Styles[`menu-left`]}>
-                        <img
-                            className={Styles[`logo`]}
-                            src="/images/logo-core-code.png"
-                            alt="core code"
+            <div className="flex h-24 w-full items-center justify-center bg-[#233d54] max-[800px]:h-[60px]">
+                <div className="mb-4 mt-auto flex w-[90%] max-w-[1236px] items-center justify-between text-sm text-[#ebf3f7] [font-family:'SourceSansPro-Regular',serif] max-[800px]:m-auto">
+                    <div className="flex items-center">
+                        <button
+                            className="mr-[54px] w-[132px] shrink-0 border-0 bg-transparent p-0"
                             onClick={() => navigate('/dashboard')}
-                        />
-                        <div className={Styles[`menu-left-option`]}>
+                            type="button"
+                            aria-label="Ir al dashboard"
+                        >
+                            <img
+                                className="w-full select-none"
+                                src="/images/logo-core-code.png"
+                                alt="core code"
+                            />
+                        </button>
+                        <div className="flex max-[800px]:hidden">
                             {options.map((link, index) => {
                                 return link.permissions.every((permission) =>
                                     user.permissions.includes(permission)
@@ -46,23 +50,34 @@ const Navbar = ({ options = [], path = '' }) => {
                             })}
                         </div>
                     </div>
-                    <div className={Styles[`menu-right`]}>
+                    <div className="flex items-center justify-center max-[800px]:hidden">
                         {user.permissions &&
                             ['read:dashboard'].every((permission) =>
                                 user.permissions.includes(permission)
                             ) && (
-                                <Link className={Styles[`link`]} to="/admin">
+                                <Link className="mr-8 text-[#ebf3f7] no-underline" to="/admin">
                                     Admin
                                 </Link>
                             )}
-                        <Link className={Styles[`link`]} to="setting">
+                        <Link className="mr-8 text-[#ebf3f7] no-underline" to="setting">
                             Configuración
                         </Link>
-                        <p className={Styles[`logout`]} onClick={handleLogOut}>
+                        <button
+                            className="border-0 bg-transparent p-0 text-[#ebf3f7]"
+                            onClick={handleLogOut}
+                            type="button"
+                        >
                             Logout
-                        </p>
+                        </button>
                     </div>
-                    <BiMenu className={Styles[`menu-mobile`]} onClick={() => setMenu(true)} />
+                    <button
+                        className="hidden border-0 bg-transparent p-0 text-[#ebf3f7] max-[800px]:block"
+                        onClick={() => setMenu(true)}
+                        type="button"
+                        aria-label="Abrir menu"
+                    >
+                        <BiMenu className="h-[30px] w-[30px]" aria-hidden="true" />
+                    </button>
                 </div>
             </div>
         </>
diff --git a/frontend/src/views/Dashboard/Dashboard.module.css b/frontend/src/views/Dashboard/Dashboard.module.css
deleted file mode 100644
index 539ee2d..0000000
--- a/frontend/src/views/Dashboard/Dashboard.module.css
+++ /dev/null
@@ -1,77 +0,0 @@
-.main-0 {
-    width: 100%;
-    min-height: calc(100% - 174px);
-    background-color: #ffffff;
-    overflow-y: auto;
-}
-.main-1 {
-    width: 100%;
-    min-height: calc(100% - 144px);
-    background-color: #ffffff;
-    overflow-y: auto;
-}
-.validate-information {
-    background-color: #d83341;
-    color: #ffffff;
-    font-family: 'SourceSansPro-SemiBold', serif;
-    font-size: 14px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 30px;
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-}
-.validate-icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 6px;
-}
-.validate-icon:hover {
-    cursor: pointer;
-}
-.container {
-    width: 90%;
-    max-width: 1236px;
-    margin: auto;
-    height: 100%;
-    min-height: 100%;
-    color: #0f1f39;
-}
-.container-component {
-    width: calc(100% - 250px);
-    height: 100%;
-    overflow: auto;
-}
-@media only screen and (max-width: 1440px) and (min-width: 1281px) {
-}
-@media only screen and (max-width: 1280px) and (min-width: 801px) {
-}
-@media only screen and (max-width: 800px) {
-    .container-component {
-        width: 100%;
-    }
-    .validate-information {
-        font-size: 13px;
-        height: 56px;
-    }
-    .validate-icon {
-        width: 26px;
-        height: 26px;
-        margin-right: 6px;
-        margin-left: 6px;
-    }
-    .main-1 {
-        width: 100%;
-        min-height: calc(100% - 108px);
-        background: #ffffff;
-        overflow-y: auto;
-    }
-    .main-0 {
-        width: 100%;
-        min-height: calc(100% - 164px);
-        background: #ffffff;
-        overflow-y: auto;
-    }
-}
diff --git a/frontend/src/views/Dashboard/index.jsx b/frontend/src/views/Dashboard/index.jsx
index 5b400ed..36c8551 100644
--- a/frontend/src/views/Dashboard/index.jsx
+++ b/frontend/src/views/Dashboard/index.jsx
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-//styles
-import Styles from './Dashboard.module.css';
 //components
 import Navbar from '../../components/Navbar';
 import Footer from './../../components/Footer';
@@ -12,6 +10,7 @@ import { IoCloseCircleOutline } from 'react-icons/io5';
 const Dashboard = () => {
     const { user } = useSelector((state) => state.auth);
     const [alert, setAlert] = useState(true);
+    const showProfileAlert = (!user.first_name || !user.last_name) && alert;
     const options = [
         { to: 'my-courses', text: 'Mis Cursos', permissions: [] },
         { to: 'available-courses', text: 'Cursos Disponibles', permissions: [] },
@@ -21,22 +20,31 @@ const Dashboard = () => {
     return (
         <>
             <Navbar options={options} path="dashboard" />
-            {(!user.first_name || !user.last_name) && alert && (
-                <p className={Styles[`validate-information`]}>
-                    <IoCloseCircleOutline
-                        className={Styles[`validate-icon`]}
+            {showProfileAlert && (
+                <p className="mx-auto flex h-[30px] w-full items-center justify-center bg-[#d83341] text-sm text-white [font-family:'SourceSansPro-SemiBold',serif] max-[800px]:h-14 max-[800px]:px-3 max-[800px]:text-[13px]">
+                    <button
+                        className="mr-1.5 border-0 bg-transparent p-0 text-white max-[800px]:mx-1.5"
                         onClick={() => setAlert(false)}
-                    />
+                        type="button"
+                        aria-label="Cerrar alerta"
+                    >
+                        <IoCloseCircleOutline
+                            className="h-5 w-5 max-[800px]:h-[26px] max-[800px]:w-[26px]"
+                            aria-hidden="true"
+                        />
+                    </button>
                     Recuerda que para utilizar la plataforma es necesario completar algunos datos en
                     configuración y validar tu correo electrónico.
                 </p>
             )}
             <div
-                className={
-                    Styles[`main-${(!user.first_name || !user.last_name) && alert ? '0' : '1'}`]
-                }
+                className={`w-full overflow-y-auto bg-white ${
+                    showProfileAlert
+                        ? 'min-h-[calc(100%_-_174px)] max-[800px]:min-h-[calc(100%_-_164px)]'
+                        : 'min-h-[calc(100%_-_144px)] max-[800px]:min-h-[calc(100%_-_108px)]'
+                }`}
             >
-                <div className={Styles[`container`]}>
+                <div className="mx-auto h-full min-h-full w-[90%] max-w-[1236px] text-[#0f1f39]">
                     <Outlet />
                 </div>
             </div>