refactor: remove category colors from units app

components/units/MainConverter.tsx

@@ -21,8 +21,6 @@ import {
   convertToAll,
   convertUnit,
   formatMeasureName,
-  getCategoryColor,
-  getCategoryColorHex,
   type Measure,
   type ConversionResult,
 } from '@/lib/units/units';
@@ -131,12 +129,7 @@ export default function MainConverter() {
               value={selectedMeasure}
               onValueChange={(value) => setSelectedMeasure(value as Measure)}
             >
-              <SelectTrigger
-                className="w-full"
-                style={{
-                  borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
-                }}
-              >
+              <SelectTrigger className="w-full">
                 <SelectValue placeholder="Measure" />
               </SelectTrigger>
               <SelectContent>
@@ -223,13 +216,9 @@ export default function MainConverter() {
 
           {/* Quick result */}
           {parseNumberInput(inputValue) !== null && (
-            <div className="p-4 rounded-lg bg-accent/50 border-l-4" style={{
-              borderLeftColor: getCategoryColorHex(selectedMeasure),
-            }}>
+            <div className="p-4 rounded-lg bg-accent/50 border-l-4 border-primary">
               <div className="text-sm text-muted-foreground">Result</div>
-              <div className="text-3xl font-bold mt-1" style={{
-                color: getCategoryColorHex(selectedMeasure),
-              }}>
+              <div className="text-3xl font-bold mt-1 text-primary">
                 {formatNumber(convertUnit(parseNumberInput(inputValue)!, selectedUnit, targetUnit))} {targetUnit}
               </div>
             </div>
@@ -256,7 +245,6 @@ export default function MainConverter() {
           {showVisualComparison ? (
             <VisualComparison
               conversions={conversions}
-              color={getCategoryColorHex(selectedMeasure)}
               onValueChange={handleValueChange}
             />
           ) : (
@@ -268,11 +256,7 @@ export default function MainConverter() {
               return (
                 <div
                   key={conversion.unit}
-                  className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
-                  style={{
-                    borderLeftWidth: '4px',
-                    borderLeftColor: getCategoryColorHex(selectedMeasure),
-                  }}
+                  className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors border-l-4 border-l-primary/30"
                 >
                   {/* Favorite & Copy buttons */}
                   <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

components/units/SearchUnits.tsx

@@ -10,8 +10,6 @@ import {
   getUnitsForMeasure,
   getUnitInfo,
   formatMeasureName,
-  getCategoryColor,
-  getCategoryColorHex,
   type Measure,
   type UnitInfo,
 } from '@/lib/units/units';
@@ -157,12 +155,6 @@ export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProp
                   <span className="truncate">{formatMeasureName(result.measure)}</span>
                 </div>
               </div>
-              <div
-                className="w-3 h-3 rounded-full flex-shrink-0"
-                style={{
-                  backgroundColor: getCategoryColorHex(result.measure),
-                }}
-              />
             </button>
           ))}
         </div>

components/units/VisualComparison.tsx

@@ -6,13 +6,11 @@ import { formatNumber, cn } from '@/lib/utils';
 
 interface VisualComparisonProps {
   conversions: ConversionResult[];
-  color: string;
   onValueChange?: (value: number, unit: string, dragging: boolean) => void;
 }
 
 export default function VisualComparison({
   conversions,
-  color,
   onValueChange,
 }: VisualComparisonProps) {
   const [draggingUnit, setDraggingUnit] = useState<string | null>(null);
@@ -282,12 +280,11 @@ export default function VisualComparison({
               {/* Colored fill */}
               <div
                 className={cn(
-                  "absolute inset-y-0 left-0",
+                  "absolute inset-y-0 left-0 bg-primary",
                   draggingUnit ? "transition-none" : "transition-all duration-500 ease-out"
                 )}
                 style={{
                   width: `${displayPercentage}%`,
-                  backgroundColor: color,
                 }}
               />
               {/* Percentage label overlay */}