[CHORE] - adjust UI contact component search input, icon contact filter

src/atomic-crm/contacts/ContactListFilter.tsx

@@ -105,7 +105,7 @@ export const ContactListFilter = () => {
           ))}
       </FilterCategory>
 
-      <FilterCategory icon={<CheckSquare className="h-4 w-4" />} label="Tasks">
+      <FilterCategory icon={<CheckSquare />} label="Tasks">
         <ToggleFilterButton
           className="w-full justify-between"
           label={"With pending tasks"}
@@ -114,7 +114,7 @@ export const ContactListFilter = () => {
       </FilterCategory>
 
       <FilterCategory
-        icon={<Users className="h-4 w-4" />}
+        icon={<Users />}
         label="Account Manager"
       >
         <ToggleFilterButton

src/components/admin/search-input.tsx

@@ -1,9 +1,10 @@
 import { useTranslate } from "ra-core";
 import { Search } from "lucide-react";
 import { TextInput, type TextInputProps } from "@/components/admin/text-input";
+import { cn } from "@/lib/utils";
 
 export const SearchInput = (inProps: SearchInputProps) => {
-  const { label, ...rest } = inProps;
+  const { label, className, ...rest } = inProps;
 
   const translate = useTranslate();
 
@@ -14,11 +15,13 @@ export const SearchInput = (inProps: SearchInputProps) => {
   }
 
   return (
-    <div className="flex flex-grow relative mt-auto w-fit">
+    <div className="flex flex-grow relative mt-auto">
       <TextInput
         label={false}
         helperText={false}
         placeholder={translate("ra.action.search")}
+        className={cn("flex-grow", className)}
+        inputClassName="pr-8"
         {...rest}
       />
       <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />

src/components/admin/text-input.tsx

@@ -17,6 +17,7 @@ import { InputHelperText } from "@/components/admin/input-helper-text";
 
 export type TextInputProps = InputProps & {
   multiline?: boolean;
+  inputClassName?: string;
 } & React.ComponentProps<"textarea"> &
   React.ComponentProps<"input">;
 
@@ -27,6 +28,7 @@ export const TextInput = (props: TextInputProps) => {
     source,
     multiline,
     className,
+    inputClassName,
     validate: _validateProp,
     format: _formatProp,
     ...rest
@@ -54,9 +56,19 @@ export const TextInput = (props: TextInputProps) => {
       )}
       <FormControl>
         {multiline ? (
-          <Textarea {...rest} {...field} value={value} />
+          <Textarea
+            {...rest}
+            {...field}
+            value={value}
+            className={inputClassName}
+          />
         ) : (
-          <Input {...rest} {...field} value={value} />
+          <Input
+            {...rest}
+            {...field}
+            value={value}
+            className={inputClassName}
+          />
         )}
       </FormControl>
       <InputHelperText helperText={props.helperText} />