From f81ce24173f2f40df4e3b44959d0788863f5150d Mon Sep 17 00:00:00 2001
From: devcshort <13677134+devcshort@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:51:33 -0700
Subject: [PATCH] fix: Add icons back and proper spacing

---
 .../components/search/location-search-bar.tsx  |  4 ++--
 src/shared/components/ui/autocomplete.tsx      | 10 +++++++---
 src/shared/components/ui/input.tsx             | 18 +++++++++---------
 src/shared/components/ui/select.tsx            |  6 +++---
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/shared/components/search/location-search-bar.tsx b/src/shared/components/search/location-search-bar.tsx
index 26c5a49a..0d69e8f3 100644
--- a/src/shared/components/search/location-search-bar.tsx
+++ b/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]);
diff --git a/src/shared/components/ui/autocomplete.tsx b/src/shared/components/ui/autocomplete.tsx
index b6492036..2fa5dfd5 100644
--- a/src/shared/components/ui/autocomplete.tsx
+++ b/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 ? (
diff --git a/src/shared/components/ui/input.tsx b/src/shared/components/ui/input.tsx
index df68d156..05022db1 100644
--- a/src/shared/components/ui/input.tsx
+++ b/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 };
diff --git a/src/shared/components/ui/select.tsx b/src/shared/components/ui/select.tsx
index aef67a8e..5d1cb23d 100644
--- a/src/shared/components/ui/select.tsx
+++ b/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}