website refactor

apps/website/components/shared/ux/ConfirmDialog.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
-import { Modal } from '@/ui/Modal';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
-import { AlertCircle, Box } from 'lucide-react';
-
-interface ConfirmDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  title: string;
-  description: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  variant?: 'danger' | 'primary';
-  isLoading?: boolean;
-}
-
-export function ConfirmDialog({
-  isOpen,
-  onClose,
-  onConfirm,
-  title,
-  description,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  variant = 'primary',
-  isLoading = false,
-}: ConfirmDialogProps) {
-  return (
-    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()} title={title}>
-      <Box p={6}>
-        <Stack direction="row" gap={4} align="start">
-          {variant === 'danger' && (
-            <Box p={2} rounded="full" bg="bg-racing-red/10">
-              <AlertCircle className="w-6 h-6 text-racing-red" />
-            </Box>
-          )}
-          <Box flexGrow={1}>
-            <Heading level={3} fontSize="lg" weight="semibold" mb={2}>
-              {title}
-            </Heading>
-            <Text color="text-gray-400" size="sm" block mb={6}>
-              {description}
-            </Text>
-          </Box>
-        </Stack>
-
-        <Box display="flex" justifyContent="end" gap={3}>
-          <Button variant="secondary" onClick={onClose} disabled={isLoading}>
-            {cancelLabel}
-          </Button>
-          <Button
-            variant={variant === 'danger' ? 'primary' : 'primary'}
-            onClick={onConfirm}
-            disabled={isLoading}
-            className={variant === 'danger' ? 'bg-racing-red hover:bg-racing-red/90 border-racing-red' : ''}
-          >
-            {isLoading ? 'Processing...' : confirmLabel}
-          </Button>
-        </Box>
-      </Box>
-    </Modal>
-  );
-}

apps/website/components/shared/ux/InlineNotice.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
-import { AlertCircle, AlertTriangle, Box, CheckCircle, Info } from 'lucide-react';
-
-interface InlineNoticeProps {
-  variant?: 'info' | 'success' | 'warning' | 'error';
-  title?: string;
-  message: string;
-  mb?: number;
-}
-
-export function InlineNotice({
-  variant = 'info',
-  title,
-  message,
-  mb,
-}: InlineNoticeProps) {
-  const variants = {
-    info: {
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      text: 'text-primary-blue',
-      icon: Info,
-    },
-    success: {
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      text: 'text-performance-green',
-      icon: CheckCircle,
-    },
-    warning: {
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      text: 'text-warning-amber',
-      icon: AlertTriangle,
-    },
-    error: {
-      bg: 'bg-racing-red/10',
-      border: 'border-racing-red/30',
-      text: 'text-racing-red',
-      icon: AlertCircle,
-    },
-  };
-
-  const config = variants[variant];
-  const Icon = config.icon;
-
-  return (
-    <Box
-      p={4}
-      rounded="lg"
-      bg={config.bg}
-      border
-      borderColor={config.border}
-      mb={mb}
-    >
-      <Stack direction="row" gap={3} align="start">
-        <Icon className={`w-5 h-5 ${config.text} mt-0.5`} />
-        <Box>
-          {title && (
-            <Text weight="semibold" color="text-white" block mb={1}>
-              {title}
-            </Text>
-          )}
-          <Text size="sm" color="text-gray-300" block>
-            {message}
-          </Text>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}

apps/website/components/shared/ux/ProgressLine.tsx

@@ -1,37 +0,0 @@
-'use client';
-
-import { Box } from '@/ui/primitives/Box';
-import { motion } from 'framer-motion';
-
-interface ProgressLineProps {
-  isLoading: boolean;
-  className?: string;
-}
-
-export function ProgressLine({ isLoading, className = '' }: ProgressLineProps) {
-  if (!isLoading) return null;
-
-  return (
-    <Box
-      w="full"
-      h="0.5"
-      bg="bg-iron-gray"
-      overflow="hidden"
-      className={`relative ${className}`}
-    >
-      <motion.div
-        className="absolute top-0 left-0 h-full bg-primary-blue"
-        initial={{ width: '0%', left: '0%' }}
-        animate={{
-          width: ['20%', '50%', '20%'],
-          left: ['-20%', '100%', '-20%'],
-        }}
-        transition={{
-          duration: 1.5,
-          repeat: Infinity,
-          ease: 'linear',
-        }}
-      />
-    </Box>
-  );
-}

apps/website/components/shared/ux/Toast.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { IconButton } from '@/ui/IconButton';
-import { Stack } from '@/ui/primitives/Stack';
+import { Toast as UIToast } from '@/ui/Toast';
 import { Text } from '@/ui/Text';
-import { AnimatePresence, motion } from 'framer-motion';
-import { AlertCircle, CheckCircle, Info, X } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+import { AlertCircle, CheckCircle, Info } from 'lucide-react';
 import React, { createContext, useContext, useState } from 'react';
 
 interface Toast {
@@ -33,23 +32,16 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
   return (
     <ToastContext.Provider value={{ showToast }}>
       {children}
-      <Stack
-        position="fixed"
-        bottom={6}
-        right={6}
-        zIndex={50}
-        className="pointer-events-none space-y-3"
-      >
-        <AnimatePresence>
-          {toasts.map((toast) => (
+      <div style={{ position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 100, display: 'flex', flexDirection: 'column', gap: '0.75rem', pointerEvents: 'none' }}>
+        {toasts.map((toast) => (
+          <div key={toast.id} style={{ pointerEvents: 'auto' }}>
             <ToastItem
-              key={toast.id}
               toast={toast}
               onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
             />
-          ))}
-        </AnimatePresence>
-      </Stack>
+          </div>
+        ))}
+      </div>
     </ToastContext.Provider>
   );
 }
@@ -65,60 +57,32 @@ export function useToast() {
 function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
   const variants = {
     success: {
-      bg: 'bg-deep-graphite',
-      border: 'border-performance-green/30',
+      intent: 'success' as const,
       icon: CheckCircle,
-      iconColor: 'text-performance-green',
     },
     error: {
-      bg: 'bg-deep-graphite',
-      border: 'border-racing-red/30',
+      intent: 'critical' as const,
       icon: AlertCircle,
-      iconColor: 'text-racing-red',
     },
     info: {
-      bg: 'bg-deep-graphite',
-      border: 'border-primary-blue/30',
+      intent: 'primary' as const,
       icon: Info,
-      iconColor: 'text-primary-blue',
     },
   };
 
   const config = variants[toast.variant];
-  const Icon = config.icon;
 
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 20, scale: 0.95 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.95 }}
-      className="pointer-events-auto"
+    <UIToast
+      onClose={onClose}
+      intent={config.intent}
+      icon={<Icon icon={config.icon} size={5} intent={config.intent} />}
+      isVisible={true}
+      isExiting={false}
     >
-      <Stack
-        px={4}
-        py={3}
-        rounded="lg"
-        bg={config.bg}
-        border
-        borderColor={config.border}
-        shadow="xl"
-        direction="row"
-        align="center"
-        gap={3}
-        {...({ minWidth: "300px" } as any)}
-      >
-        <Icon className={`w-5 h-5 ${config.iconColor}`} />
-        <Text size="sm" color="text-white" flexGrow={1}>
-          {toast.message}
-        </Text>
-        <IconButton
-          icon={X}
-          onClick={onClose}
-          variant="ghost"
-          size="sm"
-          className="text-gray-500 hover:text-white transition-colors"
-        />
-      </Stack>
-    </motion.div>
+      <Text size="sm" variant="high">
+        {toast.message}
+      </Text>
+    </UIToast>
   );
 }