feat(ui): 💄 Face lift

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsModal.tsx

@@ -0,0 +1,34 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  ModalBodyProps,
+} from '@chakra-ui/react'
+import React from 'react'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const SettingsModal = ({
+  isOpen,
+  onClose,
+  ...props
+}: Props & ModalBodyProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader />
+        <ModalCloseButton />
+        <ModalBody {...props}>{props.children}</ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -4,7 +4,11 @@ import {
   PopoverBody,
   useEventListener,
   Portal,
+  Stack,
+  IconButton,
+  Flex,
 } from '@chakra-ui/react'
+import { ExpandIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import {
   InputStep,
@@ -30,9 +34,10 @@ import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
 
 type Props = {
   step: Step
+  onExpandClick: () => void
 }
 
-export const SettingsPopoverContent = ({ step }: Props) => {
+export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
   const ref = useRef<HTMLDivElement | null>(null)
   const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
 
@@ -44,15 +49,33 @@ export const SettingsPopoverContent = ({ step }: Props) => {
     <Portal>
       <PopoverContent onMouseDown={handleMouseDown}>
         <PopoverArrow />
-        <PopoverBody p="6" overflowY="scroll" maxH="400px" ref={ref}>
-          <SettingsPopoverBodyContent step={step} />
+        <PopoverBody
+          px="6"
+          pb="6"
+          pt="4"
+          overflowY="scroll"
+          maxH="400px"
+          ref={ref}
+          shadow="lg"
+        >
+          <Stack>
+            <Flex justifyContent="flex-end">
+              <IconButton
+                aria-label="expand"
+                icon={<ExpandIcon />}
+                size="xs"
+                onClick={onExpandClick}
+              />
+            </Flex>
+            <StepSettings step={step} />
+          </Stack>
         </PopoverBody>
       </PopoverContent>
     </Portal>
   )
 }
 
-const SettingsPopoverBodyContent = ({ step }: Props) => {
+export const StepSettings = ({ step }: { step: Step }) => {
   const { updateStep } = useTypebot()
   const handleOptionsChange = (options: StepOptions) =>
     updateStep(step.id, { options } as Partial<InputStep>)

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsList.tsx

@@ -107,22 +107,20 @@ export const ComparisonsList = ({
           >
             <Stack
               key={comparisonId}
-              bgColor="blue.50"
               p="4"
               rounded="md"
               flex="1"
+              borderWidth="1px"
             >
               <VariableSearchInput
                 initialVariableId={comparisons.byId[comparisonId].variableId}
                 onSelectVariable={handleVariableSelected(comparisonId)}
-                bgColor="white"
                 placeholder="Search for a variable"
               />
               <DropdownList<ComparisonOperators>
                 currentItem={comparisons.byId[comparisonId].comparisonOperator}
                 onItemSelect={handleComparisonOperatorSelected(comparisonId)}
                 items={Object.values(ComparisonOperators)}
-                bgColor="white"
               />
               {comparisons.byId[comparisonId].comparisonOperator !==
                 ComparisonOperators.IS_SET && (
@@ -130,7 +128,6 @@ export const ComparisonsList = ({
                   delay={100}
                   initialValue={comparisons.byId[comparisonId].value ?? ''}
                   onChange={handleValueChange(comparisonId)}
-                  bgColor="white"
                   placeholder="Type a value..."
                 />
               )}
@@ -141,16 +138,22 @@ export const ComparisonsList = ({
                 aria-label="Remove comparison"
                 onClick={deleteComparison(comparisonId)}
                 pos="absolute"
-                left="-10px"
-                top="-10px"
+                left="-15px"
+                top="-15px"
                 size="sm"
+                shadow="md"
               />
             </Fade>
           </Flex>
         </>
       ))}
-      <Button leftIcon={<PlusIcon />} onClick={createComparison} flexShrink={0}>
-        Add
+      <Button
+        leftIcon={<PlusIcon />}
+        onClick={createComparison}
+        flexShrink={0}
+        colorScheme="blue"
+      >
+        Add a comparison
       </Button>
     </Stack>
   )

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/ExtractCellList.tsx

@@ -87,16 +87,22 @@ export const ExtractCellList = ({
                 aria-label="Remove cell"
                 onClick={deleteCell(cellId)}
                 pos="absolute"
-                left="-10px"
-                top="-10px"
+                left="-15px"
+                top="-15px"
                 size="sm"
+                shadow="md"
               />
             </Fade>
           </Flex>
         </>
       ))}
-      <Button leftIcon={<PlusIcon />} onClick={createCell} flexShrink={0}>
-        Add
+      <Button
+        leftIcon={<PlusIcon />}
+        onClick={createCell}
+        flexShrink={0}
+        colorScheme="blue"
+      >
+        Add a value
       </Button>
     </Stack>
   )
@@ -118,12 +124,11 @@ export const CellWithVariableIdStack = ({
     onCellChange({ ...cell, variableId: variable.id })
   }
   return (
-    <Stack bgColor="blue.50" p="4" rounded="md" flex="1">
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
       <DropdownList<string>
         currentItem={cell.column}
         onItemSelect={handleColumnSelect}
         items={columns}
-        bgColor="white"
         placeholder="Select a column"
       />
       <VariableSearchInput

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/UpdateCellList.tsx

@@ -87,16 +87,22 @@ export const UpdateCellList = ({
                 aria-label="Remove cell"
                 onClick={deleteCell(cellId)}
                 pos="absolute"
-                left="-10px"
-                top="-10px"
+                left="-15px"
+                top="-15px"
                 size="sm"
+                shadow="md"
               />
             </Fade>
           </Flex>
         </>
       ))}
-      <Button leftIcon={<PlusIcon />} onClick={createCell} flexShrink={0}>
-        Add
+      <Button
+        leftIcon={<PlusIcon />}
+        onClick={createCell}
+        flexShrink={0}
+        colorScheme="blue"
+      >
+        Add a value
       </Button>
     </Stack>
   )
@@ -118,12 +124,11 @@ export const CellWithValueStack = ({
     onCellChange({ ...cell, value })
   }
   return (
-    <Stack bgColor="blue.50" p="4" rounded="md" flex="1">
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
       <DropdownList<string>
         currentItem={cell.column}
         onItemSelect={handleColumnSelect}
         items={columns}
-        bgColor="white"
         placeholder="Select a column"
       />
       <InputWithVariable