From 9acfed63c5c103258518fbf6c79506e5458eefec Mon Sep 17 00:00:00 2001
From: Pooja <pooja@usebruno.com>
Date: Wed, 11 Feb 2026 12:38:11 +0530
Subject: [PATCH] fix: env color picker ui (#7096)

* fix: env color picker ui

* rm: toast for color change

* fix: color slider alignment
---
 packages/bruno-app/src/components/ColorBadge/index.js     | 8 ++------
 packages/bruno-app/src/components/ColorPicker/index.js    | 6 +++---
 .../bruno-app/src/components/ColorRange/StyledWrapper.js  | 1 +
 packages/bruno-app/src/components/ColorRange/index.js     | 4 ++--
 .../EnvironmentSelector/EnvironmentListContent/index.js   | 2 +-
 .../EnvironmentList/EnvironmentDetails/index.js           | 8 +-------
 .../EnvironmentList/EnvironmentDetails/index.js           | 8 +-------
 7 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/packages/bruno-app/src/components/ColorBadge/index.js b/packages/bruno-app/src/components/ColorBadge/index.js
index dc372bbee..593e2ef17 100644
--- a/packages/bruno-app/src/components/ColorBadge/index.js
+++ b/packages/bruno-app/src/components/ColorBadge/index.js
@@ -1,21 +1,17 @@
 import React from 'react';
 import { useTheme } from 'providers/Theme';
 
-const ColorBadge = ({ color, size = 10, showEmptyBorder = true }) => {
+const ColorBadge = ({ color, size = 10 }) => {
   const sizeValue = typeof size === 'string' ? size : `${size}px`;
   const { theme } = useTheme();
 
-  const showBorder = !color && showEmptyBorder;
-
   return (
     <div
       className="flex-shrink-0 rounded-full"
       style={{
         width: sizeValue,
         height: sizeValue,
-        backgroundColor: color || 'transparent',
-        border: showBorder ? '1px solid' : 'none',
-        borderColor: showBorder ? theme.background.surface1 : 'transparent'
+        backgroundColor: color || 'transparent'
       }}
     />
   );
diff --git a/packages/bruno-app/src/components/ColorPicker/index.js b/packages/bruno-app/src/components/ColorPicker/index.js
index b2cd69198..d433e9ce4 100644
--- a/packages/bruno-app/src/components/ColorPicker/index.js
+++ b/packages/bruno-app/src/components/ColorPicker/index.js
@@ -134,15 +134,15 @@ const ColorPicker = ({ color, onChange, icon }) => {
           ))}
         </div>
 
-        <div className="flex items-center gap-2 mt-2 pt-2">
+        <div className="flex items-center gap-2 mt-2 pt-0.5">
           <div
-            className="w-4 h-4 rounded-full flex-shrink-0 cursor-pointer"
+            className="w-5 h-5 rounded-full flex-shrink-0 cursor-pointer"
             style={{ backgroundColor: customColor }}
             onClick={() => handleColorSelect(customColor)}
             title="Custom color"
           />
           <ColorRangePicker
-            className="flex-1"
+            className="flex-1 flex"
             value={sliderPosition}
             onChange={handleSliderChange}
             onMouseUp={handleSliderEnd}
diff --git a/packages/bruno-app/src/components/ColorRange/StyledWrapper.js b/packages/bruno-app/src/components/ColorRange/StyledWrapper.js
index 7d5addb9a..fd13a6991 100644
--- a/packages/bruno-app/src/components/ColorRange/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ColorRange/StyledWrapper.js
@@ -4,6 +4,7 @@ const StyledWrapper = styled.div`
   .hue-slider {
     -webkit-appearance: none;
     appearance: none;
+    width: 100%;
     height: 4px;
     border-radius: 2px;
     outline: none;
diff --git a/packages/bruno-app/src/components/ColorRange/index.js b/packages/bruno-app/src/components/ColorRange/index.js
index 09d14f50c..7430403a5 100644
--- a/packages/bruno-app/src/components/ColorRange/index.js
+++ b/packages/bruno-app/src/components/ColorRange/index.js
@@ -2,14 +2,14 @@ import StyledWrapper from './StyledWrapper';
 
 const ColorRangePicker = ({ selectedColor, className, value, onChange, colorRange, ...props }) => {
   return (
-    <StyledWrapper color={selectedColor}>
+    <StyledWrapper color={selectedColor} className={className}>
       <input
         type="range"
         min="0"
         max="100"
         value={value}
         onChange={onChange}
-        className={`hue-slider ${className}`}
+        className="hue-slider"
         style={{
           background: `linear-gradient(to right, ${colorRange.join(',')})`
         }}
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
index 5685ddee8..2dc2e1e1e 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
@@ -39,7 +39,7 @@ const EnvironmentListContent = ({
                     data-tooltip-content={env.name}
                     data-tooltip-hidden={env.name?.length < 90}
                   >
-                    <ColorBadge color={env.color} size={8} showEmptyBorder={false} />
+                    <ColorBadge color={env.color} size={8} />
                     <span className="max-w-100% truncate no-wrap">{env.name}</span>
                   </div>
                 ))}
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
index 0ba185dbb..2a7f5ea56 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -135,13 +135,7 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
   };
 
   const handleColorChange = (color) => {
-    dispatch(updateEnvironmentColor(environment.uid, color, collection.uid))
-      .then(() => {
-        toast.success('Environment color updated!');
-      })
-      .catch(() => {
-        toast.error('An error occurred while updating the environment color');
-      });
+    dispatch(updateEnvironmentColor(environment.uid, color, collection.uid));
   };
 
   return (
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
index 6d9219f9e..a92ea64d6 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
@@ -134,13 +134,7 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
   };
 
   const handleColorChange = (color) => {
-    dispatch(updateGlobalEnvironmentColor(environment.uid, color))
-      .then(() => {
-        toast.success('Environment color updated!');
-      })
-      .catch(() => {
-        toast.error('An error occurred while updating the environment color');
-      });
+    dispatch(updateGlobalEnvironmentColor(environment.uid, color));
   };
 
   return (