feat(editor): 💄 UI bump

apps/builder/components/editor/StepsSideBar/StepCard.tsx

@@ -25,13 +25,13 @@ export const StepCard = ({
     <Flex pos="relative">
       <HStack
         borderWidth="1px"
+        borderColor="gray.200"
         rounded="lg"
         flex="1"
         cursor={'grab'}
         opacity={isMouseDown ? '0.4' : '1'}
         onMouseDown={handleMouseDown}
-        bgColor="white"
+        bgColor="gray.50"
-        shadow="sm"
         px="4"
         py="2"
         _hover={{ shadow: 'md' }}

apps/builder/components/editor/StepsSideBar/StepSideBar.tsx

@@ -74,7 +74,7 @@ export const StepsSideBar = () => {
 
   return (
     <Flex
-      w="340px"
+      w="360px"
       pos="absolute"
       left="0"
       h={`calc(100vh - ${headerHeight}px)`}
@@ -82,7 +82,7 @@ export const StepsSideBar = () => {
       pl="4"
       py="4"
       onMouseLeave={handleMouseLeave}
-      transform={isExtended ? 'translateX(0)' : 'translateX(-340px)'}
+      transform={isExtended ? 'translateX(0)' : 'translateX(-350px)'}
       transition="transform 350ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s"
     >
       <Stack
@@ -92,8 +92,8 @@ export const StepsSideBar = () => {
         borderWidth="1px"
         pt="2"
         pb="10"
-        px="2"
+        px="4"
-        bgColor="gray.50"
+        bgColor="white"
         spacing={6}
         userSelect="none"
         overflowY="scroll"
@@ -115,7 +115,7 @@ export const StepsSideBar = () => {
           <Text fontSize="sm" fontWeight="semibold" color="gray.600">
             Bubbles
           </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
             {Object.values(BubbleStepType).map((type) => (
               <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
             ))}
@@ -126,7 +126,7 @@ export const StepsSideBar = () => {
           <Text fontSize="sm" fontWeight="semibold" color="gray.600">
             Inputs
           </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
             {Object.values(InputStepType).map((type) => (
               <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
             ))}
@@ -137,7 +137,7 @@ export const StepsSideBar = () => {
           <Text fontSize="sm" fontWeight="semibold" color="gray.600">
             Logic
           </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
             {Object.values(LogicStepType).map((type) => (
               <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
             ))}
@@ -148,7 +148,7 @@ export const StepsSideBar = () => {
           <Text fontSize="sm" fontWeight="semibold" color="gray.600">
             Integrations
           </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
             {Object.values(IntegrationStepType).map((type) => (
               <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
             ))}

apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx

@@ -2,6 +2,7 @@ import { useEventListener } from '@chakra-ui/hooks'
 import assert from 'assert'
 import { useGraph, ConnectingIds } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { colors } from 'libs/theme'
 import React, { useMemo, useState } from 'react'
 import {
   computeConnectingEdgePath,
@@ -91,7 +92,7 @@ export const DrawingEdge = () => {
   return (
     <path
       d={path}
-      stroke="#1a5fff"
+      stroke={colors.blue[400]}
       strokeWidth="2px"
       markerEnd="url(#blue-arrow)"
       fill="none"

apps/builder/components/shared/Graph/Edges/Edge.tsx

@@ -10,6 +10,7 @@ import { Edge as EdgeProps } from 'models'
 import { Portal, useDisclosure } from '@chakra-ui/react'
 import { useTypebot } from 'contexts/TypebotContext'
 import { EdgeMenu } from './EdgeMenu'
+import { colors } from 'libs/theme'
 
 export type AnchorsPositionProps = {
   sourcePosition: Coordinates
@@ -124,7 +125,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
       <path
         data-testid="edge"
         d={path}
-        stroke={isPreviewing ? '#1a5fff' : '#718096'}
+        stroke={isPreviewing ? colors.blue[400] : colors.gray[400]}
         strokeWidth="2px"
         markerEnd={isPreviewing ? 'url(#blue-arrow)' : 'url(#arrow)'}
         fill="none"

apps/builder/components/shared/Graph/Edges/Edges.tsx

@@ -1,4 +1,5 @@
 import { chakra } from '@chakra-ui/system'
+import { colors } from 'libs/theme'
 import { Edge as EdgeProps } from 'models'
 import React from 'react'
 import { AnswersCount } from 'services/analytics'
@@ -51,7 +52,7 @@ export const Edges = ({
       >
         <path
           d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
-          fill="#718096"
+          fill={colors.gray[400]}
         />
       </marker>
       <marker
@@ -66,7 +67,7 @@ export const Edges = ({
       >
         <path
           d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
-          fill="#1a5fff"
+          fill={colors.blue[400]}
         />
       </marker>
       <marker

apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex } from '@chakra-ui/react'
+import { BoxProps, Flex } from '@chakra-ui/react'
 import { useGraph } from 'contexts/GraphContext'
 import { Source } from 'models'
 import React, { MouseEvent, useEffect, useRef, useState } from 'react'
@@ -10,7 +10,12 @@ export const SourceEndpoint = ({
   source: Source
 }) => {
   const [ranOnce, setRanOnce] = useState(false)
-  const { setConnectingIds, addSourceEndpoint, blocksCoordinates } = useGraph()
+  const {
+    setConnectingIds,
+    addSourceEndpoint,
+    blocksCoordinates,
+    previewingEdge,
+  } = useGraph()
   const ref = useRef<HTMLDivElement | null>(null)
 
   const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
@@ -35,19 +40,35 @@ export const SourceEndpoint = ({
     <Flex
       ref={ref}
       data-testid="endpoint"
-      boxSize="18px"
+      boxSize="32px"
       rounded="full"
       onMouseDownCapture={handleMouseDown}
       cursor="copy"
-      borderWidth="1px"
-      borderColor="gray.400"
-      bgColor="white"
       justify="center"
       align="center"
       pointerEvents="all"
       {...props}
     >
-      <Box bgColor="gray.400" rounded="full" boxSize="6px" />
+      <Flex
+        boxSize="20px"
+        justify="center"
+        align="center"
+        bgColor="gray.100"
+        rounded="full"
+      >
+        <Flex
+          boxSize="13px"
+          rounded="full"
+          borderWidth="3.5px"
+          shadow={`sm`}
+          borderColor={
+            previewingEdge?.from.stepId === source.stepId &&
+            previewingEdge.from.itemId === source.itemId
+              ? 'blue.300'
+              : 'blue.200'
+          }
+        />
+      </Flex>
     </Flex>
   )
 }

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -115,12 +115,11 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
             ref={setMultipleRefs([ref, blockRef])}
             data-testid="block"
             p="4"
-            rounded="lg"
+            rounded="xl"
-            bgColor="blue.50"
+            bgColor="#ffffff"
-            backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
             borderWidth="2px"
             borderColor={
-              isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
+              isConnecting || isOpened || isPreviewing ? 'blue.400' : '#ffffff'
             }
             w="300px"
             transition="border 300ms, box-shadow 200ms"
@@ -134,7 +133,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
             cursor={isMouseDown ? 'grabbing' : 'pointer'}
-            boxShadow="0px 0px 0px 1px #e9edf3;"
+            shadow="md"
             _hover={{ shadow: 'lg' }}
             zIndex={focusedBlockId === block.id ? 10 : 1}
           >

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx

@@ -3,7 +3,13 @@ import { ContextMenu } from 'components/shared/ContextMenu'
 import { Coordinates } from 'contexts/GraphContext'
 import { NodePosition, useDragDistance } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext'
-import { ButtonItem, Item, ItemIndices, ItemType } from 'models'
+import {
+  ButtonItem,
+  ChoiceInputStep,
+  Item,
+  ItemIndices,
+  ItemType,
+} from 'models'
 import React, { useRef, useState } from 'react'
 import { setMultipleRefs } from 'services/utils'
 import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
@@ -31,6 +37,11 @@ export const ItemNode = ({
   const { typebot } = useTypebot()
   const [isMouseOver, setIsMouseOver] = useState(false)
   const itemRef = useRef<HTMLDivElement | null>(null)
+  const isConnectable = !(
+    typebot?.blocks[indices.blockIndex].steps[
+      indices.stepIndex
+    ] as ChoiceInputStep
+  )?.options?.isMultipleChoice
   const onDrag = (position: NodePosition) => {
     if (!onMouseDown || item.type !== ItemType.BUTTON) return
     onMouseDown(position, item)
@@ -61,8 +72,9 @@ export const ItemNode = ({
           transition="box-shadow 200ms"
           borderWidth="1px"
           rounded="md"
-          borderColor={isOpened ? 'blue.400' : 'gray.300'}
+          borderColor={isOpened ? 'blue.400' : 'gray.100'}
           pointerEvents={isReadOnly ? 'none' : 'all'}
+          bgColor="white"
           w="full"
         >
           <ItemNodeContent
@@ -71,7 +83,7 @@ export const ItemNode = ({
             indices={indices}
             isLastItem={isLastItem}
           />
-          {typebot && (
+          {typebot && isConnectable && (
             <SourceEndpoint
               source={{
                 blockId: typebot.blocks[indices.blockIndex].id,
@@ -79,7 +91,7 @@ export const ItemNode = ({
                 itemId: item.id,
               }}
               pos="absolute"
-              right="15px"
+              right="-49px"
               pointerEvents="all"
             />
           )}

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx

@@ -62,7 +62,7 @@ export const ButtonNodeContent = ({
   }
 
   return (
-    <Flex px={4} py={2} justify="center" w="90%">
+    <Flex px={4} py={2} justify="center" w="90%" pos="relative">
       <Editable
         ref={editableRef}
         flex="1"
@@ -82,7 +82,12 @@ export const ButtonNodeContent = ({
       </Editable>
       <Fade
         in={isMouseOver}
-        style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
+        style={{
+          position: 'absolute',
+          bottom: '-15px',
+          zIndex: 3,
+          left: '90px',
+        }}
         unmountOnExit
       >
         <IconButton
@@ -90,7 +95,7 @@ export const ButtonNodeContent = ({
           icon={<PlusIcon />}
           size="xs"
           shadow="md"
-          colorScheme="blue"
+          colorScheme="gray"
           onClick={handlePlusClick}
         />
       </Fade>

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodesList.tsx

@@ -30,6 +30,9 @@ export const ItemNodesList = ({
     (draggedItem && mouseOverBlock?.id === blockId) ?? false
   const showPlaceholders = draggedItem && !isReadOnly
 
+  const isLastStep =
+    typebot?.blocks[blockIndex].steps[stepIndex + 1] === undefined
+
   const [position, setPosition] = useState({
     x: 0,
     y: 0,
@@ -148,7 +151,7 @@ export const ItemNodesList = ({
           />
         </Stack>
       ))}
-      <Stack>
+      {isLastStep && (
         <Flex
           px="4"
           py="2"
@@ -167,10 +170,10 @@ export const ItemNodesList = ({
               stepId: step.id,
             }}
             pos="absolute"
-            right="15px"
+            right="-49px"
           />
         </Flex>
-      </Stack>
+      )}
 
       {draggedItem && draggedItem.stepId === step.id && (
         <Portal>

apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx

@@ -171,12 +171,13 @@ export const StepNode = ({
                 userSelect="none"
                 p="3"
                 borderWidth="1px"
-                borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.300'}
+                borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.200'}
                 rounded="lg"
                 cursor={'pointer'}
-                bgColor="white"
+                bgColor="gray.50"
                 align="flex-start"
                 w="full"
+                transition="border-color 0.2s"
               >
                 <StepIcon
                   type={step.type}
@@ -197,8 +198,8 @@ export const StepNode = ({
                       stepId: step.id,
                     }}
                     pos="absolute"
-                    right="15px"
+                    right="-34px"
-                    bottom="18px"
+                    bottom="10px"
                   />
                 )}
               </HStack>

apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx

@@ -103,7 +103,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
       flex="1"
       ref={textEditorRef}
       borderWidth="2px"
-      borderColor="blue.500"
+      borderColor="blue.400"
       rounded="md"
       onMouseDown={handleMouseDown}
       pos="relative"

apps/builder/layouts/editor/Board.tsx

@@ -14,7 +14,15 @@ export const Board = () => {
   const { rightPanel } = useEditor()
 
   return (
-    <Flex flex="1" pos="relative" bgColor="gray.50" h="full">
+    <Flex
+      flex="1"
+      pos="relative"
+      h="full"
+      background="#f4f5f8"
+      backgroundImage="radial-gradient(#c6d0e1 1px, transparent 0)"
+      backgroundSize="40px 40px"
+      backgroundPosition="-19px -19px"
+    >
       <GraphDndContext>
         <StepsSideBar />
         <GraphProvider blocks={typebot?.blocks ?? []} isReadOnly={isReadOnly}>

apps/builder/libs/theme.ts

@@ -5,7 +5,7 @@ const fonts = {
   body: 'Open Sans',
 }
 
-const colors = {
+export const colors = {
   gray: {
     50: '#F9FAFB',
     100: '#F3F4F6',

apps/builder/pages/_app.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AppProps } from 'next/app'
 import { SessionProvider } from 'next-auth/react'
 import { ChakraProvider } from '@chakra-ui/react'
-import { customTheme } from 'libs/chakra'
+import { customTheme } from 'libs/theme'
 import { useRouterProgressBar } from 'libs/routerProgressBar'
 import 'assets/styles/routerProgressBar.css'
 import 'assets/styles/plate.css'

apps/builder/services/graph.ts

@@ -9,6 +9,8 @@ import {
 } from 'contexts/GraphContext'
 import { roundCorners } from 'svg-round-corners'
 
+const roundSize = 20
+
 export const computeDropOffPath = (
   sourcePosition: Coordinates,
   sourceTop: number
@@ -18,7 +20,10 @@ export const computeDropOffPath = (
     x: sourceCoord.x + 20,
     y: sourceCoord.y + 80,
   })
-  return roundCorners(`M${sourceCoord.x},${sourceCoord.y} ${segments}`, 10).path
+  return roundCorners(
+    `M${sourceCoord.x},${sourceCoord.y} ${segments}`,
+    roundSize
+  ).path
 }
 
 export const computeSourceCoordinates = (
@@ -222,7 +227,7 @@ export const computeEdgePath = ({
   })
   return roundCorners(
     `M${sourcePosition.x},${sourcePosition.y} ${segments}`,
-    10
+    roundSize
   ).path
 }
 
@@ -268,7 +273,7 @@ export const computeEdgePathToMouse = ({
   )
   return roundCorners(
     `M${sourcePosition.x},${sourcePosition.y} ${segments}`,
-    10
+    roundSize
   ).path
 }
 
@@ -280,7 +285,7 @@ export const getEndpointTopOffset = (
   if (!endpointId) return
   const endpointRef = endpoints[endpointId]?.ref
   if (!endpointRef?.current) return
-  const endpointHeight = 18
+  const endpointHeight = 28
   return (
     endpointRef.current.getBoundingClientRect().top +
     endpointHeight / 2 -