✨ Add dark mode (#191)

Closes #189

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx

@@ -3,6 +3,7 @@ import {
   HStack,
   Popover,
   PopoverTrigger,
+  useColorModeValue,
   useDisclosure,
   useEventListener,
 } from '@chakra-ui/react'
@@ -26,17 +27,17 @@ import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
 import { useRouter } from 'next/router'
 import { SettingsModal } from './SettingsPopoverContent/SettingsModal'
 import { BlockSettings } from './SettingsPopoverContent/SettingsPopoverContent'
-import { TextBubbleEditor } from '../../../../blocks/bubbles/textBubble/components/TextBubbleEditor'
 import { TargetEndpoint } from '../../Endpoints'
 import { MediaBubblePopoverContent } from './MediaBubblePopoverContent'
-import {
-  NodePosition,
-  useBlockDnd,
-  useDragDistance,
-  useGraph,
-} from '../../../providers'
 import { ContextMenu } from '@/components/ContextMenu'
 import { setMultipleRefs } from '@/utils/helpers'
+import { TextBubbleEditor } from '@/features/blocks/bubbles/textBubble'
+import {
+  NodePosition,
+  useGraph,
+  useBlockDnd,
+  useDragDistance,
+} from '../../../providers'
 import { hasDefaultConnector } from '../../../utils'
 
 export const BlockNode = ({
@@ -50,6 +51,9 @@ export const BlockNode = ({
   indices: { blockIndex: number; groupIndex: number }
   onMouseDown?: (blockNodePosition: NodePosition, block: DraggableBlock) => void
 }) => {
+  const bg = useColorModeValue('gray.50', 'gray.850')
+  const previewingBorderColor = useColorModeValue('blue.400', 'blue.300')
+  const borderColor = useColorModeValue('gray.200', 'gray.800')
   const { query } = useRouter()
   const {
     setConnectingIds,
@@ -165,7 +169,7 @@ export const BlockNode = ({
     <ContextMenu<HTMLDivElement>
       renderMenu={() => <BlockNodeContextMenu indices={indices} />}
     >
-      {(ref, isOpened) => (
+      {(ref, isContextMenuOpened) => (
         <Popover
           placement="left"
           isLazy
@@ -186,12 +190,18 @@ export const BlockNode = ({
                 flex="1"
                 userSelect="none"
                 p="3"
-                borderWidth={isOpened || isPreviewing ? '2px' : '1px'}
-                borderColor={isOpened || isPreviewing ? 'blue.400' : 'gray.200'}
-                margin={isOpened || isPreviewing ? '-1px' : 0}
+                borderWidth={
+                  isContextMenuOpened || isPreviewing ? '2px' : '1px'
+                }
+                borderColor={
+                  isContextMenuOpened || isPreviewing
+                    ? previewingBorderColor
+                    : borderColor
+                }
+                margin={isContextMenuOpened || isPreviewing ? '-1px' : 0}
                 rounded="lg"
                 cursor={'pointer'}
-                bgColor="gray.50"
+                bg={bg}
                 align="flex-start"
                 w="full"
                 transition="border-color 0.2s"

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeOverlay.tsx

@@ -1,5 +1,5 @@
 import { BlockIcon } from '@/features/editor'
-import { StackProps, HStack } from '@chakra-ui/react'
+import { StackProps, HStack, useColorModeValue } from '@chakra-ui/react'
 import { StartBlock, Block, BlockIndices } from 'models'
 import { BlockNodeContent } from './BlockNodeContent/BlockNodeContent'
 
@@ -13,7 +13,8 @@ export const BlockNodeOverlay = ({
       p="3"
       borderWidth="1px"
       rounded="lg"
-      bgColor="white"
+      borderColor={useColorModeValue('gray.200', 'gray.800')}
+      bgColor={useColorModeValue('gray.50', 'gray.850')}
       cursor={'grab'}
       w="264px"
       pointerEvents="none"

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodesList.tsx

@@ -10,6 +10,8 @@ import { useEffect, useRef, useState } from 'react'
 import { useTypebot } from '@/features/editor'
 import { BlockNode } from './BlockNode'
 import { BlockNodeOverlay } from './BlockNodeOverlay'
+import { PlaceholderNode } from '../PlaceholderNode'
+import { isDefined } from 'utils'
 
 type Props = {
   groupId: string
@@ -49,7 +51,7 @@ export const BlockNodesList = ({
   const isDraggingOnCurrentGroup =
     (draggedBlock || draggedBlockType) && mouseOverGroup?.id === groupId
   const showSortPlaceholders =
-    !isStartGroup && (draggedBlock || draggedBlockType)
+    !isStartGroup && isDefined(draggedBlock || draggedBlockType)
 
   useEffect(() => {
     if (mouseOverGroup?.id !== groupId) setExpandedPlaceholderIndex(undefined)
@@ -126,17 +128,10 @@ export const BlockNodesList = ({
       transition="none"
       pointerEvents={isReadOnly || isStartGroup ? 'none' : 'auto'}
     >
-      <Flex
-        ref={handlePushElementRef(0)}
-        h={
-          showSortPlaceholders && expandedPlaceholderIndex === 0
-            ? '50px'
-            : '2px'
-        }
-        bgColor={'gray.300'}
-        visibility={showSortPlaceholders ? 'visible' : 'hidden'}
-        rounded="lg"
-        transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+      <PlaceholderNode
+        isVisible={showSortPlaceholders}
+        isExpanded={expandedPlaceholderIndex === 0}
+        onRef={handlePushElementRef(0)}
       />
       {typebot &&
         blocks.map((block, idx) => (
@@ -148,17 +143,10 @@ export const BlockNodesList = ({
               isConnectable={blocks.length - 1 === idx}
               onMouseDown={handleBlockMouseDown(idx)}
             />
-            <Flex
-              ref={handlePushElementRef(idx + 1)}
-              h={
-                showSortPlaceholders && expandedPlaceholderIndex === idx + 1
-                  ? '50px'
-                  : '2px'
-              }
-              bgColor={'gray.300'}
-              visibility={showSortPlaceholders ? 'visible' : 'hidden'}
-              rounded="lg"
-              transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+            <PlaceholderNode
+              isVisible={showSortPlaceholders}
+              isExpanded={expandedPlaceholderIndex === idx + 1}
+              onRef={handlePushElementRef(idx + 1)}
             />
           </Stack>
         ))}