From 0877e042c1fb499955eb63c7621f1bc0567e72e2 Mon Sep 17 00:00:00 2001
From: Bojay Liu <189326887+BojayL@users.noreply.github.com>
Date: Mon, 22 Jun 2026 12:03:31 +0800
Subject: [PATCH] Update available courses view with Tailwind

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

diff --git a/frontend/src/views/Dashboard/AvailableCourses/index.jsx b/frontend/src/views/Dashboard/AvailableCourses/index.jsx
index 636fea2..a878090 100644
--- a/frontend/src/views/Dashboard/AvailableCourses/index.jsx
+++ b/frontend/src/views/Dashboard/AvailableCourses/index.jsx
@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import axios from 'axios';
 import { useSelector, useDispatch } from 'react-redux';
-//styles
-import Styles from './../Grid.module.css';
 //actions
 import { logOut } from './../../../redux/actions/auth';
 //components
@@ -31,10 +29,10 @@ const AvailableCourses = () => {
     return (
         <>
             <Outlet />
-            <div className={Styles[`main`]}>
+            <div className="grid w-full max-w-[342px] grid-cols-1 gap-6 pb-6 pt-[30px] md:max-w-none 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="min-w-0 w-full">
                             <CourseCard
                                 data={course}
                                 text="Aplica"
diff --git a/frontend/src/views/Dashboard/CourseCard/index.jsx b/frontend/src/views/Dashboard/CourseCard/index.jsx
index a916c51..b2cd616 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="min-w-0 overflow-hidden 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="break-words text-sm text-[#335065]">
                         <strong>Dominarás:</strong> {data.technologies}
                     </p>
-                    <p className={Styles[`text`]}>
+                    <p className="break-words text-sm text-[#335065]">
                         <strong>Precio:</strong> {data.price}
                     </p>
-                    <p className={Styles[`text`]}>
+                    <p className="break-words 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-col gap-3 sm:flex-row sm:flex-wrap sm:justify-end">
                     {text2 && url2 && (
                         <button
-                            className={Styles[`button-details2`]}
+                            className="mt-4 w-full rounded border border-[#6254ff] bg-transparent px-4 py-3 text-base text-[#6254ff] transition hover:bg-[#6254ff]/10 sm:w-auto sm:px-6 sm:text-lg"
                             onClick={() => navigate(url2)}
+                            type="button"
                         >
                             {text2}
                         </button>
                     )}
                     {text && url && (
                         <button
-                            className={Styles[`button-details`]}
+                            className="w-full rounded border border-[#6254ff] bg-[#6254ff] px-4 py-3 text-base text-white transition hover:bg-[#5145d9] disabled:border-[#9f98ee] disabled:bg-[#9f98ee] sm:mt-4 sm:w-auto sm:px-6 sm:text-lg"
                             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>