Skip to content

Commit 53b869b

Browse files
Brenes93Brenes93
authored
Merge pull request #50 from 4GeeksAcademy/ft027-diseño-vista-perfil-y-footer
Ft027 diseño vista perfil y footer
2 parents de510c5 + 41678ea commit 53b869b

File tree

4 files changed

+70
-31
lines changed

4 files changed

+70
-31
lines changed

‎migrations/versions/72e27a338232_.py ‎migrations/versions/e36c9457bade_.py

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
"""empty message
22
3-
Revision ID: 72e27a338232
3+
Revision ID: e36c9457bade
44
Revises:
5-
Create Date: 2025-03-20 18:45:28.776433
5+
Create Date: 2025-03-20 19:00:49.034691
66
77
"""
88
from alembic import op
99
import sqlalchemy as sa
1010

1111

1212
# revision identifiers, used by Alembic.
13-
revision = '72e27a338232'
13+
revision = 'e36c9457bade'
1414
down_revision = None
1515
branch_labels = None
1616
depends_on = None

‎src/front/js/component/footer.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Footer = () => {
77
{/* Sección de Información */}
88
<div>
99
<h3 className="text-xl font-semibold mb-2">Sobre Nosotros</h3>
10-
<p className="text-gray-600">Nos dedicamos a proporcionar la mejor información sobre alimentación y cuidado de tus mascotas.</p>
10+
<p className="text-gray-600">En PupperEats queremos que tus peludos tengan la mejor calidad de vida posible. Somos defensores de la comida de calidad sin aditivos innecesarios que ofrezcan la mejor opción según las necesidades específicas de tu mascota.</p>
1111
</div>
1212

1313
{/* Sección de Redes Sociales */}
@@ -27,7 +27,7 @@ export const Footer = () => {
2727
</div>
2828
</div>
2929
<div className="text-center text-gray-500 text-sm mt-6">
30-
&copy; 2024 Pupper Eats - Todos los derechos reservados
30+
&copy; 2025 Pupper Eats - Todos los derechos reservados
3131
</div>
3232
</footer>
3333
);

‎src/front/js/pages/perfilUsuario.js

+65-26
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useEffect, useContext, useState } from "react";
22
import logo from "../../img/Icono puppereats.png";
3-
import {EdicionPerfil} from "../component/edicionPerfil";
3+
import { EdicionPerfil } from "../component/edicionPerfil";
44
import { Context } from "../store/appContext";
5-
import { User, MapPin, PlusCircle } from "lucide-react";
5+
import { User, MapPin, PlusCircle, LogOut, ShoppingCart } from "lucide-react"; // Importar ShoppingCart para el ícono
66
import { useNavigate, Link } from "react-router-dom";
77
import "bootstrap/dist/css/bootstrap.min.css";
88

