style: унифицировать стили модальных окон календаря

Проблема: модальные окна имели разные стили overlay и z-index:
- EventModal: без backdrop-blur-sm, z-[100]
- ViewEventDetailsModal/ViewDayEventsModal: с backdrop-blur-sm, z-50
- CalendarSubscriptionsModal: без backdrop-blur-sm, z-[100]

Изменения:
- Все модальные окна теперь используют единый стиль overlay:
  * bg-black/50 backdrop-blur-sm (затемнение + размытие фона)
  * z-[100] (одинаковый z-index для всех)
  * p-4 (отступы для мобильных устройств)

- Добавлены плавные transitions:
  * Overlay: transition-all duration-200
  * Модальное окно: transition-all duration-300 ease-out

- Улучшен UX:
  * Единообразное визуальное оформление
  * Плавные переходы при открытии/закрытии
  * Красивый эффект размытия фона

Затронутые компоненты:
- EventModal.tsx
- ViewEventDetailsModal.tsx
- ViewDayEventsModal.tsx
- CalendarSubscriptionsModal.tsx
This commit is contained in:
igor_nadein 2026-02-25 02:01:34 +03:00
parent 224cd66322
commit ef58ad2bf6
4 changed files with 8 additions and 8 deletions

View File

@ -138,8 +138,8 @@ export function CalendarSubscriptionsModal({ isOpen, onClose, onUpdate }: Props)
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4">
<div className="w-full max-w-2xl rounded-2xl bg-white shadow-xl">
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
<div className="w-full max-w-2xl rounded-2xl bg-white shadow-xl transition-all duration-300 ease-out">
{/* Header */}
<div className="flex items-center justify-between border-b border-gray-100 px-6 py-4">
<h3 className="text-lg font-semibold text-gray-900">Подписки на календари</h3>

View File

@ -331,8 +331,8 @@ export function EventModal({
if (!isOpen || !editingEvent) return null;
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4">
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold text-gray-900">
{editingEvent.id ? "Редактировать событие" : "Создать событие"}

View File

@ -42,8 +42,8 @@ export function ViewDayEventsModal({
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
<div className="mb-4 flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-gray-900">События на {capitalizedDate}</h3>

View File

@ -65,8 +65,8 @@ export function ViewEventDetailsModal({
const capitalizedEnd = formatDateTime(event.end).charAt(0).toUpperCase() + formatDateTime(event.end).slice(1);
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
<div className="mb-4 flex items-start justify-between">
<div className="flex-1 min-w-0 pr-3">
<div className="flex items-center gap-2 mb-1">