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

@@ -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'
       }}
     />
   );

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}

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;

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(',')})`
         }}

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>
                 ))}

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 (

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 (