@@ -27,38 +27,74 @@ export const PerfilUsuario = () => {
2727

2828
return (
2929
<div className="container py-5" style={{ background: "#f9f6f2", minHeight: "100vh", borderRadius: "10px" }}>
30-
{/* Header */}
31-
<div className="d-flex justify-content-between align-items-center mb-4">
32-
<div>
33-
<Link to="/" className="navbar-brand d-flex align-items-center" onClick={() => setActiveCategory(null)}>
34-
<img src={logo} alt="Logo" style={{ height: "60px", border: "3px solid #000", borderRadius: "10px", padding: "3px" }} />
35-
<span className="fw-bold text-dark" style={{ fontSize: "1.5rem", marginLeft: "10px" }}>Pupper Eats</span>
36-
</Link>
37-
<button className="btn btn-warning me-2" onClick={() => navigate("/carrito")}>🛒 Carrito</button>
38-
<button className="btn btn-outline-secondary" onClick={actions.logout}>Cerrar sesión</button>
30+
{/* Navbar personalizado */}
31+
<nav className="navbar navbar-expand-lg mb-4" style={{ borderRadius: "12px", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", backgroundColor:"#257180" }}>
32+
<div className="container-fluid">
33+
{/* Logo */}
34+
<Link to="/" className="navbar-brand d-flex align-items-center">
35+
<img
36+
src={logo}
37+
alt="Logo"
38+
style={{ height: "60px", border: "3px solid #000", borderRadius: "10px", padding: "3px" }}
39+
/>
40+
<span className="fw-bold text-dark ms-2" style={{ fontSize: "2.5rem" }}>Pupper Eats</span>
41+
</Link>
42+
43+
{/* Botón del carrito */}
44+
<button
45+
className="btn btn-warning btn-sm d-flex align-items-center gap-2 ms-auto"
46+
onClick={() => navigate("/carrito")}
47+
style={{ borderRadius: "8px", whiteSpace: "nowrap" }} // Estilo personalizado
48+
>
49+
<ShoppingCart size={16} /> {/* Ícono del carrito */}
50+
<span>Carrito</span>
51+
</button>
3952
</div>
40-
</div>
53+
</nav>
4154

42-
{/* Perfil de Usuario */}
43-
<div className="card p-4 mb-4 shadow-lg" style={{ borderRadius: "12px", backgroundColor: "#fff8e1" }}>
44-
<h2 className="text-dark">Hola, <span className="fw-bold">{store.user.name}</span> 👋</h2>
55+
{/* Perfil usuario */}
56+
<div className="card p-4 mb-5" style={{ borderRadius: "12px", backgroundColor: "#f9f6f2", border: "none", border: "none" }}>
57+
<h2 className="text-dark mb-3">Hola, <span className="fw-bold">{store.user.name}</span> 👋</h2>
58+
<button
59+
className="btn btn-sm d-flex align-items-center gap-2"
60+
onClick={actions.logout}
61+
style={{ border: "none", color: "#6c757d", padding: "0" }} // Estilo personalizado
62+
>
63+
<LogOut size={16} /> {/* Ícono de cerrar sesión */}
64+
<span>Cerrar sesión</span>
65+
</button>
4566
<div className="mt-3">
46-
<p><User size={16} /> {store.user.name}</p>
47-
<p><MapPin size={16} /> {store.user.email}</p>
48-
<button className="btn btn-outline-primary" onClick={() => setIsEditModalOpen(true)}>Editar perfil</button>
67+
<p className="d-flex align-items-center gap-2">
68+
<User size={20} className="text-primary" /> {store.user.name}
69+
</p>
70+
<p className="d-flex align-items-center gap-2">
71+
<MapPin size={20} className="text-primary" /> {store.user.email}
72+
</p>
73+
<button
74+
className="btn btn-dark"
75+
onClick={() => setIsEditModalOpen(true)}
76+
style={{ borderRadius: "none", backgroundColor: "#FD8B51" }}
77+
>
78+
Editar perfil
79+
</button>
4980
</div>
5081
</div>
5182

5283
{/* Modal de Edición de Perfil */}
5384
<EdicionPerfil isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} />
5485

5586
{/* Mis Mascotas */}
56-
<h3 className="text-dark mb-3">🐾 Mis Mascotas</h3>
57-
<div className="card p-3 shadow-lg" style={{ borderRadius: "12px", backgroundColor: "#fff" }}>
58-
<div className="d-flex align-items-center gap-3 flex-wrap">
59-
<button className="btn btn-outline-primary d-flex flex-column align-items-center">
60-
<PlusCircle size={40} />
61-
<Link to="/registro-mascota" className="btn btn-primary">Añadir perfil mascota</Link>
87+
<h2 className="text-dark mb-4">🐾 Mis Mascotas</h2>
88+
<div className="card p-4" style={{ borderRadius: "12px", backgroundColor: "#fff", border: "none" }}>
89+
<div className="d-flex align-items-center gap-4 flex-wrap">
90+
<button
91+
className="btn btn-outline-light d-flex flex-column align-items-center justify-content-center p-3"
92+
style={{ borderRadius: "12px", width: "120px", height: "120px", color:"#F2E5BF" }}
93+
>
94+
<PlusCircle size={40} className="mb-2" />
95+
<Link to="/registro-mascota" className="text-decoration-none text-dark fs-6 fw-medium">
96+
<span>Añadir mascota</span>
97+
</Link>
6298
</button>
6399
{store.pets && store.pets.length > 0 ? (
64100
store.pets.map((pet, index) => (
@@ -69,12 +105,15 @@ export const PerfilUsuario = () => {
69105
style={{ cursor: "pointer" }}
70106
>
71107
<img
72-
src={pet.url || "https://via.placeholder.com/60"}
108+
src={pet.animal_type === "perro" ? "https://images.emojiterra.com/google/noto-emoji/unicode-16.0/color/1024px/1f436.png" :
109+
pet.animal_type === "gato" ? "https://cdn-icons-png.flaticon.com/512/6988/6988878.png" :
110+
pet.animal_type === "exotico" ? "https://cdn-icons-png.flaticon.com/512/802/802338.png" :
111+
"https://via.placeholder.com/60" }
73112
alt={pet.name}
74113
className="rounded-circle border border-secondary"
75114
style={{ width: 60, height: 60, objectFit: "cover" }}
76115
/>
77-
<span className="d-block mt-1 fw-semibold">{pet.name}</span>
116+
<span className="d-block mt-2 fw-semibold">{pet.name}</span>
78117
</div>
79118
))
80119
) : (

‎src/front/styles/home.css

100755100644
File mode changed.

0 commit comments

Comments
 (0)