From fb573a19ca8d9c4d8a5592e2618435ac23f0039e Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Thu, 12 Mar 2026 16:34:12 +0000
Subject: [PATCH] cores

---
 web/src/components/ShopCard.tsx      |  8 +++----
 web/src/components/layout/Header.tsx | 10 ++++----
 web/src/pages/AuthLogin.tsx          |  4 ++--
 web/src/pages/AuthRegister.tsx       | 12 +++++-----
 web/src/pages/Booking.tsx            | 32 ++++++++++++-------------
 web/src/pages/Profile.tsx            | 36 ++++++++++++++--------------
 web/src/pages/ShopDetails.tsx        |  2 +-
 7 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/web/src/components/ShopCard.tsx b/web/src/components/ShopCard.tsx
index fd399e6..38db077 100644
--- a/web/src/components/ShopCard.tsx
+++ b/web/src/components/ShopCard.tsx
@@ -21,7 +21,7 @@ export const ShopCard = ({ shop }: { shop: BarberShop }) => {
           </div>
           {/* Rating Badge - Posicionado em cima à direita como na imagem base */}
           <div className="absolute -top-1 -right-2 bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-full flex items-center gap-[2px] shadow-sm z-10">
-            <Star size={11} className="fill-amber-400 text-amber-400" />
+            <Star size={11} className="fill-violet-400 text-violet-400" />
             <span className="text-white text-[11px] font-semibold tracking-wide">
               {shop.rating ? shop.rating.toFixed(1) : '0.0'}
             </span>
@@ -30,11 +30,11 @@ export const ShopCard = ({ shop }: { shop: BarberShop }) => {
 
         {/* Informações da Barbearia */}
         <div className="flex flex-col flex-1 py-1">
-          <h2 className="text-slate-900 text-base md:text-lg font-bold uppercase tracking-wide truncate mb-1.5 group-hover:text-amber-600 transition-colors">
+          <h2 className="text-slate-900 text-base md:text-lg font-bold uppercase tracking-wide truncate mb-1.5 group-hover:text-violet-600 transition-colors">
             {shop.name}
           </h2>
           <div className="flex items-start gap-1.5 text-slate-500 mb-2">
-            <MapPin size={16} className="shrink-0 mt-0.5 text-amber-600" />
+            <MapPin size={16} className="shrink-0 mt-0.5 text-violet-600" />
             <p className="text-sm leading-snug line-clamp-2 pr-1">
               {shop.address || 'Endereço Indisponível'}
             </p>
@@ -53,7 +53,7 @@ export const ShopCard = ({ shop }: { shop: BarberShop }) => {
         <Button asChild variant="outline" size="sm" className="flex-1">
           <Link to={`/barbearia/${shop.id}`}>Ver detalhes</Link>
         </Button>
-        <Button asChild size="sm" className="flex-1 bg-amber-600 hover:bg-amber-700 border-0">
+        <Button asChild size="sm" className="flex-1 bg-violet-600 hover:bg-violet-700 border-0">
           <Link to={`/agendar/${shop.id}`}>Agendar</Link>
         </Button>
       </div>
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 1af1baa..8158a13 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -84,7 +84,7 @@ export const Header = () => {
         {/* Mobile Menu Button */}
         <button
           onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          className="md:hidden p-2 text-slate-700 hover:text-amber-600 hover:bg-amber-50 rounded-lg transition-colors"
+          className="md:hidden p-2 text-slate-700 hover:text-violet-600 hover:bg-violet-50 rounded-lg transition-colors"
           type="button"
         >
           {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
@@ -100,7 +100,7 @@ export const Header = () => {
                 <Link
                   to="/explorar"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-amber-600 transition-colors px-3 py-2 rounded-lg hover:bg-amber-50"
+                  className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-violet-600 transition-colors px-3 py-2 rounded-lg hover:bg-violet-50"
                 >
                   <MapPin size={16} />
                   Barbearias
@@ -109,12 +109,12 @@ export const Header = () => {
                 <Link
                   to="/carrinho"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-amber-600 transition-colors px-3 py-2 rounded-lg hover:bg-amber-50"
+                  className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-violet-600 transition-colors px-3 py-2 rounded-lg hover:bg-violet-50"
                 >
                   <ShoppingCart size={16} />
                   Carrinho
                   {cart.length > 0 && (
-                    <span className="ml-auto rounded-full bg-amber-500 px-2 py-0.5 text-[10px] font-bold text-white">
+                    <span className="ml-auto rounded-full bg-violet-500 px-2 py-0.5 text-[10px] font-bold text-white">
                       {cart.length}
                     </span>
                   )}
@@ -129,7 +129,7 @@ export const Header = () => {
                     navigate(user.role === 'barbearia' ? '/painel' : '/perfil')
                     setMobileMenuOpen(false)
                   }}
-                  className="w-full flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-amber-600 transition-colors px-3 py-2 rounded-lg hover:bg-amber-50 text-left"
+                  className="w-full flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-violet-600 transition-colors px-3 py-2 rounded-lg hover:bg-violet-50 text-left"
                   type="button"
                 >
                   <User size={16} />
diff --git a/web/src/pages/AuthLogin.tsx b/web/src/pages/AuthLogin.tsx
index 3a0c254..d67bd8c 100644
--- a/web/src/pages/AuthLogin.tsx
+++ b/web/src/pages/AuthLogin.tsx
@@ -69,7 +69,7 @@ export default function AuthLogin() {
     <div className="max-w-md mx-auto py-8">
       <Card className="p-8 space-y-6">
         <div className="text-center space-y-2">
-          <div className="inline-flex p-3 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl text-white shadow-lg mb-2">
+          <div className="inline-flex p-3 bg-gradient-to-br from-violet-500 to-violet-600 rounded-xl text-white shadow-lg mb-2">
             <LogIn size={24} />
           </div>
           <h1 className="text-2xl font-bold text-slate-900">Entrar</h1>
@@ -109,7 +109,7 @@ export default function AuthLogin() {
         <div className="text-center pt-4 border-t border-slate-200">
           <p className="text-sm text-slate-600">
             Não tem conta?{' '}
-            <Link to="/registo" className="text-amber-700 font-semibold hover:text-amber-800 transition-colors">
+            <Link to="/registo" className="text-violet-700 font-semibold hover:text-violet-800 transition-colors">
               Criar conta
             </Link>
           </p>
diff --git a/web/src/pages/AuthRegister.tsx b/web/src/pages/AuthRegister.tsx
index 9d2a5a8..8e8da6d 100644
--- a/web/src/pages/AuthRegister.tsx
+++ b/web/src/pages/AuthRegister.tsx
@@ -111,7 +111,7 @@ export default function AuthRegister() {
     <div className="max-w-md mx-auto py-8">
       <Card className="p-8 space-y-6">
         <div className="text-center space-y-2">
-          <div className="inline-flex p-3 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl text-white shadow-lg mb-2">
+          <div className="inline-flex p-3 bg-gradient-to-br from-violet-500 to-violet-600 rounded-xl text-white shadow-lg mb-2">
             <UserPlus size={24} />
           </div>
           <h1 className="text-2xl font-bold text-slate-900">
@@ -144,15 +144,15 @@ export default function AuthRegister() {
                     setError('')
                   }}
                   className={`p-4 rounded-xl border-2 transition-all ${role === r
-                    ? 'border-amber-500 bg-amber-50 shadow-md'
-                    : 'border-slate-200 hover:border-amber-300'
+                    ? 'border-violet-500 bg-violet-50 shadow-md'
+                    : 'border-slate-200 hover:border-violet-300'
                     }`}
                 >
                   <div className="flex flex-col items-center gap-2">
                     {r === 'cliente' ? (
-                      <User size={20} className={role === r ? 'text-amber-600' : 'text-slate-400'} />
+                      <User size={20} className={role === r ? 'text-violet-600' : 'text-slate-400'} />
                     ) : (
-                      <Scissors size={20} className={role === r ? 'text-amber-600' : 'text-slate-400'} />
+                      <Scissors size={20} className={role === r ? 'text-violet-600' : 'text-slate-400'} />
                     )}
                     <span className="text-sm font-semibold">
                       {r === 'cliente' ? 'Cliente' : 'Barbearia'}
@@ -209,7 +209,7 @@ export default function AuthRegister() {
             Já tem conta?{' '}
             <Link
               to="/login"
-              className="text-amber-700 font-semibold hover:text-amber-800"
+              className="text-violet-700 font-semibold hover:text-violet-800"
             >
               Entrar
             </Link>
diff --git a/web/src/pages/Booking.tsx b/web/src/pages/Booking.tsx
index dc1c654..86766c7 100644
--- a/web/src/pages/Booking.tsx
+++ b/web/src/pages/Booking.tsx
@@ -124,18 +124,18 @@ export default function Booking() {
             <div className="flex flex-col items-center flex-1">
               <div
                 className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all ${step.completed
-                  ? 'bg-gradient-to-br from-amber-500 to-amber-600 border-amber-600 text-white shadow-md'
+                  ? 'bg-gradient-to-br from-violet-500 to-violet-600 border-violet-600 text-white shadow-md'
                   : 'bg-white border-slate-300 text-slate-400'
                   }`}
               >
                 {step.completed ? <CheckCircle2 size={18} /> : <step.icon size={18} />}
               </div>
-              <span className={`text-xs mt-2 font-medium ${step.completed ? 'text-amber-700' : 'text-slate-500'}`}>
+              <span className={`text-xs mt-2 font-medium ${step.completed ? 'text-violet-700' : 'text-slate-500'}`}>
                 {step.label}
               </span>
             </div>
             {idx < steps.length - 1 && (
-              <div className={`h-0.5 flex-1 mx-2 ${step.completed ? 'bg-amber-500' : 'bg-slate-200'}`} />
+              <div className={`h-0.5 flex-1 mx-2 ${step.completed ? 'bg-violet-500' : 'bg-slate-200'}`} />
             )}
           </div>
         ))}
@@ -145,7 +145,7 @@ export default function Booking() {
         {/* Step 1: Service */}
         <div className="space-y-3">
           <div className="flex items-center gap-2">
-            <Scissors size={18} className="text-amber-600" />
+            <Scissors size={18} className="text-violet-600" />
             <h3 className="text-base font-bold text-slate-900">1. Escolha o serviço</h3>
           </div>
           <div className="grid md:grid-cols-2 gap-3">
@@ -154,13 +154,13 @@ export default function Booking() {
                 key={s.id}
                 onClick={() => setService(s.id)}
                 className={`p-4 rounded-xl border-2 text-left transition-all ${serviceId === s.id
-                  ? 'border-amber-500 bg-gradient-to-br from-amber-50 to-amber-100/50 shadow-md scale-[1.02]'
-                  : 'border-slate-200 hover:border-amber-300 hover:bg-amber-50/50'
+                  ? 'border-violet-500 bg-gradient-to-br from-violet-50 to-violet-100/50 shadow-md scale-[1.02]'
+                  : 'border-slate-200 hover:border-violet-300 hover:bg-violet-50/50'
                   }`}
               >
                 <div className="flex items-center justify-between mb-1">
                   <div className="font-bold text-slate-900">{s.name}</div>
-                  <div className="text-sm font-bold text-amber-600">{currency(s.price)}</div>
+                  <div className="text-sm font-bold text-violet-600">{currency(s.price)}</div>
                 </div>
                 <div className="text-xs text-slate-500">Duração: {s.duration} min</div>
               </button>
@@ -171,7 +171,7 @@ export default function Booking() {
         {/* Step 2: Barber */}
         <div className="space-y-3">
           <div className="flex items-center gap-2">
-            <User size={18} className="text-amber-600" />
+            <User size={18} className="text-violet-600" />
             <h3 className="text-base font-bold text-slate-900">2. Escolha o barbeiro</h3>
           </div>
           <div className="flex gap-2 flex-wrap">
@@ -180,8 +180,8 @@ export default function Booking() {
                 key={b.id}
                 onClick={() => setBarber(b.id)}
                 className={`px-4 py-2.5 rounded-full border-2 text-sm font-medium transition-all ${barberId === b.id
-                  ? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
-                  : 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
+                  ? 'border-violet-500 bg-gradient-to-r from-violet-500 to-violet-600 text-white shadow-md'
+                  : 'border-slate-200 text-slate-700 hover:border-violet-300 hover:bg-violet-50'
                   }`}
               >
                 {b.name}
@@ -197,7 +197,7 @@ export default function Booking() {
         <div className="grid md:grid-cols-2 gap-6">
           <div className="space-y-3">
             <div className="flex items-center gap-2">
-              <Calendar size={18} className="text-amber-600" />
+              <Calendar size={18} className="text-violet-600" />
               <h3 className="text-base font-bold text-slate-900">3. Escolha a data</h3>
             </div>
             <Input
@@ -209,7 +209,7 @@ export default function Booking() {
           </div>
           <div className="space-y-3">
             <div className="flex items-center gap-2">
-              <Clock size={18} className="text-amber-600" />
+              <Clock size={18} className="text-violet-600" />
               <h3 className="text-base font-bold text-slate-900">4. Escolha o horário</h3>
             </div>
             <div className="flex gap-2 flex-wrap">
@@ -221,15 +221,15 @@ export default function Booking() {
                     key={h}
                     onClick={() => setSlot(h)}
                     className={`px-4 py-2 rounded-lg border-2 text-sm font-medium transition-all ${slot === h
-                      ? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
-                      : 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
+                      ? 'border-violet-500 bg-gradient-to-r from-violet-500 to-violet-600 text-white shadow-md'
+                      : 'border-slate-200 text-slate-700 hover:border-violet-300 hover:bg-violet-50'
                       }`}
                   >
                     {h}
                   </button>
                 ))
               ) : (
-                <p className="text-sm text-amber-600 py-2 font-medium">Nenhum horário disponível para esta data.</p>
+                <p className="text-sm text-violet-600 py-2 font-medium">Nenhum horário disponível para esta data.</p>
               )}
             </div>
           </div>
@@ -256,7 +256,7 @@ export default function Booking() {
               </div>
               <div className="flex justify-between pt-2 border-t border-slate-200">
                 <span className="font-bold text-slate-900">Total:</span>
-                <span className="font-bold text-lg text-amber-600">{currency(selectedService.price)}</span>
+                <span className="font-bold text-lg text-violet-600">{currency(selectedService.price)}</span>
               </div>
             </div>
           </div>
diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx
index e12b0d7..d8b9f0f 100644
--- a/web/src/pages/Profile.tsx
+++ b/web/src/pages/Profile.tsx
@@ -14,8 +14,8 @@ import { Calendar, ShoppingBag, User, Clock, Heart, Star, MapPin } from 'lucide-
 import { supabase } from '../lib/supabase'
 import { ReviewModal } from '../components/ReviewModal'
 
-const statusColor: Record<string, 'amber' | 'green' | 'slate' | 'red'> = {
-  pendente: 'amber',
+const statusColor: Record<string, 'violet' | 'green' | 'slate' | 'red'> = {
+  pendente: 'violet',
   confirmado: 'green',
   concluido: 'green',
   cancelado: 'red',
@@ -90,7 +90,7 @@ export default function Profile() {
     return (
       <div className="flex items-center justify-center py-20">
         <div className="text-center">
-          <div className="w-10 h-10 border-4 border-slate-200 border-t-amber-500 rounded-full animate-spin mx-auto mb-3" />
+          <div className="w-10 h-10 border-4 border-slate-200 border-t-violet-500 rounded-full animate-spin mx-auto mb-3" />
           <p className="text-slate-500 text-sm">A carregar perfil...</p>
         </div>
       </div>
@@ -100,15 +100,15 @@ export default function Profile() {
   if (!authId) {
     return (
       <div className="text-center py-16">
-        <div className="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
-          <User size={28} className="text-amber-600" />
+        <div className="w-16 h-16 bg-violet-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
+          <User size={28} className="text-violet-600" />
         </div>
         <p className="text-slate-700 font-semibold mb-1">Sessão não encontrada</p>
         <p className="text-slate-500 text-sm mb-4">Faz login para ver o teu perfil.</p>
         <button
           type="button"
           onClick={() => navigate('/login', { replace: true })}
-          className="px-5 py-2 bg-amber-500 text-white text-sm font-semibold rounded-xl hover:bg-amber-600 transition-colors"
+          className="px-5 py-2 bg-violet-500 text-white text-sm font-semibold rounded-xl hover:bg-violet-600 transition-colors"
         >
           Ir para login
         </button>
@@ -132,16 +132,16 @@ export default function Profile() {
 
       <div className="space-y-8">
         {/* Profile Header */}
-        <Card className="p-6 bg-gradient-to-br from-amber-50 via-white to-orange-50 border-amber-100">
+        <Card className="p-6 bg-gradient-to-br from-violet-50 via-white to-orange-50 border-violet-100">
           <div className="flex items-center gap-4">
-            <div className="w-16 h-16 bg-gradient-to-br from-amber-400 to-amber-600 rounded-2xl flex items-center justify-center text-white shadow-lg flex-shrink-0">
+            <div className="w-16 h-16 bg-gradient-to-br from-violet-400 to-violet-600 rounded-2xl flex items-center justify-center text-white shadow-lg flex-shrink-0">
               <User size={28} />
             </div>
             <div className="flex-1 min-w-0">
               <h1 className="text-2xl font-bold text-slate-900 truncate">Olá, {displayName}!</h1>
               <p className="text-sm text-slate-500 truncate">{authEmail}</p>
               <div className="flex items-center gap-2 mt-2">
-                <Badge color="amber" variant="soft">Cliente</Badge>
+                <Badge color="violet" variant="soft">Cliente</Badge>
                 {favoriteShops.length > 0 && (
                   <span className="flex items-center gap-1 text-xs text-rose-500 font-medium">
                     <Heart size={12} className="fill-rose-500" /> {favoriteShops.length} favorita{favoriteShops.length > 1 ? 's' : ''}
@@ -172,15 +172,15 @@ export default function Profile() {
                       </div>
                     )}
                     <div className="flex-1 min-w-0">
-                      <p className="font-bold text-slate-900 truncate group-hover:text-amber-700 transition-colors">{shop.name}</p>
+                      <p className="font-bold text-slate-900 truncate group-hover:text-violet-700 transition-colors">{shop.name}</p>
                       {shop.address && (
                         <p className="text-xs text-slate-500 flex items-center gap-1 mt-0.5 truncate">
                           <MapPin size={10} /> {shop.address}
                         </p>
                       )}
                       {shop.rating > 0 && (
-                        <p className="text-xs text-amber-600 flex items-center gap-1 mt-1">
-                          <Star size={10} className="fill-amber-400 text-amber-400" />
+                        <p className="text-xs text-violet-600 flex items-center gap-1 mt-1">
+                          <Star size={10} className="fill-violet-400 text-violet-400" />
                           {shop.rating.toFixed(1)}
                         </p>
                       )}
@@ -195,7 +195,7 @@ export default function Profile() {
         {/* Agendamentos */}
         <section className="space-y-3">
           <div className="flex items-center gap-2">
-            <Calendar size={20} className="text-amber-600" />
+            <Calendar size={20} className="text-violet-600" />
             <h2 className="text-xl font-bold text-slate-900">Agendamentos</h2>
             <Badge color="slate" variant="soft">{myAppointments.length}</Badge>
           </div>
@@ -233,9 +233,9 @@ export default function Profile() {
                         {canReview && (
                           <button
                             onClick={() => setReviewTarget({ appointmentId: a.id, shopId: a.shopId, shopName: shop?.name ?? 'Barbearia' })}
-                            className="flex items-center gap-1.5 mt-2 text-xs font-semibold text-amber-600 hover:text-amber-700 bg-amber-50 hover:bg-amber-100 px-3 py-1.5 rounded-lg transition-colors"
+                            className="flex items-center gap-1.5 mt-2 text-xs font-semibold text-violet-600 hover:text-violet-700 bg-violet-50 hover:bg-violet-100 px-3 py-1.5 rounded-lg transition-colors"
                           >
-                            <Star size={12} className="fill-amber-400 text-amber-400" />
+                            <Star size={12} className="fill-violet-400 text-violet-400" />
                             Avaliar atendimento
                           </button>
                         )}
@@ -246,7 +246,7 @@ export default function Profile() {
                         )}
                       </div>
                       <div className="text-right flex-shrink-0">
-                        <p className="text-lg font-bold text-amber-600">{currency(a.total)}</p>
+                        <p className="text-lg font-bold text-violet-600">{currency(a.total)}</p>
                       </div>
                     </div>
                   </Card>
@@ -259,7 +259,7 @@ export default function Profile() {
         {/* Pedidos */}
         <section className="space-y-3">
           <div className="flex items-center gap-2">
-            <ShoppingBag size={20} className="text-amber-600" />
+            <ShoppingBag size={20} className="text-violet-600" />
             <h2 className="text-xl font-bold text-slate-900">Pedidos</h2>
             <Badge color="slate" variant="soft">{myOrders.length}</Badge>
           </div>
@@ -294,7 +294,7 @@ export default function Profile() {
                         </p>
                       </div>
                       <div className="text-right flex-shrink-0">
-                        <p className="text-lg font-bold text-amber-600">{currency(o.total)}</p>
+                        <p className="text-lg font-bold text-violet-600">{currency(o.total)}</p>
                       </div>
                     </div>
                   </Card>
diff --git a/web/src/pages/ShopDetails.tsx b/web/src/pages/ShopDetails.tsx
index 50360e2..a21fbfd 100644
--- a/web/src/pages/ShopDetails.tsx
+++ b/web/src/pages/ShopDetails.tsx
@@ -67,7 +67,7 @@ export default function ShopDetails() {
         </div>
         <div className="absolute bottom-4 left-4 space-y-1 text-white">
           <div className="flex items-center gap-2 text-sm">
-            <Star size={14} className="fill-amber-400 text-amber-400" />
+            <Star size={14} className="fill-violet-400 text-violet-400" />
             <span className="font-semibold">{(shop.rating || 0).toFixed(1)}</span>
           </div>
           <h1 className="text-2xl font-semibold">{shop.name}</h1>