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-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
apps/website/components/onboarding/AvatarStep.tsx
View File

@@ -115,43 +115,50 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
flex={1}
display="flex"
flexDirection="column"
align="center"
justify="center"
padding={6}
alignItems="center"
justifyContent="center"
p={6}
rounded="xl"
border
borderColor={avatarInfo.facePhoto ? 'performance-green' : errors.facePhoto ? 'racing-red' : 'charcoal-outline'}
backgroundColor={avatarInfo.facePhoto ? 'performance-green' : errors.facePhoto ? 'racing-red' : 'transparent'}
opacity={avatarInfo.facePhoto || errors.facePhoto ? 0.1 : 1}
className="border-2 border-dashed cursor-pointer transition-all hover:border-primary-blue hover:bg-primary-blue/5"
borderStyle="dashed"
borderWidth="2px"
borderColor={avatarInfo.facePhoto ? 'border-performance-green' : errors.facePhoto ? 'border-racing-red' : 'border-charcoal-outline'}
bg={avatarInfo.facePhoto ? 'bg-performance-green/10' : errors.facePhoto ? 'bg-racing-red/10' : 'transparent'}
cursor="pointer"
transition
hoverBorderColor="border-primary-blue"
hoverBg="bg-primary-blue/5"
position="relative"
>
<input
<Box
as="input"
ref={fileInputRef}
type="file"
accept="image/*"
onChange={handleFileSelect}
className="hidden"
display="none"
/>
{avatarInfo.isValidating ? (
<Stack align="center" center>
<Icon icon={Loader2} size={10} color="text-primary-blue" className="animate-spin mb-3" />
<Stack alignItems="center" center>
<Icon icon={Loader2} size={10} color="text-primary-blue" animate="spin" mb={3} />
<Text size="sm" color="text-gray-400">Validating photo...</Text>
</Stack>
) : avatarInfo.facePhoto ? (
<Stack align="center" center>
<Box width={24} height={24} rounded="xl" className="overflow-hidden mb-3 ring-2 ring-performance-green">
<Stack alignItems="center" center>
<Box w="24" h="24" rounded="xl" overflow="hidden" mb={3} ring="ring-2 ring-performance-green">
<Image
src={avatarInfo.facePhoto}
alt="Your photo"
width={96}
height={96}
className="w-full h-full object-cover"
objectFit="cover"
fullWidth
fullHeight
/>
</Box>
<Text size="sm" color="text-performance-green" block>
<Stack direction="row" align="center" gap={1}>
<Stack flexDirection="row" alignItems="center" gap={1}>
<Icon icon={Check} size={4} />
Photo uploaded
</Stack>
@@ -159,8 +166,8 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
<Text size="xs" color="text-gray-500" mt={1}>Click to change</Text>
</Stack>
) : (
<Stack align="center" center>
<Icon icon={Upload} size={10} color="text-gray-500" className="mb-3" />
<Stack alignItems="center" center>
<Icon icon={Upload} size={10} color="text-gray-500" mb={3} />
<Text size="sm" color="text-gray-300" weight="medium" block mb={1}>
Drop your photo here or click to upload
</Text>
@@ -172,8 +179,8 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
</Box>
{/* Preview area */}
<Stack width={32} align="center" center>
<Surface variant="muted" rounded="xl" border width={24} height={24} display="flex" center className="overflow-hidden">
<Stack w="32" alignItems="center" center>
<Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden">
{(() => {
const selectedAvatarUrl =
avatarInfo.selectedAvatarIndex !== null
@@ -183,7 +190,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
return <Icon icon={User} size={8} color="text-gray-600" />;
}
return (
<Image src={selectedAvatarUrl} alt="Selected avatar" width={96} height={96} className="w-full h-full object-cover" />
<Image src={selectedAvatarUrl} alt="Selected avatar" width={96} height={96} objectFit="cover" fullWidth fullHeight />
);
})()}
</Surface>
@@ -191,34 +198,38 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
</Stack>
</Stack>
{errors.facePhoto && (
<Text size="sm" color="text-error-red" block mt={2}>{errors.facePhoto}</Text>
<Text size="sm" color="text-racing-red" block mt={2}>{errors.facePhoto}</Text>
)}
</Box>
{/* Suit Color Selection */}
<Box>
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
<Stack direction="row" align="center" gap={2}>
<Stack flexDirection="row" alignItems="center" gap={2}>
<Icon icon={Palette} size={4} />
Racing Suit Color
</Stack>
</Text>
<Stack direction="row" wrap gap={2}>
<Stack flexDirection="row" flexWrap="wrap" gap={2}>
{SUIT_COLORS.map((color) => (
<Button
key={color.value}
type="button"
onClick={() => setAvatarInfo({ ...avatarInfo, suitColor: color.value })}
className={`relative w-10 h-10 rounded-lg transition-all p-0 ${
avatarInfo.suitColor === color.value
? 'ring-2 ring-primary-blue ring-offset-2 ring-offset-iron-gray scale-110'
: 'hover:scale-105'
}`}
style={{ backgroundColor: color.hex }}
rounded="lg"
transition
p={0}
w="10"
h="10"
position="relative"
ring={avatarInfo.suitColor === color.value ? 'ring-2 ring-primary-blue ring-offset-2 ring-offset-iron-gray' : ''}
transform={avatarInfo.suitColor === color.value ? 'scale(1.1)' : ''}
hoverScale={avatarInfo.suitColor !== color.value}
bg={color.hex}
title={color.label}
>
{avatarInfo.suitColor === color.value && (
<Icon icon={Check} size={5} className={
<Icon icon={Check} size={5} color={
['white', 'yellow', 'cyan'].includes(color.value) ? 'text-gray-800' : 'text-white'
} />
)}
@@ -239,7 +250,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
onClick={onGenerateAvatars}
disabled={avatarInfo.isGenerating || avatarInfo.isValidating}
fullWidth
icon={avatarInfo.isGenerating ? <Icon icon={Loader2} size={5} className="animate-spin" /> : <Icon icon={Sparkles} size={5} />}
icon={avatarInfo.isGenerating ? <Icon icon={Loader2} size={5} animate="spin" /> : <Icon icon={Sparkles} size={5} />}
>
{avatarInfo.isGenerating ? 'Generating your avatars...' : (avatarInfo.generatedAvatars.length > 0 ? 'Regenerate Avatars' : 'Generate Racing Avatars')}
</Button>
@@ -258,15 +269,22 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
key={index}
type="button"
onClick={() => setAvatarInfo({ ...avatarInfo, selectedAvatarIndex: index })}
className={`relative aspect-square rounded-xl overflow-hidden border-2 transition-all p-0 ${
avatarInfo.selectedAvatarIndex === index
? 'border-primary-blue ring-2 ring-primary-blue/30 scale-105'
: 'border-charcoal-outline hover:border-gray-500'
}`}
position="relative"
rounded="xl"
overflow="hidden"
border
borderWidth="2px"
transition
p={0}
borderColor={avatarInfo.selectedAvatarIndex === index ? 'border-primary-blue' : 'border-charcoal-outline'}
ring={avatarInfo.selectedAvatarIndex === index ? 'ring-2 ring-primary-blue/30' : ''}
transform={avatarInfo.selectedAvatarIndex === index ? 'scale(1.05)' : ''}
hoverBorderColor={avatarInfo.selectedAvatarIndex !== index ? 'border-gray-500' : ''}
aspectRatio="1/1"
>
<Image src={url} alt={`Avatar option ${index + 1}`} width={200} height={200} className="w-full h-full object-cover" />
<Image src={url} alt={`Avatar option ${index + 1}`} width={200} height={200} objectFit="cover" fullWidth fullHeight />
{avatarInfo.selectedAvatarIndex === index && (
<Box position="absolute" top={2} right={2} width={6} height={6} rounded="full" backgroundColor="primary-blue" display="flex" center>
<Box position="absolute" top={2} right={2} w="6" h="6" rounded="full" bg="bg-primary-blue" display="flex" center>
<Icon icon={Check} size={4} color="text-white" />
</Box>
)}