fix: Add icons back and proper spacing

src/shared/components/search/location-search-bar.tsx

@@ -49,11 +49,11 @@ export function LocationSearchBar({ className }: LocationSearchBarProps) {
  return [
  ...additionalLocations.map((loc) => ({
  value: loc.address,
- icon: NavigationIcon,
+ Icon: NavigationIcon,
  })),
  ...locations.map((loc) => ({
  value: loc.address,
- icon: NavigationIcon,
+ Icon: NavigationIcon,
  })),
  ];
  }, [locations, additionalLocations]);

src/shared/components/ui/autocomplete.tsx

@@ -392,7 +392,9 @@ export function Autocomplete(props: AutocompleteProps) {
  }, []);
 
  return (
- <div className={cn('relative flex items-center border-b px-3', className)}>
+ <div
+ className={cn('relative flex items-center border-b px-3 py-1', className)}
+ >
  {Icon ? (
  <Icon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
  ) : (
@@ -482,7 +484,7 @@ export function Autocomplete(props: AutocompleteProps) {
  id={`${uniqueId}-option-${option.index}`}
  role="option"
  className={cn(
- 'ml-1 mr-1 flex justify-between gap-2 p-1 px-3 py-1 pl-2 pr-2 text-sm',
+ 'flex justify-between gap-2 px-3 py-1',
  currentIndex === option.index && 'bg-primary/5',
  )}
  aria-selected={currentIndex === option.index}
@@ -491,7 +493,9 @@ export function Autocomplete(props: AutocompleteProps) {
  onMouseDown={handleValueSelect(option.value)}
  >
  <span className="flex items-center gap-2">
- {Icon === 'span' ? null : <Icon className="size-4" />}
+ {Icon === 'span' ? null : (
+ <Icon className="size-4 shrink-0" />
+ )}
  <p>
  {parse(option.value, matches).map((text, idx) =>
  text.highlight ? (

src/shared/components/ui/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/shared/lib/utils"
+import { cn } from '@/shared/lib/utils';
 
 export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,15 +11,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
  <input
  type={type}
  className={cn(
- "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
- className
+ 'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+ className,
  )}
  ref={ref}
  {...props}
  />
- )
- }
-)
-Input.displayName = "Input"
+ );
+ },
+);
+Input.displayName = 'Input';
 
-export { Input }
+export { Input };

src/shared/components/ui/select.tsx

@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
  ref={ref}
  className={cn(
- 'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+ 'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
  className,
  )}
  {...props}
@@ -110,7 +110,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
  ref={ref}
- className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+ className={cn('px-2 py-1.5 font-semibold', className)}
  {...props}
  />
 ));
@@ -123,7 +123,7 @@ const SelectItem = React.forwardRef<
  <SelectPrimitive.Item
  ref={ref}
  className={cn(
- 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+ 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
  className,
  )}
  {...props}