mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:32:34 +01:00
parent 6a49448e0a
commit 4d5ce9bfd6
43 changed files with 1642 additions and 2022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
apps/website/components/notifications/ModalNotification.tsx
View File

@@ -44,40 +44,40 @@ const notificationIcons: Record<string, typeof Bell> = {
const notificationColors: Record<string, { bg: string; border: string; text: string; glow: string }> = {
protest_filed: {
bg: 'bg-red-500/10',
border: 'border-red-500/50',
text: 'text-red-400',
glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
bg: 'bg-critical-red/10',
border: 'border-critical-red/50',
text: 'text-critical-red',
glow: 'shadow-[0_0_60px_rgba(227,92,92,0.3)]',
},
protest_defense_requested: {
bg: 'bg-warning-amber/10',
border: 'border-warning-amber/50',
text: 'text-warning-amber',
glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
glow: 'shadow-[0_0_60px_rgba(255,197,86,0.3)]',
},
protest_vote_required: {
bg: 'bg-primary-blue/10',
border: 'border-primary-blue/50',
text: 'text-primary-blue',
bg: 'bg-primary-accent/10',
border: 'border-primary-accent/50',
text: 'text-primary-accent',
glow: 'shadow-[0_0_60px_rgba(25,140,255,0.3)]',
},
penalty_issued: {
bg: 'bg-red-500/10',
border: 'border-red-500/50',
text: 'text-red-400',
glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
bg: 'bg-critical-red/10',
border: 'border-critical-red/50',
text: 'text-critical-red',
glow: 'shadow-[0_0_60px_rgba(227,92,92,0.3)]',
},
race_performance_summary: {
bg: 'bg-gradient-to-br from-yellow-400/20 via-orange-500/20 to-red-500/20',
border: 'border-yellow-400/60',
text: 'text-yellow-400',
glow: 'shadow-[0_0_80px_rgba(251,191,36,0.4)]',
bg: 'bg-panel-gray',
border: 'border-warning-amber/60',
text: 'text-warning-amber',
glow: 'shadow-[0_0_80px_rgba(255,197,86,0.2)]',
},
race_final_results: {
bg: 'bg-gradient-to-br from-purple-500/20 via-pink-500/20 to-indigo-500/20',
border: 'border-purple-400/60',
text: 'text-purple-400',
glow: 'shadow-[0_0_80px_rgba(168,85,247,0.4)]',
bg: 'bg-panel-gray',
border: 'border-primary-accent/60',
text: 'text-primary-accent',
glow: 'shadow-[0_0_80px_rgba(25,140,255,0.2)]',
},
};
@@ -123,10 +123,10 @@ export function ModalNotification({
const NotificationIcon = notificationIcons[notification.type] || AlertCircle;
const colors = notificationColors[notification.type] || {
bg: 'bg-warning-amber/10',
border: 'border-warning-amber/50',
text: 'text-warning-amber',
glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
bg: 'bg-panel-gray',
border: 'border-border-gray',
text: 'text-gray-400',
glow: 'shadow-card',
};
const data: Record<string, unknown> = notification.data ?? {};
@@ -160,7 +160,6 @@ export function ModalNotification({
// Special celebratory styling for race notifications
const isRaceNotification = notification.type.startsWith('race_');
const isPerformanceSummary = notification.type === 'race_performance_summary';
const provisionalRatingChange = getNumber(data.provisionalRatingChange) ?? 0;
const finalRatingChange = getNumber(data.finalRatingChange) ?? 0;
@@ -177,10 +176,8 @@ export function ModalNotification({
justifyContent="center"
p={4}
transition
bg={isVisible ? 'bg-black/70' : 'bg-transparent'}
// eslint-disable-next-line gridpilot-rules/component-classification
bg={isVisible ? 'bg-black/80' : 'bg-transparent'}
className={isVisible ? 'backdrop-blur-sm' : ''}
hoverBg={isRaceNotification ? 'bg-gradient-to-br from-black/80 via-indigo-900/10 to-black/80' : undefined}
>
<Box
w="full"
@@ -188,55 +185,45 @@ export function ModalNotification({
transform
transition
opacity={isVisible ? 1 : 0}
// eslint-disable-next-line gridpilot-rules/component-classification
className={isVisible ? 'scale-100' : 'scale-95'}
>
<Box
rounded="2xl"
rounded="sm"
border
borderWidth="2px"
borderColor={colors.border}
bg={colors.bg}
bg="panel-gray"
shadow={colors.glow}
overflow="hidden"
position={isRaceNotification ? 'relative' : undefined}
// eslint-disable-next-line gridpilot-rules/component-classification
className="backdrop-blur-md"
>
{/* Header with pulse animation */}
{/* Header */}
<Box
px={6}
py={4}
bg={colors.bg}
bg="graphite-black"
borderBottom
borderColor={colors.border}
// eslint-disable-next-line gridpilot-rules/component-classification
className={isRaceNotification ? 'bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent' : ''}
>
<Box display="flex" alignItems="center" justifyContent="between">
<Box display="flex" alignItems="center" gap={4}>
<Box
p={3}
rounded="xl"
bg={colors.bg}
p={2}
rounded="sm"
bg="panel-gray"
border
borderColor={colors.border}
shadow={isRaceNotification ? 'lg' : undefined}
>
<Icon icon={NotificationIcon} size={6} color={colors.text} />
<Icon icon={NotificationIcon} size={5} color={colors.text} />
</Box>
<Box>
<Text
size="xs"
weight="semibold"
transform="uppercase"
// eslint-disable-next-line gridpilot-rules/component-classification
className="tracking-wide"
color={isRaceNotification ? 'text-yellow-400' : 'text-gray-400'}
weight="bold"
className="uppercase tracking-widest"
color="text-gray-500"
>
{isRaceNotification ? (isPerformanceSummary ? '🏁 Race Complete!' : '🏆 Championship Update') : 'Action Required'}
{isRaceNotification ? 'Race Update' : 'Action Required'}
</Text>
<Heading level={2} fontSize="xl" weight="bold" color="text-white">
<Heading level={3} weight="bold" color="text-white">
{notification.title}
</Heading>
</Box>
@@ -249,7 +236,7 @@ export function ModalNotification({
onClick={() => onDismiss(notification)}
variant="ghost"
size="md"
color="text-gray-400"
color="text-gray-500"
title="Dismiss notification"
/>
)}
@@ -257,17 +244,11 @@ export function ModalNotification({
</Box>
{/* Body */}
<Box
px={6}
py={5}
// eslint-disable-next-line gridpilot-rules/component-classification
className={isRaceNotification ? 'bg-gradient-to-b from-transparent to-yellow-500/5' : ''}
>
<Box px={6} py={6}>
<Text
leading="relaxed"
size={isRaceNotification ? 'lg' : 'base'}
weight={isRaceNotification ? 'medium' : 'normal'}
color={isRaceNotification ? 'text-white' : 'text-gray-300'}
size="base"
color="text-gray-300"
block
>
{notification.message}
@@ -275,16 +256,16 @@ export function ModalNotification({
{/* Race performance stats */}
{isRaceNotification && (
<Box display="grid" gridCols={2} gap={3} mt={4}>
<Box bg="bg-black/20" rounded="lg" p={3} border borderColor="border-yellow-400/20">
<Text size="xs" color="text-yellow-300" weight="medium" block mb={1}>POSITION</Text>
<Box display="grid" gridCols={2} gap={4} mt={6}>
<Box bg="graphite-black" rounded="sm" p={4} border borderColor="border-border-gray">
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest">POSITION</Text>
<Text size="2xl" weight="bold" color="text-white" block>
{notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`}
</Text>
</Box>
<Box bg="bg-black/20" rounded="lg" p={3} border borderColor="border-yellow-400/20">
<Text size="xs" color="text-yellow-300" weight="medium" block mb={1}>RATING CHANGE</Text>
<Text size="2xl" weight="bold" color={ratingChange >= 0 ? 'text-green-400' : 'text-red-400'} block>
<Box bg="graphite-black" rounded="sm" p={4} border borderColor="border-border-gray">
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest">RATING</Text>
<Text size="2xl" weight="bold" color={ratingChange >= 0 ? 'text-success-green' : 'text-critical-red'} block>
{ratingChange >= 0 ? '+' : ''}
{ratingChange}
</Text>
@@ -294,12 +275,12 @@ export function ModalNotification({
{/* Deadline warning */}
{hasDeadline && !isRaceNotification && (
<Box mt={4} display="flex" alignItems="center" gap={2} px={4} py={3} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30">
<Box mt={6} display="flex" alignItems="center" gap={3} px={4} py={3} rounded="sm" bg="warning-amber/5" border borderColor="border-warning-amber/20">
<Icon icon={Clock} size={5} color="text-warning-amber" />
<Box>
<Text size="sm" weight="medium" color="text-warning-amber" block>Response Required</Text>
<Text size="xs" color="text-gray-400" block>
Please respond by {deadline ? deadline.toLocaleDateString() : ''} at {deadline ? deadline.toLocaleTimeString() : ''}
<Text size="sm" weight="bold" color="text-warning-amber" block className="uppercase tracking-wider">Response Required</Text>
<Text size="xs" color="text-gray-500" block mt={0.5}>
By {deadline ? deadline.toLocaleDateString() : ''} {deadline ? deadline.toLocaleTimeString() : ''}
</Text>
</Box>
</Box>
@@ -307,9 +288,9 @@ export function ModalNotification({
{/* Additional context from data */}
{protestId && (
<Box mt={4} p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
<Text size="xs" color="text-gray-500" block mb={1}>Related Protest</Text>
<Text size="sm" color="text-gray-300" font="mono" block>
<Box mt={6} p={3} rounded="sm" bg="graphite-black" border borderColor="border-border-gray">
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest text-[10px]">PROTEST ID</Text>
<Text size="xs" color="text-gray-400" font="mono" block>
{protestId}
</Text>
</Box>
@@ -321,10 +302,8 @@ export function ModalNotification({
px={6}
py={4}
borderTop
borderColor={isRaceNotification ? (isPerformanceSummary ? 'border-yellow-400/60' : 'border-purple-400/60') : 'border-charcoal-outline'}
bg={isRaceNotification ? undefined : 'bg-iron-gray/30'}
// eslint-disable-next-line gridpilot-rules/component-classification
className={isRaceNotification ? (isPerformanceSummary ? 'bg-gradient-to-r from-yellow-500/10 to-orange-500/10' : 'bg-gradient-to-r from-purple-500/10 to-pink-500/10') : ''}
borderColor="border-border-gray"
bg="graphite-black"
>
<Box display="flex" flexWrap="wrap" gap={3} justifyContent="end">
{notification.actions && notification.actions.length > 0 ? (
@@ -333,9 +312,7 @@ export function ModalNotification({
key={index}
variant={action.type === 'primary' ? 'primary' : 'secondary'}
onClick={() => handleAction(action)}
bg={action.type === 'danger' ? 'bg-red-500' : undefined}
color={action.type === 'danger' ? 'text-white' : undefined}
shadow={isRaceNotification ? 'lg' : undefined}
className={action.type === 'danger' ? 'bg-critical-red hover:bg-critical-red/90' : ''}
>
{action.label}
</Button>
@@ -346,22 +323,14 @@ export function ModalNotification({
<Button
variant="secondary"
onClick={() => (onDismiss ? onDismiss(notification) : onAction(notification, 'dismiss'))}
shadow="lg"
>
Dismiss
</Button>
<Button
variant="secondary"
onClick={() => handleAction({ id: 'share', label: 'Share Achievement', type: 'secondary' })}
shadow="lg"
>
🎉 Share
</Button>
<Button
variant={isPerformanceSummary ? 'race-performance' : 'race-final'}
variant="primary"
onClick={handlePrimaryAction}
>
{isPerformanceSummary ? '🏁 View Race Results' : '🏆 View Standings'}
{notification.type === 'race_performance_summary' ? 'View Results' : 'View Standings'}
</Button>
</>
) : (
@@ -375,9 +344,9 @@ export function ModalNotification({
{/* Cannot dismiss warning */}
{notification.requiresResponse && !isRaceNotification && (
<Box px={6} py={2} bg="bg-red-500/10" borderTop borderColor="border-red-500/20">
<Text size="xs" color="text-red-400" textAlign="center" block>
⚠️ This notification requires your action and cannot be dismissed
<Box px={6} py={2} bg="critical-red/5" borderTop borderColor="border-critical-red/10">
<Text size="xs" color="text-critical-red" textAlign="center" block weight="medium">
This action is required to continue
</Text>
</Box>
)}