⚡ (theme) Support for image background

Closes #414

apps/builder/src/features/theme/components/general/BackgroundContent.tsx

@@ -1,4 +1,15 @@
-import { Flex, Text } from '@chakra-ui/react'
+import { ImageUploadContent } from '@/components/ImageUploadContent'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import {
+  Flex,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  Image,
+  Button,
+} from '@chakra-ui/react'
+import { isNotEmpty } from '@typebot.io/lib'
 import { Background, BackgroundType } from '@typebot.io/schemas'
 import React from 'react'
 import { ColorPicker } from '../../../../components/ColorPicker'
@@ -14,6 +25,7 @@ export const BackgroundContent = ({
   background,
   onBackgroundContentChange,
 }: BackgroundContentProps) => {
+  const { typebot } = useTypebot()
   const handleContentChange = (content: string) =>
     onBackgroundContentChange(content)
 
@@ -30,9 +42,30 @@ export const BackgroundContent = ({
       )
     case BackgroundType.IMAGE:
       return (
-        <Flex>
-          <Text>Image</Text>
-        </Flex>
+        <Popover isLazy placement="top">
+          <PopoverTrigger>
+            {isNotEmpty(background.content) ? (
+              <Image
+                src={background.content}
+                alt="Background image"
+                cursor="pointer"
+                _hover={{ filter: 'brightness(.9)' }}
+                transition="filter 200ms"
+                rounded="md"
+              />
+            ) : (
+              <Button>Select an image</Button>
+            )}
+          </PopoverTrigger>
+          <PopoverContent p="4">
+            <ImageUploadContent
+              filePath={`typebots/${typebot?.id}/background`}
+              defaultUrl={background.content}
+              onSubmit={handleContentChange}
+              isGiphyEnabled={false}
+            />
+          </PopoverContent>
+        </Popover>
       )
     default:
       return <></>

apps/builder/src/features/theme/components/general/BackgroundSelector.tsx

@@ -16,7 +16,8 @@ export const BackgroundSelector = ({
   onBackgroundChange,
 }: Props) => {
   const handleBackgroundTypeChange = (type: BackgroundType) =>
-    background && onBackgroundChange({ ...background, type })
+    background &&
+    onBackgroundChange({ ...background, type, content: undefined })
 
   const handleBackgroundContentChange = (content: string) =>
     background && onBackgroundChange({ ...background, content })

apps/builder/src/features/theme/components/general/BackgroundTypeRadioButtons.tsx

@@ -18,7 +18,7 @@ export const BackgroundTypeRadioButtons = ({
   backgroundType,
   onBackgroundTypeChange,
 }: Props) => {
-  const options = ['Color', 'None']
+  const options = ['Color', 'Image', 'None']
 
   const { getRootProps, getRadioProps } = useRadioGroup({
     name: 'background-type',
@@ -55,10 +55,9 @@ export const RadioCard = (props: UseRadioProps & { children: ReactNode }) => {
       <Flex
         {...checkbox}
         cursor="pointer"
-        borderWidth="1px"
+        borderWidth="2px"
         borderRadius="md"
         _checked={{
-          borderWidth: '2px',
           borderColor: 'blue.400',
         }}
         _hover={{