feat(agenda): importa cor do evento Google + UI do modal pequeno
- agendamentos.cor (TEXT); import grava cor do evento (colorId/agenda) - frontend usa ag.cor (prioridade: status > cor própria > cor do dentista) - StackModal: remove backdrop-blur (vidro); mobile vira bottom-sheet de altura auto, desktop painel pequeno com max-w; botão maximizar visível no mobile; padding responsivo Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -38,10 +38,12 @@ export const StackModal: React.FC<{ isOpen: boolean; onClose: () => void; root:
|
||||
const canBack = stack.length > 1;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 z-[70] flex items-end sm:items-center justify-center backdrop-blur-sm sm:p-4">
|
||||
<div className="fixed inset-0 bg-black/40 z-[70] flex items-end sm:items-center justify-center sm:p-4">
|
||||
<div
|
||||
className={`bg-white shadow-2xl flex flex-col overflow-hidden transition-all duration-300 w-full h-dvh rounded-none ${
|
||||
fullscreen ? 'sm:w-screen sm:h-dvh sm:rounded-none' : 'sm:w-[460px] sm:h-auto sm:max-h-[88vh] sm:rounded-3xl'
|
||||
className={`bg-white shadow-2xl flex flex-col overflow-hidden transition-all duration-300 w-full ${
|
||||
fullscreen
|
||||
? 'h-dvh max-h-none rounded-none sm:w-screen'
|
||||
: 'max-h-[90vh] rounded-t-2xl sm:w-[440px] sm:max-w-[95vw] sm:h-auto sm:max-h-[88vh] sm:rounded-3xl'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-gray-100 shrink-0">
|
||||
@@ -55,7 +57,7 @@ export const StackModal: React.FC<{ isOpen: boolean; onClose: () => void; root:
|
||||
<h3 className="font-black text-sm uppercase text-gray-800 truncate flex-1">{current.title}</h3>
|
||||
<button
|
||||
onClick={() => setFullscreen(f => !f)}
|
||||
className="hidden sm:inline-flex p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors"
|
||||
className="inline-flex p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors"
|
||||
title={fullscreen ? 'Restaurar' : 'Tela cheia'}
|
||||
>
|
||||
{fullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
|
||||
@@ -67,7 +69,7 @@ export const StackModal: React.FC<{ isOpen: boolean; onClose: () => void; root:
|
||||
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
||||
<Ctx.Provider value={{ push, pop, close }}>
|
||||
<div key={stack.length} className="animate-in slide-in-from-right-4 fade-in duration-200 p-5">
|
||||
<div key={stack.length} className="animate-in slide-in-from-right-4 fade-in duration-200 p-4 sm:p-5">
|
||||
{current.render()}
|
||||
</div>
|
||||
</Ctx.Provider>
|
||||
|
||||
Reference in New Issue
Block a user