From 66e767414e9f733412e0a4b006b3b4218b708ccb Mon Sep 17 00:00:00 2001
From: Frank Delaguila <frankdelaguila@Franks-MacBook-Pro.local>
Date: Sun, 6 Nov 2022 13:55:26 -0700
Subject: [PATCH] Fixing up Modal styles, and close button, need to add more
 elements

---
 components/modal.tsx | 84 +++++++++++++++++++++++++++-----------------
 pages/_document.tsx  |  4 ++-
 pages/index.tsx      |  8 +++--
 styles/globals.css   | 11 +++++-
 4 files changed, 70 insertions(+), 37 deletions(-)

diff --git a/components/modal.tsx b/components/modal.tsx
index b86583c..a3efb59 100644
--- a/components/modal.tsx
+++ b/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>
   );
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 3105ab4..65ba083 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document';
 export default function Document() {
   return (
     <Html>
-      <Head />
+      <Head>
+        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+      </Head>
       <body>
         <Main />
         {/* Here we will mount our modal portal */}
diff --git a/pages/index.tsx b/pages/index.tsx
index 67fa76e..f18f6b3 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -67,7 +67,7 @@ export default function Home() {
         <title>Magic Card Valuator</title>
       </Head>
 
-      <div className="absolute bg-red-800 w-96 bg-red-800 right-0 top-0 rounded-md mr-4 mt-4 p-4">
+      <div className={`fixed bg-red-800 w-96 bg-red-800 ${ error ? "right-0" : "left-full"} rounded-md mr-4 mt-4 p-8`}>
         {errorMessage}
       </div>
 
@@ -75,7 +75,6 @@ export default function Home() {
         <div className="container text-center">
           <label htmlFor="search" className="block mx-auto font-bold mb-2 text-2xl">Search for a Magic Card</label>
           <input id="search" name="search" type="text" className={`block w-full md:w-1/2 mx-auto rounded-full py-2 px-4 ${styles.search}`} onChange={debounceSearch} />
-          {error ? <p>{errorMessage}</p> : null}
         </div>
       </div>
 
@@ -92,7 +91,10 @@ export default function Home() {
                 setSelectedCard(card);
                 setModalOpen(true);
                 document.body.classList.toggle('prevent-scroll');
-              }} className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
+              }} 
+                className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2" 
+                key={card.id} 
+                alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
               )
             }
           </section>
diff --git a/styles/globals.css b/styles/globals.css
index af73c4b..edf4b34 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -22,13 +22,22 @@
 }
 
 .modal {
-  background: #1d1d1c;
+  background: #333333;
   width: 100%;
   height: 100%;
   top: 100%;
   transition: top 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.modal-close {
+  text-shadow: 0 1px 12px #000;
+  font-size: 36px;
+}
+
+.modal-flavor-text {
+  text-shadow: 0 1px 2px #000;
+}
+
 .modal.open {
   top: 0;
 }