Fixing up Modal styles, and close button, need to add more elements

components/modal.tsx

@@ -41,45 +41,65 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
 
   return (
     <ClientOnlyPortal selector="#modal-root">
-      <div ref={ref}
-        className={`fixed container rounded-t-3xl p-8 modal overflow-y-auto mt-4 ${
+      <div
+        ref={ref}
+        className={`fixed rounded-t-3xl modal overflow-y-auto max-w-screen-lg mt-4 ${
           modalOpen ? "open" : ""
         }`}
       >
-        <div className="flex">
-          <div className="w-1/2">
-            {card && 
-            <Image
-              className="w-full"
-              src={card.image_uris?.png}
-              width={100}
-              height={100}
-              alt={`${card.name} Card`}
-            />}
+        <>
+          <button
+            className="fixed flex justify-center items-center left-1/2 -translate-x-2/4 -translate-y-2/4 top-12 z-50 text-2xl"
+            aria-label="Close the modal"
+            title="Close Modal"
+            onClick={() => {
+              toggleModal(false);
+              document.body.classList.remove("prevent-scroll");
+            }}>
+            <span className="material-symbols-outlined modal-close">cancel</span>
+          </button>
+          <div className="flex justify-center items-center relative">
+            <div
+              className="bg-cover bg-no-repeat blur-sm rounded-t-3xl w-full h-96"
+              style={{
+                backgroundImage: `url(${card.image_uris?.art_crop})`,
+                backgroundPosition: "center 0",
+              }}
+            ></div>
+            <p className="absolute font-bold italic w-1/2 text-center modal-flavor-text">
+              {card.flavor_text}
+            </p>
           </div>
-          <div className="w-full pl-4">
-            <h1 className="text-3xl font-bold mb-4">{card?.name}</h1>
-            <p className="whitespace-pre-line">{card.oracle_text}</p>
-            <p className="italic">{card.flavor_text}</p>
+          <div className="container flex p-8">
             <div className="w-1/2">
-              <Pie data={data} options={{
-                plugins: {
-                  legend: {
-                    onClick: e => null
-                  }
-                }
-              }} />
+              {card && (
+                <Image
+                  className="w-full"
+                  src={card.image_uris?.png}
+                  width={100}
+                  height={100}
+                  alt={`${card.name} Card`}
+                />
+              )}
+            </div>
+            <div className="w-full pl-4">
+              <h1 className="text-3xl font-bold mb-4">{card?.name}</h1>
+              <p className="whitespace-pre-line">{card.oracle_text}</p>
+              <div className="w-1/2">
+                <Pie
+                  data={data}
+                  options={{
+                    plugins: {
+                      legend: {
+                        onClick: (e) => null,
+                      },
+                    },
+                  }}
+                />
+              </div>
             </div>
           </div>
-        </div>
-        <button
-          onClick={() => {
-            toggleModal(false);
-            document.body.classList.remove("prevent-scroll");
-          }}
-        >
-          Close
-        </button>
+        </>
       </div>
     </ClientOnlyPortal>
   );