Refactor FilterInput and ContactList components to use TextField.Input instead of TextField.Root

Author: sametcn99

components/ProfileCard/ContactList.tsx

@@ -147,12 +147,12 @@ export default function ContactList({
           </Dialog.Title>
           {/* Textfield for filtering by name */}
           <TextField.Root>
-            <TextField.Root
+            <TextField.Input
               value={filter}
               type="search"
               placeholder="Filter by name"
               onChange={(e) => setFilter(e.target.value)}
-            ></TextField.Root>
+            ></TextField.Input>
             {/* Dropdown for selecting the filter option */}
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>

components/Search.tsx

@@ -106,14 +106,14 @@ export default function SearchBar({ className }: { className?: string }) {
 
         <Box className="static flex flex-col items-center justify-center gap-5 ">
           <Box className="flex w-full flex-row items-center justify-between gap-3">
-            <TextField.Root
+            <TextField.Input
               size="3"
               className="w-full"
               aria-label="Search"
               placeholder="Write user name"
               onKeyDown={handleKeyPress}
               onChange={handleChange}
-            ></TextField.Root>
+            ></TextField.Input>
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>
                 <Button className="hover:cursor-pointer">Filter By</Button>