From 51bf5b653c90a1e448bb1d4a44cbbbef79911bf4 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 11 Apr 2024 10:15:37 +0200
Subject: [PATCH] :bug: (theme) Fix progress bar background color

---
 .../theme/components/general/ProgressBarForm.tsx  | 15 +++++++++++++++
 packages/embeds/js/package.json                   |  2 +-
 packages/embeds/js/src/assets/index.css           |  2 +-
 .../embeds/js/src/utils/setCssVariablesValue.ts   |  2 +-
 packages/embeds/nextjs/package.json               |  2 +-
 packages/embeds/react/package.json                |  2 +-
 6 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/builder/src/features/theme/components/general/ProgressBarForm.tsx b/apps/builder/src/features/theme/components/general/ProgressBarForm.tsx
index f290649ed7..10d9989350 100644
--- a/apps/builder/src/features/theme/components/general/ProgressBarForm.tsx
+++ b/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:
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 2827340e80..e9823a9fa1 100644
--- a/packages/embeds/js/package.json
+++ b/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",
diff --git a/packages/embeds/js/src/assets/index.css b/packages/embeds/js/src/assets/index.css
index 416f027362..f87c3efd1f 100644
--- a/packages/embeds/js/src/assets/index.css
+++ b/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)
   );
 
diff --git a/packages/embeds/js/src/utils/setCssVariablesValue.ts b/packages/embeds/js/src/utils/setCssVariablesValue.ts
index 134dacb6b1..95afd25c0a 100644
--- a/packages/embeds/js/src/utils/setCssVariablesValue.ts
+++ b/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',
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 23b4f012ec..90e2e5a778 100644
--- a/packages/embeds/nextjs/package.json
+++ b/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",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 888673de8d..c3785ac5a6 100644
--- a/packages/embeds/react/package.json
+++ b/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",