website refactor
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user