🐛 (theme) Fix progress bar background color

Author: baptisteArno

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

@@ -5,6 +5,7 @@ import { NumberInput } from '@/components/inputs'
 import { FormLabel, HStack } from '@chakra-ui/react'
 import { ProgressBar } from '@typebot.io/schemas'
 import {
+  defaultProgressBarBackgroundColor,
   defaultProgressBarColor,
   defaultProgressBarIsEnabled,
   defaultProgressBarPlacement,
@@ -38,6 +39,9 @@ export const ProgressBarForm = ({
   const updateThickness = (thickness?: number) =>
     onProgressBarChange({ ...progressBar, thickness })
 
+  const updateBackgroundColor = (backgroundColor: string) =>
+    onProgressBarChange({ ...progressBar, backgroundColor })
+
   return (
     <SwitchWithRelatedSettings
       label={'Enable progress bar?'}
@@ -53,6 +57,17 @@ export const ProgressBarForm = ({
         items={progressBarPlacements}
       />
 
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" mr="0">
+          Background color:
+        </FormLabel>
+        <ColorPicker
+          defaultValue={
+            progressBar?.backgroundColor ?? defaultProgressBarBackgroundColor
+          }
+          onColorChange={updateBackgroundColor}
+        />
+      </HStack>
       <HStack justifyContent="space-between">
         <FormLabel mb="0" mr="0">
           Color:

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.67",
+  "version": "0.2.68",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/assets/index.css

@@ -427,7 +427,7 @@ select option {
 
 .typebot-progress-bar-container {
   background-color: rgba(
-    var(--typebot-button-bg-rgb),
+    var(--typebot-progress-bar-bg-rgb),
     calc(var(--selectable-alpha-ratio) * 0.12)
   );
 

packages/embeds/js/src/utils/setCssVariablesValue.ts

@@ -49,7 +49,7 @@ const cssVariableNames = {
     progressBar: {
       position: '--typebot-progress-bar-position',
       color: '--typebot-progress-bar-color',
-      colorRgb: '--typebot-progress-bar-color-rgb',
+      colorRgb: '--typebot-progress-bar-bg-rgb',
       height: '--typebot-progress-bar-height',
       top: '--typebot-progress-bar-top',
       bottom: '--typebot-progress-bar-bottom',

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.67",
+  "version": "0.2.68",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.67",
+  "version": "0.2.68",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",