From 2f586c32b91be59b436d30c96b091f224644b79a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 7 Mar 2024 02:01:26 +0100
Subject: [PATCH] Fixed design of new flow modal

---
 src/frontend/package-lock.json                 | 10 ++++++++++
 src/frontend/package.json                      |  1 +
 .../src/components/NewFLowCard2/index.tsx      | 18 +++++++++---------
 .../src/components/undrawCards/index.tsx       | 11 ++++-------
 src/frontend/src/modals/baseModal/index.tsx    |  5 +++++
 src/frontend/src/pages/MainPage/index.tsx      |  2 +-
 src/frontend/tailwind.config.js                |  1 +
 7 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index fed40b4f0..791e88f0e 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -100,6 +100,7 @@
         "prettier-plugin-tailwindcss": "^0.3.0",
         "pretty-quick": "^3.1.3",
         "tailwindcss": "^3.3.3",
+        "tailwindcss-dotted-background": "^1.1.0",
         "typescript": "^5.2.2",
         "vite": "^4.5.2"
       }
@@ -10854,6 +10855,15 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/tailwindcss-dotted-background": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-dotted-background/-/tailwindcss-dotted-background-1.1.0.tgz",
+      "integrity": "sha512-uFzCW5Bpyn8XgppTkyzqdHecH7XCDaS/eXvegDrOCYE6PxTm7dRrD9cuUcZe6mxQFVfkLu9rDmHJdqbjz9FdLA==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": "^3.0.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 41c9fcd43..4df74af54 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -122,6 +122,7 @@
     "prettier-plugin-tailwindcss": "^0.3.0",
     "pretty-quick": "^3.1.3",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-dotted-background": "^1.1.0",
     "typescript": "^5.2.2",
     "vite": "^4.5.2"
   }
diff --git a/src/frontend/src/components/NewFLowCard2/index.tsx b/src/frontend/src/components/NewFLowCard2/index.tsx
index 096cd2314..fe63413e2 100644
--- a/src/frontend/src/components/NewFLowCard2/index.tsx
+++ b/src/frontend/src/components/NewFLowCard2/index.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent } from "../ui/card";
+import { Card, CardContent, CardDescription, CardTitle } from "../ui/card";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useNavigate } from "react-router-dom";
 import IconComponent from "../genericIconComponent";
@@ -12,15 +12,15 @@ export default function NewFlowCardComponent() {
             addFlow(true).then((id) => {
                 navigate("/flow/" + id);
             });
-        }} className="pt-4 w-80 h-72 cursor-pointer">
-            <CardContent className="w-full h-full flex flex-col items-center align-middle justify-center">
-                        
-                    <IconComponent
-                        className={cn("h-12 w-12 text-muted-foreground")}
-                        name="SquarePen"
-                    />
-                    <div className="text-center text-muted-foreground"> Create from scratch</div>
+        }} className="pt-4 w-80 h-64 cursor-pointer bg-background">
+            <CardContent className="w-full h-full">
+                <div className="bg-dotted-spacing-6 bg-dotted-muted-foreground bg-dotted-radius-px rounded-md bg-muted w-full h-full flex flex-col items-center align-middle justify-center">
+                    
+                </div>
             </CardContent>
+            <CardDescription className="px-6 pb-4">
+                <CardTitle className="text-primary text-lg">Blank Flow</CardTitle>
+            </CardDescription>
         </Card>
     )
 }
\ No newline at end of file
diff --git a/src/frontend/src/components/undrawCards/index.tsx b/src/frontend/src/components/undrawCards/index.tsx
index 2ac189e71..3368d64b8 100644
--- a/src/frontend/src/components/undrawCards/index.tsx
+++ b/src/frontend/src/components/undrawCards/index.tsx
@@ -35,17 +35,14 @@ export default function UndrawCardComponent({
             addFlow(true, flow).then((id) => {
                 navigate("/flow/" + id);
             });
-        }} className="pt-4 w-80 h-72 cursor-pointer">
+        }} className="pt-4 w-80 h-64 cursor-pointer bg-background">
             <CardContent className="w-full h-full">
-                <div className="rounded-md border border-border bg-background w-full h-full flex flex-col items-center align-middle justify-center">
+                <div className="rounded-md p-1 bg-muted w-full h-full flex flex-col items-center align-middle justify-center">
                     {selectImage()}
                 </div>
             </CardContent>
-            <CardDescription className="px-4 pb-4">
-                <CardTitle>{flow.name}</CardTitle>
-                <ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}>
-                    <div className="pt-1 truncate-doubleline">{flow.description}</div>
-                </ShadTooltip>
+            <CardDescription className="px-6 pb-4">
+                <CardTitle className="text-primary text-lg">{flow.name}</CardTitle>
             </CardDescription>
         </Card>
     )
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index c66b89a6a..695d4a72e 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -66,6 +66,7 @@ interface BaseModalProps {
     | "small"
     | "medium"
     | "large"
+    | "three-cards"
     | "large-thin"
     | "large-h-full"
     | "small-h-full"
@@ -129,6 +130,10 @@ function BaseModal({
       minWidth = "min-w-[85vw]";
       height = "h-[80vh]";
       break;
+    case "three-cards":
+      minWidth = "min-w-[1066px]";
+      height = "h-[80vh]";
+      break;
     case "large-thin":
       minWidth = "min-w-[65vw]";
       height = "h-[80vh]";
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index e2d30fe4f..e2dfe124b 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -118,7 +118,7 @@ export default function HomePage(): JSX.Element {
           <Outlet />
         </div>
       </div>
-      <BaseModal open={openModal} setOpen={setOpenModal}>
+      <BaseModal size="three-cards" open={openModal} setOpen={setOpenModal}>
         <BaseModal.Header
           description={"Select a template below"}
         >
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 540289fc8..1dbe0b02d 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -224,5 +224,6 @@ module.exports = {
     }),
     require("@tailwindcss/typography"),
     require("daisyui"),
+    require('tailwindcss-dotted-background'),
   ],
 };