Fixed design of new flow modal

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",

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"
   }

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">
+        }} className="pt-4 w-80 h-64 cursor-pointer bg-background">
-            <CardContent className="w-full h-full flex flex-col items-center align-middle justify-center">
+            <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">
-                    <IconComponent
+                    
-                        className={cn("h-12 w-12 text-muted-foreground")}
+                </div>
-                        name="SquarePen"
-                    />
-                    <div className="text-center text-muted-foreground"> Create from scratch</div>
             </CardContent>
+            <CardDescription className="px-6 pb-4">
+                <CardTitle className="text-primary text-lg">Blank Flow</CardTitle>
+            </CardDescription>
         </Card>
     )
 }

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">
+            <CardDescription className="px-6 pb-4">
-                <CardTitle>{flow.name}</CardTitle>
+                <CardTitle className="text-primary text-lg">{flow.name}</CardTitle>
-                <ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}>
-                    <div className="pt-1 truncate-doubleline">{flow.description}</div>
-                </ShadTooltip>
             </CardDescription>
         </Card>
     )

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]";

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"}
         >

src/frontend/tailwind.config.js

@@ -224,5 +224,6 @@ module.exports = {
     }),
     require("@tailwindcss/typography"),
     require("daisyui"),
+    require('tailwindcss-dotted-background'),
   ],
 };