blsmedia/bot
2
0
Fork 0
Code Activity

feat(theme): ✨ Add custom css settings

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-24 15:29:01 +01:00
parent b0abe5b8fa
commit 21448bcc8a
9 changed files with 88 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/builder/components/theme/SideMenu.tsx
View File

@ -8,12 +8,13 @@ import {
HStack,
Stack,
} from '@chakra-ui/react'
import { ChatIcon, CodeIcon, LayoutIcon, PencilIcon } from 'assets/icons'
import { ChatIcon, CodeIcon, PencilIcon } from 'assets/icons'
import { headerHeight } from 'components/shared/TypebotHeader'
import { useTypebot } from 'contexts/TypebotContext'
import { ChatTheme, GeneralTheme } from 'models'
import React from 'react'
import { ChatThemeSettings } from './ChatSettings'
import { CustomCssSettings } from './CustomCssSettings/CustomCssSettings'
import { GeneralSettings } from './GeneralSettings'
export const SideMenu = () => {
@ -25,6 +26,9 @@ export const SideMenu = () => {
const handleGeneralThemeChange = (general: GeneralTheme) =>
updateTypebot({ theme: { ...typebot?.theme, general } })
const handleCustomCssChange = (customCss: string) =>
updateTypebot({ theme: { ...typebot?.theme, customCss } })
return (
<Stack
flex="1"
@ -55,21 +59,6 @@ export const SideMenu = () => {
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton py={6}>
<HStack flex="1" pl={2}>
<LayoutIcon />
<Heading fontSize="lg">Layout</Heading>
</HStack>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton py={6}>
<HStack flex="1" pl={2}>
@ -94,10 +83,10 @@ export const SideMenu = () => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
<CustomCssSettings
customCss={typebot?.theme?.customCss}
onCustomCssChange={handleCustomCssChange}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>