feat(ui): 💄 Face lift

baptisteArno · Jan 19, 2022 · 44b4785 · 44b4785 · vercel · Jan 19, 2022
1 parent f49b514
commit 44b4785
Show file tree

Hide file tree

Showing 23 changed files with 306 additions and 136 deletions.
diff --git a/apps/builder/assets/icons.tsx b/apps/builder/assets/icons.tsx
@@ -250,3 +250,12 @@ export const UserIcon = (props: IconProps) => (
     <circle cx="12" cy="7" r="4"></circle>
   </Icon>
 )
+
+export const ExpandIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polyline points="15 3 21 3 21 9"></polyline>
+    <polyline points="9 21 3 21 3 15"></polyline>
+    <line x1="21" y1="3" x2="14" y2="10"></line>
+    <line x1="3" y1="21" x2="10" y2="14"></line>
+  </Icon>
+)
diff --git a/apps/builder/components/board/Board.tsx b/apps/builder/components/board/Board.tsx
@@ -16,7 +16,7 @@ export const Board = () => {
         <StepTypesList />
         <GraphProvider>
           <Graph flex="1" />
-          <BoardMenuButton pos="absolute" right="20px" top="20px" />
+          <BoardMenuButton pos="absolute" right="40px" top="20px" />
           {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
         </GraphProvider>
       </DndContext>

diff --git a/apps/builder/components/board/BoardMenuButton.tsx b/apps/builder/components/board/BoardMenuButton.tsx
@@ -35,6 +35,8 @@ export const BoardMenuButton = (props: MenuButtonProps) => {
     <Menu>
       <MenuButton
         as={IconButton}
+        variant="outline"
+        colorScheme="blue"
         icon={<MoreVerticalIcon transform={'rotate(90deg)'} />}
         isLoading={isDownloading}
         {...props}

diff --git a/apps/builder/components/board/StepTypesList/StepCard.tsx b/apps/builder/components/board/StepTypesList/StepCard.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
+import { Flex, HStack, StackProps, Text } from '@chakra-ui/react'
 import { StepType, DraggableStepType } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useEffect, useState } from 'react'
@@ -23,46 +23,56 @@ export const StepCard = ({
 
   return (
     <Flex pos="relative">
-      <Button
-        as={HStack}
+      <HStack
         borderWidth="1px"
         rounded="lg"
         flex="1"
         cursor={'grab'}
         opacity={isMouseDown ? '0.4' : '1'}
         onMouseDown={handleMouseDown}
+        bgColor="white"
+        shadow="sm"
+        px="4"
+        py="2"
+        _hover={{ shadow: 'md' }}
+        transition="box-shadow 200ms"
       >
-        {!isMouseDown && (
+        {!isMouseDown ? (
           <>
             <StepIcon type={type} />
             <StepTypeLabel type={type} />
           </>
+        ) : (
+          <Text color="white" userSelect="none">
+            Placeholder
+          </Text>
         )}
-      </Button>
+      </HStack>
     </Flex>
   )
 }
 
 export const StepCardOverlay = ({
   type,
   ...props
-}: Omit<ButtonProps, 'type'> & { type: StepType }) => {
+}: StackProps & { type: StepType }) => {
   return (
-    <Button
-      as={HStack}
+    <HStack
       borderWidth="1px"
       rounded="lg"
-      cursor={'grab'}
+      cursor={'grabbing'}
       w="147px"
-      pos="fixed"
-      top="0"
-      left="0"
       transition="none"
       pointerEvents="none"
+      px="4"
+      py="2"
+      bgColor="white"
+      shadow="xl"
+      zIndex={2}
       {...props}
     >
       <StepIcon type={type} />
       <StepTypeLabel type={type} />
-    </Button>
+    </HStack>
   )
 }
diff --git a/apps/builder/components/board/StepTypesList/StepTypesList.tsx b/apps/builder/components/board/StepTypesList/StepTypesList.tsx
@@ -4,6 +4,7 @@ import {
   Text,
   SimpleGrid,
   useEventListener,
+  Portal,
 } from '@chakra-ui/react'
 import {
   BubbleStepType,
@@ -38,10 +39,11 @@ export const StepTypesList = () => {
   const handleMouseDown = (e: React.MouseEvent, type: DraggableStepType) => {
     const element = e.currentTarget as HTMLDivElement
     const rect = element.getBoundingClientRect()
-    const relativeX = e.clientX - rect.left
-    const relativeY = e.clientY - rect.top
-    setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
-    setRelativeCoordinates({ x: relativeX, y: relativeY })
+    setPosition({ x: rect.left, y: rect.top })
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    setRelativeCoordinates({ x, y })
+    console.log({ x: rect.left, y: rect.top })
     setDraggedStepType(type)
   }
 
@@ -60,60 +62,76 @@ export const StepTypesList = () => {
       w="320px"
       pos="absolute"
       left="10px"
-      top="20px"
-      h="calc(100vh - 100px)"
+      top="10px"
+      h="calc(100vh - 80px)"
       rounded="lg"
-      shadow="lg"
+      shadow="xl"
       borderWidth="1px"
-      zIndex="10"
+      zIndex="2"
       py="4"
       px="2"
-      bgColor="white"
+      bgColor="gray.50"
+      spacing={6}
+      userSelect="none"
     >
-      <Input placeholder="Search..." />
-      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-        Bubbles
-      </Text>
-      <SimpleGrid columns={2} spacing="2">
-        {Object.values(BubbleStepType).map((type) => (
-          <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-        ))}
-      </SimpleGrid>
+      <Input placeholder="Search..." bgColor="white" />
+      <Stack>
+        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+          Bubbles
+        </Text>
+        <SimpleGrid columns={2} spacing="2">
+          {Object.values(BubbleStepType).map((type) => (
+            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+          ))}
+        </SimpleGrid>
+      </Stack>
 
-      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-        Inputs
-      </Text>
-      <SimpleGrid columns={2} spacing="2">
-        {Object.values(InputStepType).map((type) => (
-          <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-        ))}
-      </SimpleGrid>
+      <Stack>
+        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+          Inputs
+        </Text>
+        <SimpleGrid columns={2} spacing="2">
+          {Object.values(InputStepType).map((type) => (
+            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+          ))}
+        </SimpleGrid>
+      </Stack>
 
-      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-        Logic
-      </Text>
-      <SimpleGrid columns={2} spacing="2">
-        {Object.values(LogicStepType).map((type) => (
-          <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-        ))}
-      </SimpleGrid>
+      <Stack>
+        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+          Logic
+        </Text>
+        <SimpleGrid columns={2} spacing="2">
+          {Object.values(LogicStepType).map((type) => (
+            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+          ))}
+        </SimpleGrid>
+      </Stack>
+
+      <Stack>
+        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+          Integrations
+        </Text>
+        <SimpleGrid columns={2} spacing="2">
+          {Object.values(IntegrationStepType).map((type) => (
+            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+          ))}
+        </SimpleGrid>
+      </Stack>
 
-      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-        Integrations
-      </Text>
-      <SimpleGrid columns={2} spacing="2">
-        {Object.values(IntegrationStepType).map((type) => (
-          <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-        ))}
-      </SimpleGrid>
       {draggedStepType && (
-        <StepCardOverlay
-          type={draggedStepType}
-          onMouseUp={handleMouseUp}
-          style={{
-            transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
-          }}
-        />
+        <Portal>
+          <StepCardOverlay
+            type={draggedStepType}
+            onMouseUp={handleMouseUp}
+            pos="fixed"
+            top="0"
+            left="0"
+            style={{
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+            }}
+          />
+        </Portal>
       )}
     </Stack>
   )

diff --git a/apps/builder/components/board/graph/BlockNode/BlockNode.tsx b/apps/builder/components/board/graph/BlockNode/BlockNode.tsx
@@ -25,7 +25,6 @@ export const BlockNode = ({ block }: Props) => {
   const { setMouseOverBlockId } = useDnd()
   const { draggedStep, draggedStepType } = useDnd()
   const [isMouseDown, setIsMouseDown] = useState(false)
-  const [titleValue, setTitleValue] = useState(block.title)
   const [isConnecting, setIsConnecting] = useState(false)
   const isPreviewing = useMemo(
     () =>
@@ -41,14 +40,15 @@ export const BlockNode = ({ block }: Props) => {
     )
   }, [block.id, connectingIds])
 
-  const handleTitleChange = (title: string) => setTitleValue(title)
+  const handleTitleSubmit = (title: string) => updateBlock(block.id, { title })
 
   const handleMouseDown = () => {
     setIsMouseDown(true)
   }
   const handleMouseUp = () => {
     setIsMouseDown(false)
   }
+  useEventListener('mouseup', handleMouseUp)
 
   const handleMouseMove = (event: MouseEvent) => {
     if (!isMouseDown) return
@@ -85,24 +85,31 @@ export const BlockNode = ({ block }: Props) => {
           p="4"
           rounded="lg"
           bgColor="blue.50"
+          backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
           borderWidth="2px"
           borderColor={
-            isConnecting || isOpened || isPreviewing ? 'blue.400' : 'gray.400'
+            isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
           }
           minW="300px"
-          transition="border 300ms"
+          transition="border 300ms, box-shadow 200ms"
           pos="absolute"
           style={{
             transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
           }}
           onMouseDown={handleMouseDown}
-          onMouseUp={handleMouseUp}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
+          cursor={isMouseDown ? 'grabbing' : 'pointer'}
+          boxShadow="0px 0px 0px 1px #e9edf3;"
+          _hover={{ shadow: 'lg' }}
         >
-          <Editable value={titleValue} onChange={handleTitleChange}>
+          <Editable
+            defaultValue={block.title}
+            onSubmit={handleTitleSubmit}
+            fontWeight="semibold"
+          >
             <EditablePreview
-              _hover={{ bgColor: 'blue.100' }}
+              _hover={{ bgColor: 'gray.300' }}
               px="1"
               userSelect={'none'}
             />

diff --git a/.../builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx b/.../builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx
@@ -99,23 +99,28 @@ export const ChoiceItemNode = ({
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
           justifyContent="center"
+          shadow="sm"
+          _hover={{ shadow: 'md' }}
+          transition="box-shadow 200ms"
+          borderWidth="1px"
+          rounded="md"
+          px="4"
+          py="2"
+          borderColor={isOpened ? 'blue.400' : 'gray.300'}
         >
           <Editable
             ref={ref}
-            px="4"
-            py="2"
-            rounded="md"
-            bgColor="green.200"
-            borderWidth="2px"
-            borderColor={isOpened ? 'blue.400' : 'gray.400'}
             defaultValue={item.content ?? 'Click to edit'}
             flex="1"
             startWithEditView={!isDefined(item.content)}
             onSubmit={handleInputSubmit}
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
           >
-            <EditablePreview />
+            <EditablePreview
+              w="full"
+              color={item.content !== 'Click to edit' ? 'inherit' : 'gray.500'}
+            />
             <EditableInput />
           </Editable>
           {typebot && isSingleChoiceInput(typebot.steps.byId[item.stepId]) && (
@@ -138,6 +143,8 @@ export const ChoiceItemNode = ({
               aria-label="Add item"
               icon={<PlusIcon />}
               size="xs"
+              shadow="md"
+              colorScheme="blue"
               onClick={handlePlusClick}
             />
           </Fade>

diff --git a/...r/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNodeOverlay.tsx b/...r/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNodeOverlay.tsx
@@ -15,11 +15,12 @@ export const ChoiceItemNodeOverlay = ({
       px="4"
       py="2"
       rounded="md"
-      bgColor="green.200"
-      borderWidth="2px"
-      borderColor={'gray.400'}
+      bgColor="white"
+      borderWidth="1px"
+      borderColor={'gray.300'}
       w="212px"
       pointerEvents="none"
+      shadow="lg"
       {...props}
     >
       {item.content ?? 'Click to edit'}