feat: agregar botón para ver perfil público del servicio y mejorar el diseño de los íconos de acción

This commit is contained in:
2026-09-15 10:01:20 -03:00
parent e7a94b93f1
commit 28727e2630
2 changed files with 36 additions and 20 deletions
@@ -16,6 +16,7 @@ import { getServiceImage } from "@core/helpers/getServiceImage";
import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary"; import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";
import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined"; import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import Dialog from "@mui/material/Dialog"; import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent"; import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
@@ -118,18 +119,30 @@ export default function Org() {
</div> </div>
<div className={style.serviceActions}> <div className={style.serviceActions}>
<span className={style.servicePrice}>{formatPrice(data.price)}</span> <span className={style.servicePrice}>{formatPrice(data.price)}</span>
<IconButton <div className={style.iconsRow}>
className={style.shareButton} <IconButton
sx={{ position: "absolute", top: "15px", right: "15px" }} onClick={(e) => {
onClick={(e) => { e.stopPropagation();
e.stopPropagation(); goTo(`/landing/service/${data.id}`);
setShareService(data); }}
}} size="small"
size="small" title="Ver perfil público del servicio"
title="Compartir servicio" className={style.iconButton}
> >
<ShareOutlinedIcon fontSize="small" /> <OpenInNewIcon fontSize="small" />
</IconButton> </IconButton>
<IconButton
onClick={(e) => {
e.stopPropagation();
setShareService(data);
}}
size="small"
title="Compartir servicio"
className={style.iconButton}
>
<ShareOutlinedIcon fontSize="small" />
</IconButton>
</div>
</div> </div>
</div> </div>
); );
@@ -71,26 +71,29 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end; /* changed from space-between */ justify-content: center;
min-width: 100px; gap: 12px;
min-width: 60px;
} }
.servicePrice { .servicePrice {
font-size: 18px; font-size: 18px;
font-weight: 800; font-weight: 800;
color: #1e293b; color: #1e293b;
margin-bottom: 0; /* removed bottom margin */
} }
.shareButton { .iconsRow {
display: flex;
align-items: center;
gap: 4px;
}
.iconButton {
color: #94a3b8; color: #94a3b8;
transition: color 0.2s ease; transition: color 0.2s ease;
position: absolute;
top: 15px;
right: 15px;
} }
.shareButton:hover { .iconButton:hover {
color: var(--wine-dark); color: var(--wine-dark);
} }