🩹 Fix dark mode bg remaining issues

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>