website refactor
This commit is contained in:
@@ -5,7 +5,6 @@ import { ProtestViewModel } from "@/lib/view-models/ProtestViewModel";
|
||||
import { RaceViewModel } from "@/lib/view-models/RaceViewModel";
|
||||
import { DriverViewModel } from "@/lib/view-models/DriverViewModel";
|
||||
import { Card } from "@/ui/Card";
|
||||
import { Box } from "@/ui/Box";
|
||||
import { Stack } from "@/ui/Stack";
|
||||
import { Text } from "@/ui/Text";
|
||||
import { Heading } from "@/ui/Heading";
|
||||
@@ -45,15 +44,15 @@ export function PenaltyHistoryList({
|
||||
return (
|
||||
<Stack gap={4}>
|
||||
{filteredProtests.length === 0 ? (
|
||||
<Card py={12} textAlign="center">
|
||||
<Stack alignItems="center" gap={4}>
|
||||
<Card py={12} className="text-center">
|
||||
<Stack align="center" gap={4}>
|
||||
<Icon icon={AlertCircle} size={12} color="text-gray-400" opacity={0.5} />
|
||||
<Box>
|
||||
<Stack>
|
||||
<Text weight="medium" size="lg" color="text-gray-400" block>No Resolved Protests</Text>
|
||||
<Text size="sm" color="text-gray-500" mt={1} block>
|
||||
No protests have been resolved in this league
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
) : (
|
||||
@@ -68,45 +67,42 @@ export function PenaltyHistoryList({
|
||||
|
||||
return (
|
||||
<Card key={protest.id} p={4}>
|
||||
<Box display="flex" alignItems="start" gap={4}>
|
||||
<Box
|
||||
<Stack direction="row" align="start" gap={4}>
|
||||
<Stack
|
||||
w="10"
|
||||
h="10"
|
||||
rounded="full"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
align="center"
|
||||
justify="center"
|
||||
flexShrink={0}
|
||||
bg={statusColors.bg}
|
||||
color={statusColors.text}
|
||||
>
|
||||
<Icon icon={Flag} size={5} />
|
||||
</Box>
|
||||
<Box flex={1}>
|
||||
</Stack>
|
||||
<Stack flex={1}>
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" gap={4}>
|
||||
<Box>
|
||||
<Stack direction="row" align="start" justify="between" gap={4}>
|
||||
<Stack>
|
||||
<Heading level={3}>
|
||||
Protest #{protest.id.substring(0, 8)}
|
||||
</Heading>
|
||||
<Text size="sm" color="text-gray-400" block>
|
||||
{resolvedDate ? `Resolved ${new Date(resolvedDate).toLocaleDateString()}` : 'Resolved'}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
</Stack>
|
||||
<Stack
|
||||
px={3}
|
||||
py={1}
|
||||
rounded="full"
|
||||
bg={statusColors.bg}
|
||||
color={statusColors.text}
|
||||
fontSize="12px"
|
||||
weight="medium"
|
||||
flexShrink={0}
|
||||
className="text-[12px] font-medium flex-shrink-0"
|
||||
>
|
||||
{protest.status.toUpperCase()}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Text size="sm" color="text-gray-400" block>
|
||||
<Text weight="medium" color="text-white">{protester?.name || 'Unknown'}</Text> vs <Text weight="medium" color="text-white">{accused?.name || 'Unknown'}</Text>
|
||||
</Text>
|
||||
@@ -115,20 +111,20 @@ export function PenaltyHistoryList({
|
||||
{race.track} ({race.car}) - Lap {incident.lap}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
{incident && (
|
||||
<Text size="sm" color="text-gray-300" block>{incident.description}</Text>
|
||||
)}
|
||||
{protest.decisionNotes && (
|
||||
<Box mt={2} p={2} rounded="md" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline/50">
|
||||
<Stack mt={2} p={2} rounded="md" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline/50">
|
||||
<Text size="xs" color="text-gray-400" block>
|
||||
<Text weight="medium">Steward Notes:</Text> {protest.decisionNotes}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
@@ -136,4 +132,4 @@ export function PenaltyHistoryList({
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user