website refactor

apps/website/components/notifications/ToastNotification.tsx

@@ -3,6 +3,8 @@
 import { Icon } from '@/ui/Icon';
 import { Toast } from '@/ui/Toast';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import {
     AlertTriangle,
     Bell,
@@ -95,15 +97,16 @@ export function ToastNotification({
         {notification.message}
       </Text>
       {notification.actionUrl && (
-        <div 
-          onClick={handleClick}
-          style={{ marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer' }}
-        >
-          <Text size="xs" weight="medium" variant="primary">
-            View details
-          </Text>
-          <Icon icon={ExternalLink} size={3} intent="primary" />
-        </div>
+        <Box marginTop={2}>
+          <Box onClick={handleClick} style={{ cursor: 'pointer' }}>
+            <Group gap={1}>
+              <Text size="xs" weight="medium" variant="primary">
+                View details
+              </Text>
+              <Icon icon={ExternalLink} size={3} intent="primary" />
+            </Group>
+          </Box>
+        </Box>
       )}
     </Toast>
   );