From 868dc533ca0a2ff2ef997ed288559d753c56dce1 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Sat, 8 Feb 2025 15:06:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Enhance=20UI=20for=20create=20ty?=
 =?UTF-8?q?pebot=20and=20duplicate=20typebot=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CreateNewTypebotButtons.tsx    | 119 ++++++++++--------
 .../pages/typebots/[typebotId]/duplicate.tsx  |  88 +++++++------
 2 files changed, 113 insertions(+), 94 deletions(-)

diff --git a/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx b/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx
index 8dd6e7900..4c3eabe8b 100644
--- a/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx
+++ b/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx
@@ -95,61 +95,72 @@ export const CreateNewTypebotButtons = () => {
   };
 
   return (
-    <VStack maxW="600px" w="full" flex="1" pt="20" spacing={10}>
-      <Heading>{t("templates.buttons.heading")}</Heading>
-      <Stack w="full" spacing={6}>
-        <Button
-          variant="outline"
-          w="full"
-          py="8"
-          fontSize="lg"
-          leftIcon={
-            <ToolIcon
-              color={useColorModeValue("blue.500", "blue.300")}
-              boxSize="25px"
-              mr="2"
-            />
-          }
-          onClick={() => handleCreateSubmit()}
-          isLoading={isLoading}
-        >
-          {t("templates.buttons.fromScratchButton.label")}
-        </Button>
-        <Button
-          variant="outline"
-          w="full"
-          py="8"
-          fontSize="lg"
-          leftIcon={
-            <TemplateIcon
-              color={useColorModeValue("orange.500", "orange.300")}
-              boxSize="25px"
-              mr="2"
-            />
-          }
-          onClick={onOpen}
-          isLoading={isLoading}
-        >
-          {t("templates.buttons.fromTemplateButton.label")}
-        </Button>
-        <ImportTypebotFromFileButton
-          variant="outline"
-          w="full"
-          py="8"
-          fontSize="lg"
-          leftIcon={
-            <DownloadIcon
-              color={useColorModeValue("purple.500", "purple.300")}
-              boxSize="25px"
-              mr="2"
-            />
-          }
-          isLoading={isLoading}
-          onNewTypebot={handleCreateSubmit}
-        >
-          {t("templates.buttons.importFileButton.label")}
-        </ImportTypebotFromFileButton>
+    <VStack w="full" pt="20" spacing={10}>
+      <Stack
+        w="full"
+        maxW="650px"
+        p="10"
+        gap={10}
+        rounded="lg"
+        borderWidth={1}
+        bgColor={useColorModeValue("white", "gray.900")}
+      >
+        <Heading>{t("templates.buttons.heading")}</Heading>
+        <Stack w="full" spacing={6}>
+          <Button
+            variant="outline"
+            w="full"
+            py="8"
+            fontSize="lg"
+            leftIcon={
+              <ToolIcon
+                color={useColorModeValue("blue.500", "blue.300")}
+                boxSize="25px"
+                mr="2"
+              />
+            }
+            onClick={() => handleCreateSubmit()}
+            isLoading={isLoading}
+          >
+            {t("templates.buttons.fromScratchButton.label")}
+          </Button>
+          <Button
+            variant="outline"
+            w="full"
+            py="8"
+            fontSize="lg"
+            leftIcon={
+              <TemplateIcon
+                color={useColorModeValue("orange.500", "orange.300")}
+                boxSize="25px"
+                mr="2"
+              />
+            }
+            onClick={onOpen}
+            isLoading={isLoading}
+          >
+            {t("templates.buttons.fromTemplateButton.label")}
+          </Button>
+          <ImportTypebotFromFileButton
+            variant="outline"
+            w="full"
+            py="8"
+            fontSize="lg"
+            leftIcon={
+              <DownloadIcon
+                color={useColorModeValue("purple.500", "purple.300")}
+                boxSize="25px"
+                mr="2"
+              />
+            }
+            isLoading={isLoading}
+            onNewTypebot={handleCreateSubmit}
+          >
+            {t("templates.buttons.importFileButton.label")}
+          </ImportTypebotFromFileButton>
+        </Stack>
       </Stack>
+
       <TemplatesModal
         isOpen={isOpen}
         onClose={onClose}
diff --git a/apps/builder/src/pages/typebots/[typebotId]/duplicate.tsx b/apps/builder/src/pages/typebots/[typebotId]/duplicate.tsx
index 3ee68be49..f9871c41e 100644
--- a/apps/builder/src/pages/typebots/[typebotId]/duplicate.tsx
+++ b/apps/builder/src/pages/typebots/[typebotId]/duplicate.tsx
@@ -5,7 +5,13 @@ import { PlanTag } from "@/features/billing/components/PlanTag";
 import { useTypebot } from "@/features/editor/providers/TypebotProvider";
 import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
 import { trpc } from "@/lib/trpc";
-import { Button, HStack, Stack, Text } from "@chakra-ui/react";
+import {
+  Button,
+  HStack,
+  Stack,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
@@ -29,46 +35,48 @@ const Page = () => {
   };
 
   return (
-    <Stack
-      w="full"
-      justifyContent="center"
-      pt="10"
-      h="100vh"
-      maxW="350px"
-      mx="auto"
-      spacing={4}
-    >
-      <Text>
-        Choose a workspace to duplicate <strong>{typebot?.name}</strong> in:
-      </Text>
-      <RadioButtons
-        direction="column"
-        options={workspaces?.map((workspace) => ({
-          value: workspace.id,
-          label: (
-            <HStack w="full">
-              <EmojiOrImageIcon
-                icon={workspace.icon}
-                boxSize="16px"
-                defaultIcon={HardDriveIcon}
-              />
-              <Text>{workspace.name}</Text>
-              <PlanTag plan={workspace.plan} />
-            </HStack>
-          ),
-        }))}
-        value={selectedWorkspaceId}
-        onSelect={updateSelectedWorkspaceId}
-      />
-      <Button
-        isDisabled={!selectedWorkspaceId}
-        onClick={() => duplicateTypebot(selectedWorkspaceId as string)}
-        isLoading={isLoading}
-        colorScheme="orange"
-        size="sm"
+    <Stack w="full" justifyContent="center" pt="10" h="100vh">
+      <Stack
+        bgColor={useColorModeValue("white", "gray.900")}
+        spacing={4}
+        maxW="400px"
+        mx="auto"
+        p="6"
+        rounded="lg"
+        borderWidth={1}
       >
-        Duplicate
-      </Button>
+        <Text>
+          Choose a workspace to duplicate <strong>{typebot?.name}</strong> in:
+        </Text>
+        <RadioButtons
+          direction="column"
+          options={workspaces?.map((workspace) => ({
+            value: workspace.id,
+            label: (
+              <HStack w="full">
+                <EmojiOrImageIcon
+                  icon={workspace.icon}
+                  boxSize="16px"
+                  defaultIcon={HardDriveIcon}
+                />
+                <Text>{workspace.name}</Text>
+                <PlanTag plan={workspace.plan} />
+              </HStack>
+            ),
+          }))}
+          value={selectedWorkspaceId}
+          onSelect={updateSelectedWorkspaceId}
+        />
+        <Button
+          isDisabled={!selectedWorkspaceId}
+          onClick={() => duplicateTypebot(selectedWorkspaceId as string)}
+          isLoading={isLoading}
+          colorScheme="orange"
+          size="sm"
+        >
+          Duplicate
+        </Button>
+      </Stack>
     </Stack>
   );
 };