From a21694f77ab618b60c1a1174f91ed1c578be0f7a Mon Sep 17 00:00:00 2001
From: Bojay Liu <189326887+BojayL@users.noreply.github.com>
Date: Sat, 20 Jun 2026 00:53:26 +0800
Subject: [PATCH] Update my courses view with Tailwind

---
 .../src/views/Dashboard/CourseCard/index.jsx  | 60 ++++++++++++-------
 .../src/views/Dashboard/MyCourses/index.jsx   |  6 +-
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/Dashboard/CourseCard/index.jsx b/frontend/src/views/Dashboard/CourseCard/index.jsx
index a916c51..d4aa0b5 100644
--- a/frontend/src/views/Dashboard/CourseCard/index.jsx
+++ b/frontend/src/views/Dashboard/CourseCard/index.jsx
@@ -1,6 +1,4 @@
 import React from 'react';
-//styles
-import Styles from './CourseCard.module.css';
 import { useNavigate } from 'react-router-dom';
 //icons
 import { TbAlertTriangle } from 'react-icons/tb';
@@ -9,50 +7,72 @@ const CourseCard = ({ data, text, url, text2, url2, subscribed = true }) => {
     const navigate = useNavigate();
     return (
         <>
-            <div className={Styles[`details`]}>
-                <p className={Styles[`title`]}>{data.title}</p>
-                <p className={Styles[`title`]}>{data.title_second}</p>
-                <p className={Styles[`title2`]}>{data.title_extra}</p>
-                <div className={Styles[`items`]}>
-                    <p>{data.type}</p>
-                    <p>{data.duration}</p>
-                    <p>Nivel {data.level}</p>
+            <div className="rounded-t border border-b-0 border-[#d1e0e7] bg-[#f5f9fb] px-4 py-6">
+                <p className="text-xl text-[#0d1e38] [font-family:'Rubik-Bold',serif] lg:text-[18.4px] xl:text-[19px] 2xl:text-xl">
+                    {data.title}
+                </p>
+                <p className="text-xl text-[#0d1e38] [font-family:'Rubik-Bold',serif] lg:text-[18.4px] xl:text-[19px] 2xl:text-xl">
+                    {data.title_second}
+                </p>
+                <p className="mb-3 text-xl text-[#0d1e38] [font-family:'Rubik-Regular',serif] lg:text-[18.4px] xl:text-[19px] 2xl:text-xl">
+                    {data.title_extra}
+                </p>
+                <div className="mb-6 flex flex-wrap gap-1">
+                    <p className="rounded-full bg-[#cadbe3] px-3 py-1.5 text-sm text-[#335065]">
+                        {data.type}
+                    </p>
+                    <p className="rounded-full bg-[#cadbe3] px-3 py-1.5 text-sm text-[#335065]">
+                        {data.duration}
+                    </p>
+                    <p className="rounded-full bg-[#cadbe3] px-3 py-1.5 text-sm text-[#335065]">
+                        Nivel {data.level}
+                    </p>
                 </div>
-                <div className={Styles[`texts`]}>
-                    <p className={Styles[`text`]}>
+                <div className="flex min-h-[90px] flex-col gap-2 lg:min-h-[100px] xl:min-h-[90px]">
+                    <p className="text-sm text-[#335065]">
                         <strong>Dominarás:</strong> {data.technologies}
                     </p>
-                    <p className={Styles[`text`]}>
+                    <p className="text-sm text-[#335065]">
                         <strong>Precio:</strong> {data.price}
                     </p>
-                    <p className={Styles[`text`]}>
+                    <p className="text-sm text-[#335065]">
                         <strong>Inicia:</strong> Al llegar a {data.minimum} aplicaciones daremos
                         fecha.
                     </p>
                 </div>
-                <div className={Styles[`buttons`]}>
+                <div className="flex w-full flex-wrap justify-end gap-3">
                     {text2 && url2 && (
                         <button
-                            className={Styles[`button-details2`]}
+                            className="mt-4 rounded border border-[#6254ff] bg-transparent px-6 py-3 text-lg text-[#6254ff] transition hover:bg-[#6254ff]/10"
                             onClick={() => navigate(url2)}
+                            type="button"
                         >
                             {text2}
                         </button>
                     )}
                     {text && url && (
                         <button
-                            className={Styles[`button-details`]}
+                            className="mt-4 rounded border border-[#6254ff] bg-[#6254ff] px-6 py-3 text-lg text-white transition hover:bg-[#5145d9] disabled:border-[#9f98ee] disabled:bg-[#9f98ee]"
                             onClick={() => navigate(url)}
                             disabled={!subscribed}
+                            type="button"
                         >
                             {text}
                         </button>
                     )}
                 </div>
             </div>
-            <div className={Styles[`bookings-${data.extra_alert ? '1' : '0'}`]}>
-                {data.extra_alert && <TbAlertTriangle className={Styles[`icon-alert`]} />}
-                <p className={Styles[`text2`]}>{`${
+            <div
+                className={`flex rounded-b border border-t-0 border-[#d1e0e7] px-2.5 ${
+                    data.extra_alert
+                        ? 'items-center bg-[#fee6da] py-[7px] text-[#d83341]'
+                        : 'bg-[#ebf3f7] py-2.5 text-[#0d1e38]'
+                }`}
+            >
+                {data.extra_alert && (
+                    <TbAlertTriangle className="mr-2.5 mt-1 h-5 w-5 shrink-0" aria-hidden="true" />
+                )}
+                <p className="text-sm [font-family:'SourceSansPro-Bold',serif]">{`${
                     data.extra_alert ? '¡Aplica ahora! ' : ''
                 }Reservas confirmadas: ${data.bookings}`}</p>
             </div>
diff --git a/frontend/src/views/Dashboard/MyCourses/index.jsx b/frontend/src/views/Dashboard/MyCourses/index.jsx
index f32c4af..583d638 100644
--- a/frontend/src/views/Dashboard/MyCourses/index.jsx
+++ b/frontend/src/views/Dashboard/MyCourses/index.jsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useDispatch } from 'react-redux';
-//styles
-import Styles from './../Grid.module.css';
 //actions
 import { logOut } from './../../../redux/actions/auth';
 //components
@@ -25,10 +23,10 @@ const MyCourses = () => {
         getData();
     }, []);
     return (
-        <div className={Styles[`main`]}>
+        <div className="grid w-full grid-cols-1 gap-6 pb-6 pt-[30px] md:grid-cols-2 md:pt-[45px] xl:grid-cols-3">
             {listCourses.map((course) => {
                 return (
-                    <div key={course.id} className={Styles[`course`]}>
+                    <div key={course.id} className="w-full">
                         <CourseCard
                             data={course}
                             text="Ver Curso"