website refactor

apps/website/components/shared/CountrySelect.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable gridpilot-rules/no-raw-html-in-app */
-
-
 import { Check, ChevronDown, Globe, Search } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { CountryFlag } from '@/ui/CountryFlag';
@@ -10,6 +7,7 @@ import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
+import { Input } from '@/ui/Input';
 
 export interface Country {
   code: string;
@@ -115,32 +113,31 @@ export function CountrySelect({
   return (
     <Box ref={containerRef} position="relative">
       {/* Trigger Button */}
-      <button
+      <Box
+        as="button"
         type="button"
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          width: '100%',
-          borderRadius: 'var(--ui-radius-md)',
-          border: 'none',
-          padding: '0.75rem 1rem',
-          backgroundColor: 'var(--ui-color-bg-surface-muted)',
-          color: 'white',
-          boxShadow: 'var(--ui-shadow-sm)',
-          transition: 'all 150ms',
-          cursor: disabled ? 'not-allowed' : 'pointer',
-          opacity: disabled ? 0.5 : 1,
-          outline: 'none',
-          ring: '1px inset',
-          borderColor: error ? 'var(--ui-color-intent-critical)' : 'var(--ui-color-border-default)'
-        } as any}
-        className={error ? 'ring-warning-amber' : 'ring-charcoal-outline focus:ring-primary-blue'}
+        display="flex"
+        alignItems="center"
+        justifyContent="between"
+        fullWidth
+        rounded="md"
+        paddingX={4}
+        paddingY={3}
+        bg="var(--ui-color-bg-surface-muted)"
+        color="white"
+        shadow="sm"
+        transition="all 150ms"
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        opacity={disabled ? 0.5 : 1}
+        outline="none"
+        border
+        borderColor={error ? 'var(--ui-color-intent-critical)' : 'var(--ui-color-border-default)'}
+        hoverBorderColor={!disabled ? 'var(--ui-color-intent-primary)' : undefined}
       >
         <Group gap={3}>
-          <Globe className="w-4 h-4 text-gray-500" />
+          <Icon icon={Globe} size={4} intent="low" />
           {selectedCountry ? (
             <Group gap={2}>
               <CountryFlag countryCode={selectedCountry.code} size="md" />
@@ -150,8 +147,16 @@ export function CountrySelect({
             <Text variant="low">{placeholder}</Text>
           )}
         </Group>
-        <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
-      </button>
+        <Icon 
+          icon={ChevronDown} 
+          size={4} 
+          intent="low" 
+          style={{ 
+            transition: 'transform 200ms',
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' 
+          }} 
+        />
+      </Box>
 
       {/* Dropdown */}
       {isOpen && (
@@ -167,60 +172,49 @@ export function CountrySelect({
           overflow="hidden"
         >
           {/* Search Input */}
-          <Box padding={2} borderBottom="1px solid var(--ui-color-border-muted)">
-            <Box position="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-              <input
-                ref={inputRef}
-                type="text"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder="Search countries..."
-                style={{
-                  width: '100%',
-                  borderRadius: 'var(--ui-radius-md)',
-                  border: 'none',
-                  padding: '0.5rem 1rem 0.5rem 2.25rem',
-                  backgroundColor: 'var(--ui-color-bg-base)',
-                  color: 'white',
-                  fontSize: '0.875rem',
-                  outline: 'none'
-                }}
-              />
-            </Box>
+          <Box padding={2} borderBottom>
+            <Input
+              ref={inputRef}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search countries..."
+              fullWidth
+              size="sm"
+              icon={<Icon icon={Search} size={4} intent="low" />}
+            />
           </Box>
 
           {/* Country List */}
           <Box overflowY="auto" maxHeight="15rem">
             {filteredCountries.length > 0 ? (
               filteredCountries.map((country) => (
-                <button
+                <Box
+                  as="button"
                   key={country.code}
                   type="button"
                   onClick={() => handleSelect(country.code)}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    width: '100%',
-                    padding: '0.625rem 1rem',
-                    textAlign: 'left',
-                    fontSize: '0.875rem',
-                    transition: 'colors 150ms',
-                    border: 'none',
-                    backgroundColor: value === country.code ? 'rgba(25, 140, 255, 0.2)' : 'transparent',
-                    color: value === country.code ? 'white' : 'var(--ui-color-text-med)',
-                    cursor: 'pointer'
-                  }}
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="between"
+                  fullWidth
+                  paddingX={4}
+                  paddingY={2.5}
+                  textAlign="left"
+                  transition="colors 150ms"
+                  border="none"
+                  bg={value === country.code ? 'rgba(25, 140, 255, 0.2)' : 'transparent'}
+                  color={value === country.code ? 'white' : 'var(--ui-color-text-med)'}
+                  cursor="pointer"
+                  hoverBg="rgba(255, 255, 255, 0.05)"
                 >
                   <Group gap={3}>
                     <CountryFlag countryCode={country.code} size="md" />
                     <Text as="span">{country.name}</Text>
                   </Group>
                   {value === country.code && (
-                    <Check className="w-4 h-4 text-primary-blue" />
+                    <Icon icon={Check} size={4} intent="primary" />
                   )}
-                </button>
+                </Box>
               ))
             ) : (
               <Box paddingX={4} paddingY={6} textAlign="center">