fix: implement 7 UI fixes for editor interface (#2488)

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

@@ -8,7 +8,7 @@ import { 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 { InputRange, STANDARD_INCREMENTS } from '../inputs/input-range';
 import { SpacingInputs } from '../inputs/spacing-inputs';
 import { ToolbarButton } from '../toolbar-button';
 
@@ -33,11 +33,11 @@ export const Border = observer(() => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="flex items-center gap-1 min-w-10"
+                        className={`flex items-center gap-1 min-w-10 ${borderExists ? 'text-foreground-primary' : ''}`}
                     >
-                        <Icons.BorderEdit className="h-4 w-4 min-h-4 min-w-4" />
+                        <Icons.BorderEdit className={`h-4 w-4 min-h-4 min-w-4 ${borderExists ? 'text-foreground-primary' : ''}`} />
                         {borderExists && (
-                            <span className="text-xs">
+                            <span className="text-xs text-foreground-primary">
                                 {boxState.borderWidth.unit === 'px'
                                     ? boxState.borderWidth.num
                                     : boxState.borderWidth.value}
@@ -77,6 +77,7 @@ export const Border = observer(() => {
                         onChange={(value) => handleBoxChange('borderWidth', value.toString())}
                         unit={boxState.borderWidth.unit}
                         onUnitChange={(unit) => handleUnitChange('borderWidth', unit)}
+                        customIncrements={STANDARD_INCREMENTS}
                     />
                 ) : (
                     <SpacingInputs

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

@@ -55,8 +55,8 @@ export const Display = observer(() => {
                     </ToolbarButton>
                 </DropdownMenuTrigger>
             </HoverOnlyTooltip>
-            <DropdownMenuContent align="start" className="min-w-[200px] mt-2 p-1.5 rounded-lg">
-                <div className="p-2 space-y-2.5">
+            <DropdownMenuContent align="start" className="min-w-[240px] mt-2 p-1.5 rounded-lg">
+                <div className="space-y-2 px-4 py-4">
                     <TypeInput />
                     <DirectionInput />
                     <VerticalAlignInput />

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

@@ -14,7 +14,7 @@ import { useCallback, 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 { InputRange, STANDARD_INCREMENTS } from "../inputs/input-range";
 import { SpacingInputs } from "../inputs/spacing-inputs";
 import { ToolbarButton } from "../toolbar-button";
 
@@ -153,11 +153,11 @@ export const Margin = observer(() => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="gap-1 flex items-center min-w-10"
+                        className={`gap-1 flex items-center min-w-10 ${marginValue ? 'text-foreground-primary' : ''}`}
                     >
-                        <MarginIcon className="h-4 min-h-4 w-4 min-w-4" />
+                        <MarginIcon className={`h-4 min-h-4 w-4 min-w-4 ${marginValue ? 'text-foreground-primary' : ''}`} />
                         {marginValue && (
-                            <span className="text-small data-[state=open]:text-white">{marginValue}</span>
+                            <span className="text-small text-foreground-primary data-[state=open]:text-white">{marginValue}</span>
                         )}
                     </ToolbarButton>
                 </DropdownMenuTrigger>
@@ -192,6 +192,7 @@ export const Margin = observer(() => {
                         onChange={(value) => handleBoxChange('margin', value.toString())}
                         unit={boxState.margin.unit}
                         onUnitChange={(unit) => handleUnitChange('margin', unit)}
+                        customIncrements={STANDARD_INCREMENTS}
                     />
                 ) : (
                     <SpacingInputs

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

@@ -11,7 +11,7 @@ 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 { InputRange, STANDARD_INCREMENTS } from "../inputs/input-range";
 import { SpacingInputs } from "../inputs/spacing-inputs";
 import { ToolbarButton } from "../toolbar-button";
 
@@ -128,11 +128,11 @@ export const Padding = observer(() => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="gap-1 flex items-center min-w-10"
+                        className={`gap-1 flex items-center min-w-10 ${paddingValue ? 'text-foreground-primary' : ''}`}
                     >
-                        <PaddingIcon className="h-4 min-h-4 w-4 min-w-4" />
+                        <PaddingIcon className={`h-4 min-h-4 w-4 min-w-4 ${paddingValue ? 'text-foreground-primary' : ''}`} />
                         {paddingValue && (
-                            <span className="text-small data-[state=open]:text-white">{paddingValue}</span>
+                            <span className="text-small text-foreground-primary data-[state=open]:text-white">{paddingValue}</span>
                         )}
                     </ToolbarButton>
                 </DropdownMenuTrigger>
@@ -164,6 +164,7 @@ export const Padding = observer(() => {
                         onChange={(value) => handleBoxChange('padding', value.toString())}
                         unit={boxState.padding.unit}
                         onUnitChange={(unit) => handleUnitChange('padding', unit)}
+                        customIncrements={STANDARD_INCREMENTS}
                     />
                 ) : (
                     <SpacingInputs

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

@@ -12,7 +12,7 @@ import { 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 { InputRange, STANDARD_INCREMENTS } from "../inputs/input-range";
 import { SpacingInputs } from "../inputs/spacing-inputs";
 import { ToolbarButton } from "../toolbar-button";
 
@@ -106,11 +106,11 @@ export const Radius = observer(() => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="gap-1 flex items-center min-w-10"
+                        className={`gap-1 flex items-center min-w-10 ${radiusValue ? 'text-foreground-primary' : ''}`}
                     >
-                        <RadiusIcon className="h-4 min-h-4 w-4 min-w-4" />
+                        <RadiusIcon className={`h-4 min-h-4 w-4 min-w-4 ${radiusValue ? 'text-foreground-primary' : ''}`} />
                         {radiusValue && (
-                            <span className="text-small data-[state=open]:text-white">{radiusValue}</span>
+                            <span className="text-small text-foreground-primary data-[state=open]:text-white">{radiusValue}</span>
                         )}
                     </ToolbarButton>
                 </DropdownMenuTrigger>
@@ -142,6 +142,8 @@ export const Radius = observer(() => {
                         onChange={(value) => handleBoxChange('borderRadius', value.toString())}
                         unit={boxState.borderRadius.unit}
                         onUnitChange={(unit) => handleUnitChange('borderRadius', unit)}
+                        customIncrements={STANDARD_INCREMENTS}
+                        useTailwindClasses={true}
                     />
                 ) : (
                     <SpacingInputs

apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-box-control.ts

@@ -179,25 +179,16 @@ export const useBoxControl = (type: BoxType) => {
         if (!currentState) return;
 
         const cssValue = parsedValue ? `${parsedValue}${currentState.unit}` : '';
-        const updates = new Map<CSSBoxProperty, string>();
-
-        updates.set(property, cssValue);
-
+
         if (type === 'radius' && property === 'borderRadius') {
-            CORNERS_RADIUS.forEach((corner) => {
-                updates.set(`border${corner}` as CSSBoxProperty, cssValue);
-            });
+            editorEngine.style.update('borderRadius', cssValue);
         } else if (type === 'border' && property === 'borderWidth') {
-            SIDES.forEach((side) => {
-                updates.set(`border${side}Width` as CSSBoxProperty, cssValue);
-            });
+            editorEngine.style.update('borderWidth', cssValue);
         } else if ((type === 'margin' || type === 'padding') && property === type) {
-            SIDES.forEach((side) => {
-                updates.set(`${type}${side}` as CSSBoxProperty, cssValue);
-            });
+            editorEngine.style.update(property, cssValue);
+        } else {
+            editorEngine.style.update(property, cssValue);
         }
-
-        editorEngine.style.updateMultiple(Object.fromEntries(updates));
     }, [boxState, editorEngine.style, type]);
 
     const handleUnitChange = useCallback((property: CSSBoxProperty, unit: string) => {

apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-range.tsx

@@ -15,14 +15,29 @@ interface InputRangeProps {
     unit?: string;
     onChange?: (value: number) => void;
     onUnitChange?: (unit: string) => void;
+    customIncrements?: number[];
+    useTailwindClasses?: boolean;
 }
 
+export const STANDARD_INCREMENTS = [0, 0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+
+const TAILWIND_RADIUS_MAP: Record<number, string> = {
+    2: 'rounded-xs',
+    4: 'rounded-sm', 
+    6: 'rounded-md',
+    8: 'rounded-lg',
+    12: 'rounded-xl',
+    16: 'rounded-2xl',
+};
+
 export const InputRange = ({
     value,
     icon,
     unit = 'px',
     onChange,
     onUnitChange,
+    customIncrements,
+    useTailwindClasses = false,
 }: InputRangeProps) => {
     const [localValue, setLocalValue] = useState(String(value));
     const rangeRef = useRef<HTMLInputElement>(null);
@@ -88,11 +103,21 @@ export const InputRange = ({
         }
     };
 
+    const findClosestIncrement = (targetValue: number): number => {
+        if (!customIncrements) return targetValue;
+
+        return customIncrements.reduce((closest, current) => {
+            return Math.abs(current - targetValue) < Math.abs(closest - targetValue) ? current : closest;
+        });
+    };
+
     const handleMouseMove = (e: MouseEvent) => {
         if (isDragging && rangeRef.current) {
             const rect = rangeRef.current.getBoundingClientRect();
             const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-            const newValue = Math.round(percentage * 500);
+            const maxValue = customIncrements ? Math.max(...customIncrements) : 500;
+            const rawValue = percentage * maxValue;
+            const newValue = customIncrements ? findClosestIncrement(rawValue) : Math.round(rawValue);
             setLocalValue(String(newValue));
             debouncedOnChange(newValue);
         }
@@ -104,17 +129,21 @@ export const InputRange = ({
         document.removeEventListener('mouseup', handleMouseUp);
     };
 
+    const maxValue = customIncrements ? Math.max(...customIncrements) : 500;
+    const currentValue = customIncrements ? findClosestIncrement(Number(localValue)) : Number(localValue);
+
     return (
         <div className="flex items-center gap-2">
             <div className="flex-1 flex items-center gap-2">
                 <input
                     ref={rangeRef}
                     type="range"
                     min="0"
-                    max="500"
-                    value={Number(localValue)}
+                    max={maxValue}
+                    value={currentValue}
                     onChange={(e) => {
-                        const newValue = Number(e.target.value);
+                        const rawValue = Number(e.target.value);
+                        const newValue = customIncrements ? findClosestIncrement(rawValue) : rawValue;
                         setLocalValue(String(newValue));
                         debouncedOnChange(newValue);
                     }}

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/history.tsx

@@ -12,7 +12,6 @@ import { Icons } from '@onlook/ui/icons';
 import { Popover, PopoverAnchor, PopoverContent } from '@onlook/ui/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
 import { cn } from '@onlook/ui/utils';
-import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 
@@ -108,11 +107,10 @@ export const ChatHistory = observer(({ isOpen, onOpenChange }: ChatHistoryProps)
                                                             <Icons.Trash className="w-4 h-4" />
                                                         </Button>
                                                     </TooltipTrigger>
-                                                    <TooltipContent side="right">
+                                                    <TooltipContent side="right" className="mt-1">
                                                         <p className="font-normal">
                                                             Delete Conversation
                                                         </p>
-                                                        <TooltipArrow className="fill-foreground" />
                                                     </TooltipContent>
                                                 </Tooltip>
                                             </div>

apps/web/client/src/components/ui/avatar-dropdown/plans.tsx

@@ -55,8 +55,8 @@ export const UsageSection = observer(() => {
             )}
             <Progress value={usagePercent} className="w-full" />
             <Button className="w-full flex items-center justify-center gap-2 bg-blue-400 text-white hover:bg-blue-500" onClick={handleGetMoreCredits}>
-                <Icons.Sparkles className="mr-1 h-4 w-4" /> Get more Credits
+                <Icons.Sparkles className="h-4 w-4" /> Get more Credits
             </Button>
         </div>
     );
-});
+});