Added portfolio modal

src/app/components/PlusIcon.tsx

@@ -1,7 +1,7 @@
 const PlusIcon = ({ color = "black" }: { color: string }) => (
   <svg
-    width="w-full"
-    height="w-full"
+    width="100%"
+    height="100%"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/app/components/home/AddNewCard.tsx

@@ -1,4 +1,6 @@
+import { useState } from "react";
 import PlusIcon from "../PlusIcon";
+import NewPortfolioModal from "./NewPortfolioModal";
 
 const styles = {
   wrapper:
@@ -13,22 +15,30 @@ const styles = {
 };
 
 const AddNewCard = () => {
-  const image = "home-add-new.svg";
   const title = "New Portfolio";
-  const budget = "";
+  const [isModalOpen, setModalIsOpen] = useState(false);
+
+  const openModal = () => {
+    console.log("open modal");
+    setModalIsOpen(true);
+  };
+
   return (
-    <a>
+    <a onClick={openModal}>
       <div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
         <div className={styles.header}>
           <div className={styles.imageWrapper}>
             <div className="w-1/4">
               <PlusIcon color="white" />
+              <NewPortfolioModal
+                isOpen={isModalOpen}
+                setIsOpen={setModalIsOpen}
+              />
             </div>
           </div>
         </div>
         <div className={styles.textWrapper}>
           <h1 className={styles.text}>{`${title}`}</h1>
-          <div className={styles.text}>{budget}</div>
         </div>
       </div>
     </a>

src/app/components/home/CardTiles.tsx

@@ -20,7 +20,7 @@ export default function CardTiles({
         {Portfolios.map((portfolio, index) => {
           if (index === 0) return <AddNewCard key={portfolio.id} />;
 
-          const image_idx = index % 3;
+          const image_idx = index % 4;
           return (
             <Card
               key={portfolio.id}

src/app/components/home/NewPortfolioModal.tsx

@@ -0,0 +1,80 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+
+export default function NewPortfolioModal({
+  isOpen = false,
+  setIsOpen,
+}: {
+  isOpen?: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function createPortfolio() {
+    // TODO: This will be a server action that will create a new portfolio in the database
+    console.log("create portfolio");
+  }
+
+  return (
+    <>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-900"
+                  >
+                    Create a new portfolio
+                  </Dialog.Title>
+                  <div className="mt-2">TeXT</div>
+
+                  <div className="mt-4 flex justify-end gap-2">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={closeModal}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={createPortfolio}
+                    >
+                      Create
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}

tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
         brandblue: "#14163d",
         hoverblue: "#3e4073",
         brandtan: "#d3b488",
+        hovertan: "#947750",
         brandbrown: "#3d1e05",
         brandmidblue: "#3943b7",
       },