fix: Border icon also needs to have mixed behavior (#2604)

Author: Surajsuthar

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx

@@ -4,23 +4,65 @@ import { Button } from '@onlook/ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@onlook/ui/dropdown-menu';
 import { Icons } from '@onlook/ui/icons';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useBoxControl } from '../hooks/use-box-control';
 import { useDropdownControl } from '../hooks/use-dropdown-manager';
 import { HoverOnlyTooltip } from '../hover-tooltip';
 import { InputRange } from '../inputs/input-range';
 import { SpacingInputs } from '../inputs/spacing-inputs';
 import { ToolbarButton } from '../toolbar-button';
 
+export enum BorderTab {
+    ALL = 'all',
+    INDIVIDUAL = 'individual',
+}
+
 export const Border = observer(() => {
-    const [activeTab, setActiveTab] = useState('all');
     const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange, borderExists } =
         useBoxControl('border');
 
     const { isOpen, onOpenChange } = useDropdownControl({
         id: 'border-dropdown',
     });
 
+    const areAllBordersEqual = useMemo((): boolean => {
+        const borders = {
+            top: boxState.borderTopWidth.num ?? 0,
+            right: boxState.borderRightWidth.num ?? 0,
+            bottom: boxState.borderBottomWidth.num ?? 0,
+            left: boxState.borderLeftWidth.num ?? 0,
+        };
+
+        const values = Object.values(borders);
+
+        return values.every(val => val === values[0]);
+    }, [boxState.borderTopWidth.num, boxState.borderRightWidth.num, boxState.borderBottomWidth.num, boxState.borderLeftWidth.num]);
+   
+    const [activeTab, setActiveTab] = useState<BorderTab>(areAllBordersEqual ? BorderTab.ALL : BorderTab.INDIVIDUAL);
+
+    const getBorderDisplay = () => {
+        const top = boxState.borderTopWidth.num ?? 0;
+        const right = boxState.borderRightWidth.num ?? 0;
+        const bottom = boxState.borderBottomWidth.num ?? 0;
+        const left = boxState.borderLeftWidth.num ?? 0;
+    
+        if (top === 0 && right === 0 && bottom === 0 && left === 0) {
+            return null; 
+        }
+
+        const nonZeroValues = [top, right, bottom, left].filter(val => val !== 0);
+        
+        if(nonZeroValues.length === 4 && nonZeroValues.every((val) => val === nonZeroValues[0])) {
+            return boxState.borderWidth.unit === 'px'
+            ? `${boxState.borderWidth.num}`
+            : `${boxState.borderWidth.value}`
+        }
+
+        return "Mixed"
+    }
+
+    const borderValue = getBorderDisplay()
+
     return (
         <DropdownMenu open={isOpen} onOpenChange={onOpenChange} modal={false}>
             <HoverOnlyTooltip
@@ -35,12 +77,11 @@ export const Border = observer(() => {
                         isOpen={isOpen}
                         className="flex items-center gap-1 min-w-10"
                     >
-                        <Icons.BorderEdit className="h-4 w-4 min-h-4 min-w-4" />
-                        {borderExists && (
+                        <Icons.BorderEdit className={`h-4 w-4 min-h-4 min-w-4 ${borderExists ? 'text-white' : ''}
+`} />
+                        {borderValue && (
                             <span className="text-xs">
-                                {boxState.borderWidth.unit === 'px'
-                                    ? boxState.borderWidth.num
-                                    : boxState.borderWidth.value}
+                                {borderValue}
                             </span>
                         )}
                     </ToolbarButton>
@@ -53,25 +94,25 @@ export const Border = observer(() => {
             >
                 <div className="flex items-center gap-2 mb-3">
                     <button
-                        onClick={() => setActiveTab('all')}
-                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${activeTab === 'all'
+                        onClick={() => setActiveTab(BorderTab.ALL)}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${activeTab === BorderTab.ALL
                             ? 'text-foreground-primary bg-background-active/50'
                             : 'text-muted-foreground hover:bg-background-tertiary/20 hover:text-foreground-hover'
                             }`}
                     >
                         All sides
                     </button>
                     <button
-                        onClick={() => setActiveTab('individual')}
-                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${activeTab === 'individual'
+                        onClick={() => setActiveTab(BorderTab.INDIVIDUAL)}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${activeTab === BorderTab.INDIVIDUAL
                             ? 'text-foreground-primary bg-background-active/50'
                             : 'text-muted-foreground hover:bg-background-tertiary/20 hover:text-foreground-hover'
                             }`}
                     >
                         Individual
                     </button>
                 </div>
-                {activeTab === 'all' ? (
+                {activeTab === BorderTab.ALL ? (
                     <InputRange
                         value={boxState.borderWidth.num ?? 0}
                         onChange={(value) => handleBoxChange('borderWidth', value.toString())}