feat(ui): 💄 Face lift

apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx

@@ -99,15 +99,17 @@ 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)}
@@ -115,7 +117,10 @@ export const ChoiceItemNode = ({
             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>

apps/builder/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'}

apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemsList.tsx

@@ -44,14 +44,17 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
   }
   useEventListener('mousemove', handleStepMove)
 
-  const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (expandedPlaceholderIndex === undefined || !draggedChoiceItem) return
-    e.stopPropagation()
+  const handleMouseUp = (e: MouseEvent) => {
+    if (!draggedChoiceItem) return
+    if (expandedPlaceholderIndex !== -1) {
+      e.stopPropagation()
+      createChoiceItem(draggedChoiceItem, expandedPlaceholderIndex)
+    }
     setMouseOverBlockId(undefined)
     setExpandedPlaceholderIndex(undefined)
     setDraggedChoiceItem(undefined)
-    createChoiceItem(draggedChoiceItem, expandedPlaceholderIndex)
   }
+  useEventListener('mouseup', handleMouseUp, undefined, { capture: true })
 
   const handleStepMouseDown = (
     { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
@@ -76,15 +79,10 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
   const stopPropagating = (e: React.MouseEvent) => e.stopPropagation()
 
   return (
-    <Stack
-      flex={1}
-      spacing={1}
-      onMouseUpCapture={handleMouseUp}
-      onClick={stopPropagating}
-    >
+    <Stack flex={1} spacing={1} onClick={stopPropagating}>
       <Flex
         h={expandedPlaceholderIndex === 0 ? '50px' : '2px'}
-        bgColor={'gray.400'}
+        bgColor={'gray.300'}
         visibility={showSortPlaceholders ? 'visible' : 'hidden'}
         rounded="lg"
         transition={showSortPlaceholders ? 'height 200ms' : 'none'}
@@ -107,7 +105,7 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
                 ? '50px'
                 : '2px'
             }
-            bgColor={'gray.400'}
+            bgColor={'gray.300'}
             visibility={showSortPlaceholders ? 'visible' : 'hidden'}
             rounded="lg"
             transition={showSortPlaceholders ? 'height 200ms' : 'none'}
@@ -118,13 +116,15 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
         <Flex
           px="4"
           py="2"
-          bgColor="gray.200"
-          borderWidth="2px"
+          borderWidth="1px"
+          borderColor="gray.300"
+          bgColor="gray.50"
           rounded="md"
           pos="relative"
           align="center"
+          cursor="not-allowed"
         >
-          <Text>Default</Text>
+          <Text color="gray.500">Default</Text>
           <SourceEndpoint
             source={{
               blockId: step.blockId,
@@ -140,7 +140,6 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
         <Portal>
           <ChoiceItemNodeOverlay
             item={draggedChoiceItem}
-            onMouseUp={handleMouseUp}
             pos="fixed"
             top="0"
             left="0"