website refactor

This commit is contained in:
2026-01-20 22:31:14 +01:00
parent 51288234f4
commit 7cbec00474
52 changed files with 577 additions and 146 deletions

View File

@@ -1,5 +1,3 @@
import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
@@ -28,8 +26,14 @@ export function TeamMembershipCard({
padding={4}
rounded="xl"
border
style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }}
className="flex items-center gap-4 hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
borderColor="rgba(38, 38, 38, 0.8)"
display="flex"
alignItems="center"
gap={4}
hoverBorderColor="rgba(168, 85, 247, 0.3)"
hoverBg="iron-gray/50"
transition
group
>
<Surface
variant="muted"
@@ -38,17 +42,18 @@ export function TeamMembershipCard({
display="flex"
center
rounded="xl"
style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', borderColor: 'rgba(147, 51, 234, 0.2)' }}
bg="rgba(147, 51, 234, 0.1)"
borderColor="rgba(147, 51, 234, 0.2)"
border
>
<Icon icon={Users} size={6} color="var(--neon-purple)" />
</Surface>
<Stack style={{ flex: 1, minWidth: 0 }}>
<Text weight="semibold" color="text-white" className="truncate group-hover:text-purple-400 transition-colors" block>
<Stack flex="1" minWidth="0">
<Text weight="semibold" color="text-white" truncate groupHoverTextColor="purple-400" block>
{teamName}
</Text>
<Stack direction="row" align="center" gap={2} mt={1}>
<Badge variant="primary" style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', color: 'var(--neon-purple)', textTransform: 'capitalize' }}>
<Badge variant="primary" bg="rgba(147, 51, 234, 0.1)" color="var(--neon-purple)" transform="capitalize">
{role}
</Badge>
<Text size="xs" color="text-gray-400">
@@ -56,7 +61,7 @@ export function TeamMembershipCard({
</Text>
</Stack>
</Stack>
<Icon icon={ChevronRight} size={4} color="var(--text-gray-500)" className="group-hover:text-purple-400 transition-colors" />
<Icon icon={ChevronRight} size={4} color="var(--text-gray-500)" />
</Surface>
</Link>
);

View File

@@ -18,15 +18,16 @@ export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
alignItems={{ md: 'end' }}
justifyContent="space-between"
gap={6}
className="border-b border-[var(--ui-color-border-muted)] pb-8"
borderBottom="1px solid var(--ui-color-border-muted)"
paddingBottom={8}
>
<Box className="space-y-2">
<Box display="flex" alignItems="center" gap={3}>
<Box width={1} height={8} className="bg-[var(--ui-color-intent-primary)]" />
<Box>
<Box display="flex" alignItems="center" gap={3} marginBottom={2}>
<Box width={1} height={8} backgroundColor="var(--ui-color-intent-primary)" />
<Heading level={1} weight="bold" uppercase>{title}</Heading>
</Box>
{subtitle && (
<Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
<Text variant="low" size="lg" uppercase mono letterSpacing="0.2em">
{subtitle}
</Text>
)}