refactor: Align Modal component with project-wide style

Changes to match existing modal patterns:
- Update z-index from z-50 to z-[100] for consistency
- Add backdrop-blur-sm to backdrop for modern glass effect
- Change shadow-2xl to shadow-xl (project standard)
- Move max-h-[90vh] to container level (not content div)
- Move overflow-y-auto to container for proper scrolling
- Update close button from rounded-lg to rounded-full
- Change button padding from p-2 to p-1 for tighter look
- Remove border-b from header, use mb-4 instead
- Change h2 to h3 for header title (semantic hierarchy)
- Add bottom padding div for proper spacing

Style now matches CalendarModal, EventModal, and ViewEventDetailsModal patterns
This commit is contained in:
igor_nadein 2026-02-28 13:29:08 +03:00
parent a92a7dcdcd
commit ba8cee22d3

View File

@ -128,7 +128,7 @@ export function Modal({
<div
ref={modalRef}
onClick={handleBackdropClick}
className={`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 transition-opacity duration-200 ${
className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-opacity duration-200 ${
isAnimating ? "opacity-100" : "opacity-0"
}`}
role="dialog"
@ -137,23 +137,23 @@ export function Modal({
>
<div
ref={contentRef}
className={`flex flex-col rounded-2xl bg-white shadow-2xl transition-all duration-200 ${modalSizeClass} ${
className={`flex flex-col rounded-2xl bg-white shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-200 ${modalSizeClass} ${
isAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0"
} ${className}`}
>
{/* Header */}
{(title || showCloseButton || showFullscreenToggle) && (
<div className="flex shrink-0 items-center justify-between border-b border-gray-200 px-6 py-4">
<div className="flex shrink-0 items-center justify-between mb-4 px-6 pt-6">
{title && (
<h2 id="modal-title" className="text-lg font-semibold text-gray-900">
<h3 id="modal-title" className="text-lg font-semibold text-gray-900">
{title}
</h2>
</h3>
)}
<div className="ml-auto flex items-center gap-2">
{showFullscreenToggle && (
<button
onClick={() => setIsFullscreen(!isFullscreen)}
className="rounded-lg p-2 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
className="rounded-full p-1 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
title={isFullscreen ? "Выйти из полноэкранного режима" : "Полноэкранный режим"}
>
{isFullscreen ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
@ -162,7 +162,7 @@ export function Modal({
{showCloseButton && (
<button
onClick={onClose}
className="rounded-lg p-2 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
className="rounded-full p-1 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
title="Закрыть"
>
<X size={20} />
@ -173,12 +173,15 @@ export function Modal({
)}
{/* Content */}
<div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
<div className="px-6">{children}</div>
{/* Footer */}
{footer && (
<div className="shrink-0 border-t border-gray-200 px-6 py-4">{footer}</div>
<div className="shrink-0 border-t border-gray-200 px-6 py-4 mt-4">{footer}</div>
)}
{/* Bottom padding */}
<div className="pb-6" />
</div>
</div>
);