🩹 Fix dark mode bg remaining issues

apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx

@@ -23,11 +23,7 @@ export const MakeComSettings = ({ block }: Props) => {
 
   return (
     <Stack spacing={4}>
-      <Alert
-        status={webhook?.url ? 'success' : 'info'}
-        bgColor={webhook?.url ? undefined : 'blue.50'}
-        rounded="md"
-      >
+      <Alert status={webhook?.url ? 'success' : 'info'} rounded="md">
         <AlertIcon />
         {webhook?.url ? (
           <>Your scenario is correctly configured 🚀</>

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/WebhookSettings.tsx

@@ -155,7 +155,7 @@ export const WebhookSettings = ({
   return (
     <Stack spacing={4}>
       {provider && (
-        <Alert status={'info'} bgColor={'blue.50'} rounded="md">
+        <Alert status={'info'} rounded="md">
           <AlertIcon />
           <Stack>
             <Text>Head up to {provider.name} to configure this block:</Text>

apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx

@@ -23,11 +23,7 @@ export const ZapierSettings = ({ block }: Props) => {
 
   return (
     <Stack spacing={4}>
-      <Alert
-        status={webhook?.url ? 'success' : 'info'}
-        bgColor={webhook?.url ? undefined : 'blue.50'}
-        rounded="md"
-      >
+      <Alert status={webhook?.url ? 'success' : 'info'} rounded="md">
         <AlertIcon />
         {webhook?.url ? (
           <>Your zap is correctly configured 🚀</>

apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx

@@ -13,6 +13,7 @@ import {
   PopoverArrow,
   PopoverBody,
   useEventListener,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor'
 import {
@@ -36,6 +37,7 @@ type Props = {
 }
 
 export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
+  const comparisonValueBg = useColorModeValue('gray.200', 'gray.700')
   const { typebot, createItem, updateItem } = useTypebot()
   const { openedItemId, setOpenedItemId } = useGraph()
   const ref = useRef<HTMLDivElement | null>(null)
@@ -106,7 +108,7 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
                       </Text>
                     )}
                     {comparison?.value && (
-                      <Tag bgColor={'gray.200'}>
+                      <Tag bgColor={comparisonValueBg}>
                         <Text noOfLines={1}>{comparison.value}</Text>
                       </Tag>
                     )}

apps/builder/src/features/editor/components/PreviewDrawer.tsx

@@ -6,6 +6,7 @@ import {
   Flex,
   FlexProps,
   useColorMode,
+  useColorModeValue,
   useEventListener,
   UseToastOptions,
   VStack,
@@ -70,7 +71,7 @@ export const PreviewDrawer = () => {
       top={`0`}
       h={`100%`}
       w={`${width}px`}
-      bgColor={isDark ? 'gray.900' : 'white'}
+      bgColor={useColorModeValue('white', 'gray.900')}
       borderLeftWidth={'1px'}
       shadow="lg"
       borderLeftRadius={'lg'}
@@ -126,7 +127,7 @@ const ResizeHandle = (props: FlexProps & { isDark: boolean }) => {
       w="15px"
       h="50px"
       borderWidth={'1px'}
-      bgColor={props.isDark ? 'gray.800' : 'white'}
+      bgColor={useColorModeValue('white', 'gray.800')}
       cursor={'col-resize'}
       justifyContent={'center'}
       align={'center'}
@@ -135,11 +136,15 @@ const ResizeHandle = (props: FlexProps & { isDark: boolean }) => {
     >
       <Box
         w="2px"
-        bgColor={props.isDark ? 'gray.600' : 'gray.300'}
+        bgColor={useColorModeValue('gray.300', 'gray.600')}
         h="70%"
         mr="0.5"
       />
-      <Box w="2px" bgColor={props.isDark ? 'gray.600' : 'gray.300'} h="70%" />
+      <Box
+        w="2px"
+        bgColor={useColorModeValue('gray.300', 'gray.600')}
+        h="70%"
+      />
     </Flex>
   )
 }

apps/builder/src/features/editor/components/TypebotHeader/EditableTypebotName.tsx

@@ -3,6 +3,7 @@ import {
   EditablePreview,
   EditableInput,
   Tooltip,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
 
@@ -14,6 +15,7 @@ export const EditableTypebotName = ({
   defaultName,
   onNewName,
 }: EditableProps) => {
+  const emptyNameBg = useColorModeValue('gray.100', 'gray.700')
   const [currentName, setCurrentName] = useState(defaultName)
 
   const submitNewName = (newName: string) => {
@@ -39,7 +41,7 @@ export const EditableTypebotName = ({
           fontSize="14px"
           minW="30px"
           minH="20px"
-          bgColor={currentName === '' ? 'gray.100' : 'inherit'}
+          bgColor={currentName === '' ? emptyNameBg : 'inherit'}
         />
         <EditableInput fontSize="14px" />
       </Editable>

apps/builder/src/features/folders/components/TypebotButtonOverlay.tsx

@@ -1,6 +1,14 @@
-import { Box, BoxProps, Flex, Text, VStack } from '@chakra-ui/react'
+import {
+  Box,
+  BoxProps,
+  Flex,
+  Text,
+  useColorModeValue,
+  VStack,
+} from '@chakra-ui/react'
 import { GlobeIcon, ToolIcon } from '@/components/icons'
 import { TypebotInDashboard } from '@/features/dashboard'
+import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
 
 type Props = {
   typebot: TypebotInDashboard
@@ -20,25 +28,19 @@ export const TypebotCardOverlay = ({ typebot, ...props }: Props) => {
       pointerEvents="none"
       borderWidth={1}
       rounded="md"
-      bgColor="white"
+      bgColor={useColorModeValue('white', 'gray.700')}
       shadow="lg"
       opacity={0.7}
       {...props}
     >
       <VStack spacing={4}>
         <Flex
-          boxSize="45px"
           rounded="full"
           justifyContent="center"
           alignItems="center"
-          bgColor={typebot.publishedTypebotId ? 'blue.500' : 'gray.400'}
-          color="white"
+          fontSize={'4xl'}
         >
-          {typebot.publishedTypebotId ? (
-            <GlobeIcon fill="white" fontSize="20px" />
-          ) : (
-            <ToolIcon fill="white" fontSize="20px" />
-          )}
+          <EmojiOrImageIcon icon={typebot.icon} boxSize={'35px'} />
         </Flex>
         <Text>{typebot.name}</Text>
       </VStack>

apps/builder/src/features/graph/components/Edges/DropOffEdge.tsx

@@ -1,4 +1,11 @@
-import { VStack, Tag, Text, Tooltip } from '@chakra-ui/react'
+import {
+  VStack,
+  Tag,
+  Text,
+  Tooltip,
+  useColorModeValue,
+  theme,
+} from '@chakra-ui/react'
 import { useGraph, useGroupsCoordinates } from '../../providers'
 import { useTypebot } from '@/features/editor'
 import { useWorkspace } from '@/features/workspace'
@@ -23,6 +30,10 @@ export const DropOffEdge = ({
   groupId,
   onUnlockProPlanClick,
 }: Props) => {
+  const dropOffColor = useColorModeValue(
+    theme.colors.red[500],
+    theme.colors.red[300]
+  )
   const { workspace } = useWorkspace()
   const { groupsCoordinates } = useGroupsCoordinates()
   const { sourceEndpoints, graphPosition } = useGraph()
@@ -82,7 +93,7 @@ export const DropOffEdge = ({
           { x: labelCoordinates.x - 300, y: labelCoordinates.y },
           sourceTop ?? 0
         )}
-        stroke="#e53e3e"
+        stroke={dropOffColor}
         strokeWidth="2px"
         markerEnd="url(#red-arrow)"
         fill="none"
@@ -98,7 +109,7 @@ export const DropOffEdge = ({
           isDisabled={isWorkspaceProPlan}
         >
           <VStack
-            bgColor={'red.500'}
+            bgColor={dropOffColor}
             color="white"
             rounded="md"
             p="2"