website refactor

apps/website/components/teams/TeamSearchBar.tsx

@@ -1,10 +1,9 @@
-
-
 'use client';
 
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Search } from 'lucide-react';
+import { Box } from '@/ui/Box';
 import React from 'react';
 
 interface TeamSearchBarProps {
@@ -14,13 +13,16 @@ interface TeamSearchBarProps {
 
 export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
   return (
-    <Input
-      type="text"
-      placeholder="Search teams by name, description, region, or language..."
-      value={searchQuery}
-      onChange={(e) => onSearchChange(e.target.value)}
-      icon={<Icon icon={Search} size={5} intent="low" />}
-      fullWidth
-    />
+    <Box marginBottom={8}>
+      <Input
+        type="text"
+        placeholder="FILTER BY TEAM NAME, REGION OR TAGS..."
+        value={searchQuery}
+        onChange={(e) => onSearchChange(e.target.value)}
+        icon={<Icon icon={Search} size={4} intent="low" />}
+        variant="search"
+        fullWidth
+      />
+    </Box>
   );
 }