✨ Add dark mode (#191)

Closes #189

apps/builder/src/components/AlertInfo.tsx

@@ -1,7 +1,7 @@
 import { AlertProps, Alert, AlertIcon } from '@chakra-ui/react'
 
 export const AlertInfo = (props: AlertProps) => (
-  <Alert status="info" bgColor={'blue.50'} rounded="md" {...props}>
+  <Alert status="info" rounded="md" {...props}>
     <AlertIcon />
     {props.children}
   </Alert>

apps/builder/src/components/CodeEditor.tsx

@@ -1,4 +1,10 @@
-import { Box, BoxProps, HStack } from '@chakra-ui/react'
+import {
+  Box,
+  BoxProps,
+  HStack,
+  useColorMode,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { json, jsonParseLinter } from '@codemirror/lang-json'
@@ -11,6 +17,7 @@ import { linter, LintSource } from '@codemirror/lint'
 import { VariablesButton } from '@/features/variables'
 import { Variable } from 'models'
 import { env } from 'utils'
+import { espresso, dracula } from 'thememirror'
 
 const linterExtension = linter(jsonParseLinter() as unknown as LintSource)
 
@@ -33,6 +40,7 @@ export const CodeEditor = ({
   debounceTimeout = 1000,
   ...props
 }: Props & Omit<BoxProps, 'onChange'>) => {
+  const isDark = useColorMode().colorMode === 'dark'
   const editorContainer = useRef<HTMLDivElement | null>(null)
   const editorView = useRef<EditorView | null>(null)
   const [, setPlainTextValue] = useState(value)
@@ -84,6 +92,7 @@ export const CodeEditor = ({
       updateListenerExtension,
       basicSetup,
       EditorState.readOnly.of(isReadOnly),
+      isDark ? dracula : espresso,
     ]
     if (lang === 'json') {
       extensions.push(json())
@@ -130,7 +139,13 @@ export const CodeEditor = ({
   }
 
   return (
-    <HStack align="flex-end" spacing={0}>
+    <HStack
+      align="flex-end"
+      spacing={0}
+      borderWidth={'1px'}
+      borderRadius="md"
+      bg={useColorModeValue('#FCFCFC', '#2D2F3F')}
+    >
       <Box
         w={isVariableButtonDisplayed ? 'calc(100% - 32px)' : '100%'}
         ref={editorContainer}

apps/builder/src/components/EditableEmojiOrImageIcon.tsx

@@ -5,6 +5,7 @@ import {
   PopoverTrigger,
   PopoverContent,
   Flex,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import React from 'react'
 import { EmojiOrImageIcon } from './EmojiOrImageIcon'
@@ -23,6 +24,8 @@ export const EditableEmojiOrImageIcon = ({
   onChangeIcon,
   boxSize,
 }: Props) => {
+  const bg = useColorModeValue('gray.100', 'gray.700')
+
   return (
     <Popover isLazy>
       {({ onClose }: { onClose: () => void }) => (
@@ -32,7 +35,9 @@ export const EditableEmojiOrImageIcon = ({
               cursor="pointer"
               p="2"
               rounded="md"
-              _hover={{ bgColor: 'gray.100' }}
+              _hover={{
+                bg,
+              }}
               transition="background-color 0.2s"
               data-testid="editable-icon"
             >

apps/builder/src/components/SearchableDropdown.tsx

@@ -3,12 +3,13 @@ import {
   useOutsideClick,
   Flex,
   Popover,
-  PopoverTrigger,
   Input,
   PopoverContent,
   Button,
   InputProps,
   HStack,
+  useColorModeValue,
+  PopoverAnchor,
 } from '@chakra-ui/react'
 import { Variable } from 'models'
 import { useState, useRef, useEffect, ChangeEvent, ReactNode } from 'react'
@@ -32,6 +33,7 @@ export const SearchableDropdown = ({
   onValueChange,
   ...inputProps
 }: Props) => {
+  const bg = useColorModeValue('gray.200', 'gray.700')
   const [carretPosition, setCarretPosition] = useState<number>(0)
   const { onOpen, onClose, isOpen } = useDisclosure()
   const [inputValue, setInputValue] = useState(selectedItem ?? '')
@@ -172,13 +174,13 @@ export const SearchableDropdown = ({
         offset={[0, 0]}
         isLazy
       >
-        <PopoverTrigger>
+        <PopoverAnchor>
           <HStack spacing={0} align={'flex-end'} w="full">
             <Input
               ref={inputRef}
               value={inputValue}
               onChange={onInputChange}
-              onClick={onOpen}
+              onFocus={onOpen}
               type="text"
               onKeyUp={handleKeyUp}
               {...inputProps}
@@ -190,7 +192,7 @@ export const SearchableDropdown = ({
               />
             )}
           </HStack>
-        </PopoverTrigger>
+        </PopoverAnchor>
         <PopoverContent
           maxH="35vh"
           overflowY="scroll"
@@ -215,9 +217,7 @@ export const SearchableDropdown = ({
                     colorScheme="gray"
                     role="menuitem"
                     variant="ghost"
-                    bgColor={
-                      keyboardFocusIndex === idx ? 'gray.200' : 'transparent'
-                    }
+                    bg={keyboardFocusIndex === idx ? bg : 'transparent'}
                     justifyContent="flex-start"
                   >
                     {typeof item === 'string' ? item : item.label}

apps/builder/src/components/VariableSearchInput.tsx

@@ -1,6 +1,5 @@
 import {
   useDisclosure,
-  useOutsideClick,
   Flex,
   Popover,
   PopoverTrigger,
@@ -10,6 +9,9 @@ import {
   InputProps,
   IconButton,
   HStack,
+  useColorModeValue,
+  PopoverAnchor,
+  useOutsideClick,
 } from '@chakra-ui/react'
 import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor'
@@ -35,6 +37,7 @@ export const VariableSearchInput = ({
   debounceTimeout = 1000,
   ...inputProps
 }: Props) => {
+  const bg = useColorModeValue('gray.200', 'gray.700')
   const { onOpen, onClose, isOpen } = useDisclosure()
   const { typebot, createVariable, deleteVariable, updateVariable } =
     useTypebot()
@@ -56,7 +59,7 @@ export const VariableSearchInput = ({
     number | undefined
   >()
   const dropdownRef = useRef(null)
-  const inputRef = useRef(null)
+  const inputRef = useRef<HTMLInputElement>(null)
   const createVariableItemRef = useRef<HTMLButtonElement | null>(null)
   const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
 
@@ -80,7 +83,6 @@ export const VariableSearchInput = ({
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
     debounced(e.target.value)
-    onOpen()
     if (e.target.value === '') {
       onSelectVariable(undefined)
       setFilteredItems([...variables.slice(0, 50)])
@@ -175,18 +177,18 @@ export const VariableSearchInput = ({
         isLazy
         offset={[0, 2]}
       >
-        <PopoverTrigger>
+        <PopoverAnchor>
           <Input
             data-testid="variables-input"
             ref={inputRef}
             value={inputValue}
             onChange={onInputChange}
-            onClick={onOpen}
+            onFocus={onOpen}
             onKeyUp={handleKeyUp}
             placeholder={inputProps.placeholder ?? 'Select a variable'}
             {...inputProps}
           />
-        </PopoverTrigger>
+        </PopoverAnchor>
         <PopoverContent
           maxH="35vh"
           overflowY="scroll"
@@ -207,7 +209,7 @@ export const VariableSearchInput = ({
               variant="ghost"
               justifyContent="flex-start"
               leftIcon={<PlusIcon />}
-              bgColor={keyboardFocusIndex === 0 ? 'gray.200' : 'transparent'}
+              bgColor={keyboardFocusIndex === 0 ? bg : 'transparent'}
             >
               Create &quot;{inputValue}&quot;
             </Button>
@@ -232,9 +234,7 @@ export const VariableSearchInput = ({
                     variant="ghost"
                     justifyContent="space-between"
                     bgColor={
-                      keyboardFocusIndex === indexInList
-                        ? 'gray.200'
-                        : 'transparent'
+                      keyboardFocusIndex === indexInList ? bg : 'transparent'
                     }
                   >
                     {item.name}

apps/builder/src/components/inputs/TextBox.tsx

@@ -106,7 +106,6 @@ export const TextBox = ({
       onKeyUp={handleKeyUp}
       onClick={handleKeyUp}
       onChange={handleChange}
-      bgColor={'white'}
       {...props}
     />
   )