feat: style improvements

src/components/ModalCalendar.tsx

@@ -5,9 +5,9 @@ import { Dispatch, StateUpdater, useState } from "preact/hooks";
 import { Calendar, CalendarPassThroughMethodOptions } from "primereact/calendar";
 import { FormEvent } from "primereact/ts-helpers";
 import Button from "./ui/Button";
-import ModalWindow from "./ui/Modal";
+import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 
-interface ModalCalendarProps {
+interface ModalCalendarProps extends ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
@@ -27,10 +27,18 @@ const TRANSITIONS = {
   },
 };
 
-const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpen, onClose, onChange, value }) => {
+const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({
+  isOpen,
+  setIsOpen,
+  onClose,
+  onChange,
+  value,
+  ...rest
+}) => {
   const [showTime, setShowTime] = useState(false);
   return (
     <ModalWindow
+      {...rest}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       onClose={() => {
@@ -38,7 +46,6 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
         setShowTime(false);
       }}
       className="md:h-[40rem] md:w-[30rem]"
-      zIndex={60}
     >
       <div class="w-full flex-1 self-start">
         <Calendar

src/components/ModalTags.tsx

@@ -3,14 +3,14 @@ import { BookOpenIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline
 import { FunctionComponent } from "preact";
 import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
 import Button from "./ui/Button";
-import ModalWindow from "./ui/Modal";
+import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 
 export interface ITags {
   first: string;
   second: string;
 }
 
-interface ModalTagsProps {
+interface ModalTagsProps extends ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
@@ -22,7 +22,15 @@ interface ModalTagsProps {
   };
 }
 
-const ModalTags: FunctionComponent<ModalTagsProps> = ({ isOpen, setIsOpen, onClose, onChange, value, tagsList }) => {
+const ModalTags: FunctionComponent<ModalTagsProps> = ({
+  isOpen,
+  setIsOpen,
+  onClose,
+  onChange,
+  value,
+  tagsList,
+  ...rest
+}) => {
   const [showFirstTags, setShowFirstTags] = useState(false);
   const [showSecondTags, setShowSecondTags] = useState(false);
   useEffect(() => {
@@ -34,6 +42,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({ isOpen, setIsOpen, onClo
   return (
     <ModalWindow
       isOpen={isOpen}
+      {...rest}
       setIsOpen={setIsOpen}
       onClose={() => {
         onClose!();

src/components/ui/Dialog.tsx

@@ -23,15 +23,12 @@ const Dialog: FunctionComponent<DialogProps> = ({
   if (!isOpen) return null;
 
   return (
-    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="fixed inset-0 z-150 flex items-center justify-center bg-black/50">
       <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
         <h2 class="mb-4 text-xl font-semibold">{title}</h2>
-        <p class="mb-6">{content}</p>
+        <p class="mb-6 text-sm sm:text-[1rem]">{content}</p>
         <div class="flex justify-end gap-4">
-          <Button
-            onClick={() => setIsOpen(false)}
-            className="bg-gray-200 text-gray-800 hover:bg-gray-300"
-          >
+          <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
             {cancelText}
           </Button>
           <Button
@@ -49,4 +46,4 @@ const Dialog: FunctionComponent<DialogProps> = ({
   );
 };
 
-export default Dialog; 
+export default Dialog;

src/components/ui/Modal.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
 import { Dispatch, StateUpdater, useEffect } from "preact/hooks";
 
-interface ModalWindowProps {
+export interface ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;