feat: integrate SessionCard component and enhance EditTable modal for improved session management

src/components/ModalContainer.tsx

@@ -3,8 +3,8 @@ import { useEffect, useRef } from "react";
 import useModalStore from "../stores/useModalStore";
 import { AnimatePresence, motion } from "motion/react";
 import CloseIcon from "./icons/CloseIcon";
-import Button from "./Button";
 import { clsx as cn } from "clsx";
+import NewButton from "./NewButton";
 
 function ModalContainer() {
   const { modal, setModal, position } = useModalStore();
@@ -45,7 +45,7 @@ function ModalContainer() {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className="h-full"
+          className='h-full'
         >
           <div
             ref={popoverRef}
@@ -55,30 +55,30 @@ function ModalContainer() {
               position === "right" && "items-end"
             )}
           >
-            <div className="max-h-full">
-              <div ref={divRef} className="p-[0.972vw]">
+            <div className='max-h-full'>
+              <div ref={divRef} className='p-[0.972vw]'>
                 <div
                   ref={backdropRef}
-                  className="absolute inset-0 cursor-pointer"
+                  className='absolute inset-0 cursor-pointer'
                   onClick={() => setModal(null)}
                 />
                 <div
                   ref={containerRef}
-                  className="relative w-full"
+                  className='relative w-full'
                   // style={{
                   //   height: `calc(${backdropRef.current?.clientHeight}px - 0.972vw * 2)`,
                   // }}
                 >
                   {modal}
-                  <Button
-                    onlyIcon
-                    className="absolute top-[1.667vw] right-[1.667vw] p-[0.556vw] !rounded-full bg-[#F9F9F9]"
+                  <NewButton
+                    variant='secondary'
+                    className='absolute top-[1.389vw] right-[1.389vw] p-[0.556vw]'
                     onClick={() => setModal(null)}
                   >
-                    <span className="w-[1.389vw] h-[1.389vw] text-black">
+                    <span className='w-[0.972vw] h-[0.972vw] text-[#7D7D7D]'>
                       <CloseIcon />
                     </span>
-                  </Button>
+                  </NewButton>
                 </div>
               </div>
             </div>