From 153655da8c5109f0e19f547ff676d7cc3d98cebd Mon Sep 17 00:00:00 2001 From: 230417 <230417@epvc.pt> Date: Mon, 27 Apr 2026 14:38:51 +0100 Subject: [PATCH] style: improve mobile responsiveness across layout and UI components --- web/index.html | 16 ++++++- web/src/components/ProductList.tsx | 29 ++++++------- web/src/components/ServiceList.tsx | 21 +++++----- web/src/components/ShopCard.tsx | 30 +++++++------- web/src/components/layout/Header.tsx | 2 +- web/src/components/layout/Shell.tsx | 2 +- web/src/index.css | 12 +++--- web/src/pages/Booking.tsx | 30 +++++++------- web/src/pages/Explore.tsx | 18 ++++---- web/src/pages/Landing.tsx | 62 ++++++++++++++-------------- web/src/pages/Profile.tsx | 15 +++---- web/src/pages/ShopDetails.tsx | 61 ++++++++++++++------------- 12 files changed, 156 insertions(+), 142 deletions(-) diff --git a/web/index.html b/web/index.html index 2b58362..9522f0e 100644 --- a/web/index.html +++ b/web/index.html @@ -1,3 +1,17 @@ - Smart Agenda
+ + + + + + Smart Agenda + + + + + +
+ + + diff --git a/web/src/components/ProductList.tsx b/web/src/components/ProductList.tsx index ced167b..a1cea14 100644 --- a/web/src/components/ProductList.tsx +++ b/web/src/components/ProductList.tsx @@ -12,33 +12,33 @@ export const ProductList = ({ products: Product[]; onAdd?: (id: string) => void; }) => ( -
+
{products.map((p) => { const lowStock = p.stock <= 3; return ( - -
+ +
{lowStock && ( -
- - Últimas Unidades +
+ + Últimas
)}
-
+
-

{p.name}

-
+

{p.name}

+
{p.stock} em stock
-
-
+
+
{currency(p.price)}
@@ -46,7 +46,7 @@ export const ProductList = ({ @@ -58,8 +58,3 @@ export const ProductList = ({ })}
); - - - - - diff --git a/web/src/components/ServiceList.tsx b/web/src/components/ServiceList.tsx index c5192a4..442c8f9 100644 --- a/web/src/components/ServiceList.tsx +++ b/web/src/components/ServiceList.tsx @@ -11,12 +11,12 @@ export const ServiceList = ({ services: Service[]; onSelect?: (id: string) => void; }) => ( -
+
{services.map((s) => ( - -
-
-

{s.name}

+ +
+
+

{s.name}

@@ -24,19 +24,19 @@ export const ServiceList = ({
-
+
{currency(s.price)}
{onSelect && ( -
-

Lugar disponível hoje

+
+

Lugar disponível hoje

)} @@ -44,4 +44,3 @@ export const ServiceList = ({ ))}
); - diff --git a/web/src/components/ShopCard.tsx b/web/src/components/ShopCard.tsx index 09af80f..aac412d 100644 --- a/web/src/components/ShopCard.tsx +++ b/web/src/components/ShopCard.tsx @@ -6,8 +6,8 @@ import { Button } from './ui/button'; export const ShopCard = ({ shop }: { shop: BarberShop }) => { return ( - -
+ +
{shop.imageUrl ? ( {
{/* Rating Badge */} -
- - +
+ + {shop.rating ? shop.rating.toFixed(1) : '0.0'}
-
+
-

+

{shop.name}

- +

{shop.address || 'Endereço Indisponível'}

-
-
-
+
+
+
{[1, 2, 3].map(i => ( -
- +
+
))}
- + +{(shop.barbers || []).length} Barbeiros
-
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx index 054bd43..a4575ed 100644 --- a/web/src/components/layout/Header.tsx +++ b/web/src/components/layout/Header.tsx @@ -16,7 +16,7 @@ export const Header = () => { return (
-
+
-
+
diff --git a/web/src/index.css b/web/src/index.css index 9951d5d..cb919be 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -15,6 +15,13 @@ * { @apply border-slate-200; + box-sizing: border-box; + } + + html, body { + overflow-x: hidden; + width: 100%; + max-width: 100vw; } body { @@ -62,8 +69,3 @@ @apply bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950; } } - - - - - diff --git a/web/src/pages/Booking.tsx b/web/src/pages/Booking.tsx index b879a93..4859c72 100644 --- a/web/src/pages/Booking.tsx +++ b/web/src/pages/Booking.tsx @@ -101,14 +101,14 @@ export default function Booking() { ]; return ( -
+
Reserva Exclusiva
-

+

Reservar em {shop.name}

@@ -129,7 +129,7 @@ export default function Booking() { if (s.completed || s.id < step) setStep(s.id); }} disabled={!s.completed && s.id > step} - className={`w-12 h-12 rounded-2xl flex items-center justify-center border-2 transition-all duration-500 scale-100 active:scale-90 ${ + className={`w-10 h-10 sm:w-12 sm:h-12 rounded-xl sm:rounded-2xl flex items-center justify-center border-2 transition-all duration-500 scale-100 active:scale-90 ${ s.active ? 'bg-slate-900 border-slate-900 text-indigo-400 shadow-2xl shadow-slate-300 -translate-y-2' : s.completed @@ -137,9 +137,9 @@ export default function Booking() { : 'bg-white border-slate-200 text-slate-400' }`} > - {s.completed && !s.active ? : } + {s.completed && !s.active ? : } -
+
{s.label}
@@ -147,9 +147,9 @@ export default function Booking() {
- + {/* Dynamic Step Content */} -
+
{/* Step Back Button */} {step > 1 && ( @@ -166,7 +166,7 @@ export default function Booking() { {step === 1 && (
-

1. Selecione o Serviço

+

1. Selecione o Serviço

O primeiro passo para o seu agendamento.

@@ -177,7 +177,7 @@ export default function Booking() { setService(s.id); setStep(2); }} - className={`group p-6 rounded-[2rem] border-2 text-left transition-all duration-300 flex flex-col gap-4 ${ + className={`group p-4 sm:p-6 rounded-2xl sm:rounded-[2rem] border-2 text-left transition-all duration-300 flex flex-col gap-3 sm:gap-4 ${ serviceId === s.id ? 'border-slate-900 bg-slate-900 text-white shadow-2xl translate-y-[-4px]' : 'border-slate-50 bg-slate-50 hover:border-indigo-200 hover:bg-indigo-50/50' @@ -206,7 +206,7 @@ export default function Booking() { {step === 2 && (
-

2. Escolha o Mestre

+

2. Escolha o Mestre

Selecione o artista que cuidará do seu visual.

@@ -217,13 +217,13 @@ export default function Booking() { setBarber(b.id); setStep(3); }} - className={`group p-6 rounded-[2.5rem] border-2 text-center transition-all duration-300 flex flex-col items-center gap-5 ${ + className={`group p-4 sm:p-6 rounded-2xl sm:rounded-[2.5rem] border-2 text-center transition-all duration-300 flex flex-col items-center gap-3 sm:gap-5 ${ barberId === b.id ? 'border-slate-900 bg-slate-900 text-white shadow-2xl translate-y-[-4px]' : 'border-slate-50 bg-slate-50 hover:border-indigo-200 hover:bg-indigo-50/50' }`} > -
+
{b.imageUrl ? ( {b.name} ) : ( @@ -247,7 +247,7 @@ export default function Booking() { {step === 3 && (
-

3. Escolha o Horário

+

3. Escolha o Horário

Seu tempo é valioso. Escolha a data perfeita.

@@ -271,14 +271,14 @@ export default function Booking() { {step === 4 && (
-

4. Escolha o Horário Privilegiado

+

4. Escolha o Horário Privilegiado

A pontualidade é a cortesia dos reis.

{/* Left Side: Summary Sidebar */}
-
+
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index 9365ae6..067b58e 100644 --- a/web/src/pages/Explore.tsx +++ b/web/src/pages/Explore.tsx @@ -53,7 +53,7 @@ export default function Explore() { }, [shops, query, filter, sortBy]); return ( -
+
@@ -61,7 +61,7 @@ export default function Explore() { As Nossas Barbearias
-

+

Ver Barbearias

Descubra barbearias exclusivas e reserve o seu próximo corte em segundos.

@@ -73,7 +73,7 @@ export default function Explore() {
- +
@@ -81,24 +81,24 @@ export default function Explore() { value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Pesquisar por nome ou endereço..." - className="h-14 pl-14 pr-6 bg-transparent border-none text-lg font-medium focus:ring-0 placeholder:text-slate-400" + className="h-12 sm:h-14 pl-12 sm:pl-14 pr-4 sm:pr-6 bg-transparent border-none text-base sm:text-lg font-medium focus:ring-0 placeholder:text-slate-400" />
-
+
setFilter('todas')} - className={`h-11 px-6 rounded-2xl font-bold uppercase tracking-tight transition-all ${filter === 'todas' ? '!bg-slate-900 !text-indigo-400 border-none shadow-lg' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'}`} + className={`h-9 sm:h-11 px-4 sm:px-6 rounded-xl sm:rounded-2xl font-bold uppercase tracking-tight transition-all text-xs sm:text-sm ${filter === 'todas' ? '!bg-slate-900 !text-indigo-400 border-none shadow-lg' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'}`} > Todas setFilter('top')} - className={`h-11 px-6 rounded-2xl font-bold uppercase tracking-tight transition-all ${filter === 'top' ? '!bg-slate-900 !text-indigo-400 border-none shadow-lg' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'}`} + className={`h-9 sm:h-11 px-4 sm:px-6 rounded-xl sm:rounded-2xl font-bold uppercase tracking-tight transition-all text-xs sm:text-sm ${filter === 'top' ? '!bg-slate-900 !text-indigo-400 border-none shadow-lg' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'}`} > Top Avaliadas @@ -106,7 +106,7 @@ export default function Explore() {