Skip to content

Commit 260bff0

Browse files
NiconiKimgNiconiKimg
authored
Feat/gradient backgrounds layout improvements (#194)
* feat: add gradient backgrounds and remove conflicting styles from MainLayout * refactor: standardize max-width to 7xl across all pages for consistent layout
1 parent 83a62d1 commit 260bff0

27 files changed

Lines changed: 2480 additions & 2068 deletions

‎src/components/layouts/MainLayout.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
import { Outlet, useLocation } from 'react-router-dom';
1+
import { Outlet } from 'react-router-dom';
22
import { NavBar } from '../common/NavBar';
33
import { Footer } from '../common/Footer.tsx';
44

55
const MainLayout = () => {
6-
const location = useLocation();
7-
const isLandingPage = location.pathname === '/';
8-
96
return (
10-
<div className="flex flex-col min-h-screen bg-neutral-50">
7+
<div className="flex flex-col min-h-screen">
118
<NavBar />
12-
<main className={`flex-grow container mx-auto p-4 ${!isLandingPage ? 'pt-24' : ''}`}>
9+
<main className="flex-grow">
1310
<Outlet />
1411
</main>
1512
<Footer />

‎src/components/ui/StatusBadge/StatusBadge.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import Badge from '../Badge/Badge';
2-
import { Clock, CheckCircle, XCircle } from 'lucide-react';
2+
import { Clock, CheckCircle, XCircle, TrendingUp } from 'lucide-react';
33

44
interface StatusBadgeProps {
5-
status: 'pending' | 'accepted' | 'rejected' | string;
5+
status:
6+
| 'pending'
7+
| 'accepted'
8+
| 'rejected'
9+
| 'enrolled'
10+
| 'in-progress'
11+
| 'completed'
12+
| string;
613
}
714
/**
815
* StatusBadge Component
@@ -31,9 +38,24 @@ const StatusBadge = ({ status }: StatusBadgeProps) => {
3138
Rechazado
3239
</Badge>
3340
);
41+
case 'enrolled':
42+
case 'in-progress':
43+
return (
44+
<Badge className="bg-blue-100 text-blue-800 border-blue-200">
45+
<TrendingUp className="w-3 h-3 mr-1" />
46+
En Progreso
47+
</Badge>
48+
);
49+
case 'completed':
50+
return (
51+
<Badge className="bg-green-100 text-green-800 border-green-200">
52+
<CheckCircle className="w-3 h-3 mr-1" />
53+
Completado
54+
</Badge>
55+
);
3456
default:
3557
return <Badge>{status}</Badge>;
3658
}
3759
};
3860

39-
export default StatusBadge;
61+
export default StatusBadge;

‎src/pages/AboutPage.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/Card/Card';
1+
import {
2+
Card,
3+
CardContent,
4+
CardHeader,
5+
CardTitle,
6+
} from '../components/ui/Card/Card';
27

38
export default function AboutPage() {
49
return (
5-
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 py-12">
6-
<div className="container mx-auto px-4 sm:px-6 max-w-4xl">
10+
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 px-4">
11+
<div className="container mx-auto max-w-7xl pt-24 pb-12">
712
<h1 className="text-4xl font-bold text-slate-800 mb-8 text-center">
813
Acerca de Nosotros
914
</h1>
@@ -14,8 +19,10 @@ export default function AboutPage() {
1419
</CardHeader>
1520
<CardContent>
1621
<p className="text-slate-700">
17-
Somos una plataforma educativa dedicada a democratizar el acceso a la educación de calidad.
18-
Nuestro objetivo es conectar a estudiantes con profesores expertos en diversas áreas del conocimiento.
22+
Somos una plataforma educativa dedicada a democratizar el acceso a
23+
la educación de calidad. Nuestro objetivo es conectar a
24+
estudiantes con profesores expertos en diversas áreas del
25+
conocimiento.
1926
</p>
2027
</CardContent>
2128
</Card>
@@ -26,9 +33,9 @@ export default function AboutPage() {
2633
</CardHeader>
2734
<CardContent>
2835
<p className="text-slate-700">
29-
Aspiramos a ser la plataforma de aprendizaje en línea líder, donde cada persona pueda
30-
desarrollar sus habilidades y alcanzar su máximo potencial a través de cursos accesibles
31-
y de alta calidad.
36+
Aspiramos a ser la plataforma de aprendizaje en línea líder, donde
37+
cada persona pueda desarrollar sus habilidades y alcanzar su
38+
máximo potencial a través de cursos accesibles y de alta calidad.
3239
</p>
3340
</CardContent>
3441
</Card>

‎src/pages/Admin/AdminDashboard.tsx‎

Lines changed: 57 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,7 @@ import {
88
CardTitle,
99
} from '../../components/ui/Card/Card';
1010
import StatusBadge from '../../components/ui/StatusBadge/StatusBadge';
11-
import {
12-
Users,
13-
BookOpen,
14-
GraduationCap,
15-
DollarSign,
16-
} from 'lucide-react';
11+
import { Users, BookOpen, GraduationCap, DollarSign } from 'lucide-react';
1712
import { appealService } from '../../api/services/appeal.service';
1813
import { useAdminAnalytics } from '../../hooks/useAdmin';
1914
import { formatCurrency } from '../../lib/currency';
@@ -90,63 +85,64 @@ export default function AdminDashboard() {
9085
}, []);
9186

9287
return (
93-
<div className="space-y-6">
94-
<div>
95-
<h1 className="text-3xl font-bold text-slate-800 mb-2">
96-
Dashboard de Administrador
97-
</h1>
98-
<p className="text-slate-600">Resumen general de la plataforma.</p>
99-
</div>
100-
101-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
102-
{stats.map((stat) => (
103-
<Card key={stat.title}>
104-
<CardHeader className="flex flex-row items-center justify-between space-y-2 pb-2">
105-
<CardTitle className="text-sm font-medium text-slate-600">
106-
{stat.title}
107-
</CardTitle>
108-
<stat.icon className="w-5 h-5 text-slate-400" />
109-
</CardHeader>
110-
<CardContent>
111-
<div className="text-2xl font-bold text-slate-800">
112-
{stat.value}
113-
</div>
114-
<p
115-
className={`text-xs mt-1 ${
116-
stat.isPositive ? 'text-green-600' : 'text-red-600'
117-
}`}
118-
>
119-
{stat.change} desde el mes pasado
120-
</p>
121-
</CardContent>
122-
</Card>
123-
))}
124-
</div>
88+
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50/100 px-4">
89+
<div className="container mx-auto max-w-7xl space-y-6 pt-24 pb-8">
90+
<div>
91+
<h1 className="text-3xl font-bold text-slate-800 mb-2">
92+
Dashboard de Administrador
93+
</h1>
94+
<p className="text-slate-600">Resumen general de la plataforma.</p>
95+
</div>
12596

126-
{isLoadingAnalytics ? (
127-
<div className="text-center p-8">
128-
<p className="text-slate-600">Cargando estadísticas...</p>
97+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
98+
{stats.map((stat) => (
99+
<Card key={stat.title}>
100+
<CardHeader className="flex flex-row items-center justify-between space-y-2 pb-2">
101+
<CardTitle className="text-sm font-medium text-slate-600">
102+
{stat.title}
103+
</CardTitle>
104+
<stat.icon className="w-5 h-5 text-slate-400" />
105+
</CardHeader>
106+
<CardContent>
107+
<div className="text-2xl font-bold text-slate-800">
108+
{stat.value}
109+
</div>
110+
<p
111+
className={`text-xs mt-1 ${
112+
stat.isPositive ? 'text-green-600' : 'text-red-600'
113+
}`}
114+
>
115+
{stat.change} desde el mes pasado
116+
</p>
117+
</CardContent>
118+
</Card>
119+
))}
129120
</div>
130-
) : null}
131121

132-
<Card>
133-
<CardHeader>
134-
<CardTitle className="flex items-center">
135-
<GraduationCap className="w-5 h-5 mr-2" />
136-
Solicitudes Recientes
137-
</CardTitle>
138-
<CardDescription>
139-
Últimas solicitudes recibidas.{' '}
140-
<Link
141-
to="/admin/teacher-requests"
142-
className="text-blue-600 hover:underline"
143-
>
144-
Ver todas
145-
</Link>
146-
.
147-
</CardDescription>
148-
</CardHeader>
149-
<CardContent>
122+
{isLoadingAnalytics ? (
123+
<div className="text-center p-8">
124+
<p className="text-slate-600">Cargando estadísticas...</p>
125+
</div>
126+
) : null}
127+
128+
<Card>
129+
<CardHeader>
130+
<CardTitle className="flex items-center">
131+
<GraduationCap className="w-5 h-5 mr-2" />
132+
Solicitudes Recientes
133+
</CardTitle>
134+
<CardDescription>
135+
Últimas solicitudes recibidas.{' '}
136+
<Link
137+
to="/admin/teacher-requests"
138+
className="text-blue-600 hover:underline"
139+
>
140+
Ver todas
141+
</Link>
142+
.
143+
</CardDescription>
144+
</CardHeader>
145+
<CardContent>
150146
<div className="space-y-4">
151147
{isLoading ? (
152148
<p>Cargando...</p>
@@ -185,6 +181,7 @@ export default function AdminDashboard() {
185181
</div>
186182
</CardContent>
187183
</Card>
184+
</div>
188185
</div>
189186
);
190187
}

0 commit comments

Comments
 (0)