website refactor

apps/website/components/shared/CountrySelect.tsx

@@ -4,6 +4,12 @@
 import { Check, ChevronDown, Globe, Search } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { CountryFlag } from '@/ui/CountryFlag';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
 
 export interface Country {
   code: string;
@@ -107,38 +113,62 @@ export function CountrySelect({
   };
 
   return (
-    <div ref={containerRef} className="relative">
+    <Box ref={containerRef} position="relative">
       {/* Trigger Button */}
       <button
         type="button"
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
-        className={`flex items-center justify-between w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset transition-all duration-150 sm:text-sm ${
-          error
-            ? 'ring-warning-amber focus:ring-warning-amber'
-            : 'ring-charcoal-outline focus:ring-primary-blue'
-        } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:ring-gray-500'}`}
+        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'}
       >
-        <div className="flex items-center gap-3">
+        <Group gap={3}>
           <Globe className="w-4 h-4 text-gray-500" />
           {selectedCountry ? (
-            <span className="flex items-center gap-2">
-              <CountryFlag countryCode={selectedCountry.code} size="md" showTooltip={false} />
-              <span>{selectedCountry.name}</span>
-            </span>
+            <Group gap={2}>
+              <CountryFlag countryCode={selectedCountry.code} size="md" />
+              <Text as="span">{selectedCountry.name}</Text>
+            </Group>
           ) : (
-            <span className="text-gray-500">{placeholder}</span>
+            <Text variant="low">{placeholder}</Text>
           )}
-        </div>
+        </Group>
         <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       {/* Dropdown */}
       {isOpen && (
-        <div className="absolute z-50 mt-2 w-full rounded-lg bg-iron-gray border border-charcoal-outline shadow-xl max-h-80 overflow-hidden">
+        <Surface 
+          position="absolute" 
+          zIndex={50} 
+          marginTop={2} 
+          width="100%" 
+          rounded="lg" 
+          variant="dark" 
+          border 
+          shadow="xl" 
+          overflow="hidden"
+        >
           {/* Search Input */}
-          <div className="p-2 border-b border-charcoal-outline">
-            <div className="relative">
+          <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}
@@ -146,47 +176,67 @@ export function CountrySelect({
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder="Search countries..."
-                className="w-full rounded-md border-0 px-4 py-2 pl-9 bg-deep-graphite text-white text-sm placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-primary-blue"
+                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'
+                }}
               />
-            </div>
-          </div>
+            </Box>
+          </Box>
 
           {/* Country List */}
-          <div className="overflow-y-auto max-h-60">
+          <Box overflowY="auto" maxHeight="15rem">
             {filteredCountries.length > 0 ? (
               filteredCountries.map((country) => (
                 <button
                   key={country.code}
                   type="button"
                   onClick={() => handleSelect(country.code)}
-                  className={`flex items-center justify-between w-full px-4 py-2.5 text-left text-sm transition-colors ${
-                    value === country.code
-                      ? 'bg-primary-blue/20 text-white'
-                      : 'text-gray-300 hover:bg-deep-graphite'
-                  }`}
+                  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'
+                  }}
                 >
-                  <span className="flex items-center gap-3">
-                    <CountryFlag countryCode={country.code} size="md" showTooltip={false} />
-                    <span>{country.name}</span>
-                  </span>
+                  <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" />
                   )}
                 </button>
               ))
             ) : (
-              <div className="px-4 py-6 text-center text-gray-500 text-sm">
-                No countries found
-              </div>
+              <Box paddingX={4} paddingY={6} textAlign="center">
+                <Text size="sm" variant="low">No countries found</Text>
+              </Box>
             )}
-          </div>
-        </div>
+          </Box>
+        </Surface>
       )}
 
       {/* Error Message */}
       {error && errorMessage && (
-        <p className="mt-2 text-sm text-warning-amber">{errorMessage}</p>
+        <Box marginTop={2}>
+          <Text size="sm" variant="critical">{errorMessage}</Text>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 }