🩹 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>
                     )}