From b6d40016cdad6ff4b65e963d9eee71aa22bc1df5 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 8 Apr 2022 15:49:07 -0500
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=F0=9F=92=84=20Improve=20onboar?=
 =?UTF-8?q?ding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/GettingStartedModal.tsx | 95 +++++++++++++++----
 1 file changed, 75 insertions(+), 20 deletions(-)

diff --git a/apps/builder/components/editor/GettingStartedModal.tsx b/apps/builder/components/editor/GettingStartedModal.tsx
index eeeda2cae..812f7fb86 100644
--- a/apps/builder/components/editor/GettingStartedModal.tsx
+++ b/apps/builder/components/editor/GettingStartedModal.tsx
@@ -9,7 +9,6 @@ import {
   Heading,
   List,
   ListItem,
-  ListIcon,
   Text,
   Accordion,
   AccordionButton,
@@ -17,8 +16,9 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
+  HStack,
+  Flex,
 } from '@chakra-ui/react'
-import { CheckSquareIcon } from 'assets/icons'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
@@ -40,24 +40,79 @@ export const GettingStartedModal = () => {
           <Stack spacing={4}>
             <Heading fontSize="xl">Editor basics</Heading>
             <List spacing={4}>
-              <ListItem>
-                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
-                The left side bar contains blocks that you can drag and drop to
-                the board.
-              </ListItem>
-              <ListItem>
-                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
-                You can group blocks together by dropping them below or above
-                each other
-              </ListItem>
-              <ListItem>
-                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
-                Connect the groups together
-              </ListItem>
-              <ListItem>
-                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
-                Preview your bot by clicking the preview button on the top right
-              </ListItem>
+              <HStack as={ListItem}>
+                <Flex
+                  bgColor="blue.500"
+                  rounded="full"
+                  boxSize="25px"
+                  justify="center"
+                  align="center"
+                  color="white"
+                  fontWeight="bold"
+                  flexShrink={0}
+                  fontSize="13px"
+                >
+                  1
+                </Flex>
+                <Text>
+                  The left side bar contains blocks that you can drag and drop
+                  to the board.
+                </Text>
+              </HStack>
+              <HStack as={ListItem}>
+                <Flex
+                  bgColor="blue.500"
+                  rounded="full"
+                  boxSize="25px"
+                  fontSize="13px"
+                  justify="center"
+                  align="center"
+                  color="white"
+                  fontWeight="bold"
+                  flexShrink={0}
+                >
+                  2
+                </Flex>
+                <Text>
+                  You can group blocks together by dropping them below or above
+                  each other
+                </Text>
+              </HStack>
+              <HStack as={ListItem}>
+                <Flex
+                  bgColor="blue.500"
+                  rounded="full"
+                  boxSize="25px"
+                  justify="center"
+                  align="center"
+                  color="white"
+                  fontWeight="bold"
+                  flexShrink={0}
+                  fontSize="13px"
+                >
+                  3
+                </Flex>
+                <Text>Connect the groups together</Text>
+              </HStack>
+              <HStack as={ListItem}>
+                <Flex
+                  bgColor="blue.500"
+                  rounded="full"
+                  boxSize="25px"
+                  justify="center"
+                  align="center"
+                  color="white"
+                  fontWeight="bold"
+                  flexShrink={0}
+                  fontSize="13px"
+                >
+                  4
+                </Flex>
+                <Text>
+                  Preview your bot by clicking the preview button on the top
+                  right
+                </Text>
+              </HStack>
             </List>
           </Stack>