Skip to content

Commit

Permalink
style: restyle leaderboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinWu098
KevinWu098 committed May 11, 2024
1 parent c847350 commit c177435
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 99 deletions.
12 changes: 4 additions & 8 deletions src/components/InputData/InputDataDashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,13 +121,7 @@ const InputDataDashboard = ({ event, checkin, trashCollected }) => {
</Flex>
</Flex>

<Flex
gap={{ base: '3', xl: '5' }}
h={{ xl: '100%' }}
justifyContent={'center'}
alignItems={'center'}
maxH={200}
>
<Flex gap={3} justifyContent={'center'} alignItems={'center'} h={200}>
<Flex
bg="white"
p={30}
Expand All @@ -138,6 +132,7 @@ const InputDataDashboard = ({ event, checkin, trashCollected }) => {
justifyContent={'center'}
alignItems={'center'}
width={200}
aspectRatio={1}
>
<Flex background={'#915EFF'} p={2.5} borderRadius={'lg'}>
<IoMdPeople w={{ base: '42.782px', xl: '42.782px' }} color="white" />
Expand Down Expand Up @@ -167,6 +162,7 @@ const InputDataDashboard = ({ event, checkin, trashCollected }) => {
justifyContent={'center'}
alignItems={'center'}
width={200}
aspectRatio={1}
>
<Flex background={'#FF84B0'} p={2.5} borderRadius={'lg'}>
<FaScaleBalanced w={{ base: '42.782px', xl: '42.782px' }} color="white" />
Expand All @@ -186,7 +182,7 @@ const InputDataDashboard = ({ event, checkin, trashCollected }) => {
</Center>
</Flex>

<Flex bg="white">
<Flex bg="white" borderRadius="md">
<Leaderboard event_id={event.id} />
</Flex>
</Flex>
Expand Down
186 changes: 95 additions & 91 deletions src/components/Leaderboard/Leaderboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,117 +30,121 @@ const LeaderboardCard = ({ event_id }) => {
return (
<>
<Flex
mx="5px"
// my="19px"
display="flex"
flexDir="column"
alignContent="center"
justifyContent="center"
gap={{ base: '2px', xl: '5px' }}
h={{ base: '211px', xl: '100%' }}
width={250}
h={200}
rounded={8}
p={30}
overflowY={'scroll'}
>
<Text
fontSize={{ base: '22px', xl: '22px' }}
fontWeight="sm"
textAlign="center"
marginTop={{ xl: '0' }}
>
<Text fontWeight="sm" textAlign="center" fontSize={'large'} pt={30} pb={4}>
Leaderboard
</Text>

{/* 1ST PLACE */}
<Flex
bgColor="#D4E4F9"
color="#1873FB"
borderRadius={'md'}
px={{ base: 2, xl: 3 }}
py={2}
alignItems={'center'}
gap={3}
fontSize={{ base: '16px', xl: '16px' }}
>
<Flex gap={2} alignItems={'center'} w={'9rem'}>
<Flex justifyContent={'center'} w={{ base: '12px', xl: '30px' }}>
<Image src={first} />
<Flex direction={'column'} gap={2}>
{/* 1ST PLACE */}
<Flex
bgColor="#D4E4F9"
color="#1873FB"
borderRadius={'md'}
alignItems={'center'}
gap={3}
fontSize={{ base: '16px', xl: '16px' }}
px={2}
py={3}
maxW={'100%'}
>
<Flex gap={2} alignItems={'center'} w={'9rem'}>
<Flex justifyContent={'center'} w={6}>
<Image src={first} />
</Flex>
<Text
fontWeight="bold"
fontSize={{ base: '16px', xl: '16px' }}
w="auto"
overflow={'hidden'}
textOverflow={'ellipsis'}
whiteSpace="nowrap"
>
{LeaderboardArray[0] && LeaderboardArray[0].volunteer_first_name}{' '}
{LeaderboardArray[0] && LeaderboardArray[0].volunteer_last_name}
</Text>
</Flex>
<Text
fontWeight="bold"
fontSize={{ base: '16px', xl: '16px' }}
w="auto"
textAlign="center"
>
{LeaderboardArray[0] && LeaderboardArray[0].volunteer_first_name}{' '}
{LeaderboardArray[0] && LeaderboardArray[0].volunteer_last_name}
<Text fontWeight="bold" whiteSpace="nowrap">
{LeaderboardArray[0] && truncate(LeaderboardArray[0].total_weight, 2)} lb
</Text>
</Flex>
<Text fontWeight="bold">
{LeaderboardArray[0] && truncate(LeaderboardArray[0].total_weight, 2)} lb
</Text>
</Flex>

{/* 2ND PLACE */}
<Flex
color="black"
borderRadius={'md'}
px={{ base: 2, xl: 3 }}
py={2}
alignItems={'center'}
gap={3}
fontSize={{ base: '16px', xl: '16px' }}
>
<Flex gap={{ base: '2', xl: '4' }} alignItems={'center'} w={'9rem'}>
<Flex justifyContent={'center'} w={{ base: '14px', xl: '30px' }}>
<Text color="#1873FB" fontWeight={'medium'} fontSize={{ base: '20px', xl: '3xl' }}>
2
{/* 2ND PLACE */}
<Flex
color="black"
borderRadius={'md'}
alignItems={'center'}
gap={3}
fontSize={{ base: '16px', xl: '16px' }}
px={2}
maxW={'100%'}
>
<Flex gap={{ base: '2', xl: '4' }} alignItems={'center'} w={'9rem'}>
<Flex justifyContent={'center'}>
<Text color="#1873FB" fontWeight={'medium'} fontSize={24}>
2
</Text>
</Flex>

<Text
fontWeight="medium"
fontSize={{ base: '16px', xl: '16px' }}
textAlign="center"
whiteSpace="nowrap"
maxWidth={20}
overflow="hidden"
textOverflow={'ellipsis'}
>
{LeaderboardArray[1] && LeaderboardArray[1].volunteer_first_name}{' '}
{LeaderboardArray[1] && LeaderboardArray[1].volunteer_last_name}
</Text>
</Flex>
<Text
fontWeight="medium"
fontSize={{ base: '16px', xl: '16px' }}
textAlign="center"
whiteSpace="nowrap"
maxWidth={{ base: '100px', xl: '150px' }}
overflow="hidden"
>
{LeaderboardArray[1] && LeaderboardArray[1].volunteer_first_name}{' '}
{LeaderboardArray[1] && LeaderboardArray[1].volunteer_last_name}

<Text fontWeight="medium" fontSize={{ base: '14px', xl: '16px' }} whiteSpace="nowrap">
{LeaderboardArray[1] && truncate(LeaderboardArray[1].total_weight, 2)} lb
</Text>
</Flex>
<Text fontWeight="medium" fontSize={{ base: '14px', xl: '16px' }}>
{LeaderboardArray[1] && truncate(LeaderboardArray[1].total_weight, 2)} lb
</Text>
</Flex>

{/* 3RD PLACE */}
<Flex
borderRadius={'md'}
px={{ base: 2, xl: 3 }}
py={2}
alignItems={'center'}
gap={{ base: '2', xl: '3' }}
fontSize={{ base: '16px', xl: 'lg' }}
>
<Flex gap={{ base: '2', xl: '4' }} alignItems={'center'} w={'9rem'}>
<Flex justifyContent={'center'} w={{ base: '14px', xl: '30px' }}>
<Text color="#1873FB" fontWeight={'medium'} fontSize={{ base: '20px', xl: '3xl' }}>
3
{/* 3RD PLACE */}
<Flex
borderRadius={'md'}
alignItems={'center'}
gap={{ base: '2', xl: '3' }}
fontSize={{ base: '16px', xl: 'lg' }}
px={2}
maxW={'100%'}
>
<Flex gap={{ base: '2', xl: '4' }} alignItems={'center'} w={'9rem'}>
<Flex justifyContent={'center'}>
<Text color="#1873FB" fontWeight={'medium'} fontSize={24}>
3
</Text>
</Flex>
<Text
fontWeight="medium"
fontSize={{ base: '16px', xl: '16px' }}
textAlign="center"
whiteSpace="nowrap"
overflow="hidden"
textOverflow={'ellipsis'}
maxWidth={20}
>
{LeaderboardArray[2] && LeaderboardArray[2].volunteer_first_name}{' '}
{LeaderboardArray[2] && LeaderboardArray[2].volunteer_last_name}
</Text>
</Flex>
<Text
fontWeight="semibold"
fontSize={{ base: '16px', xl: '16px' }}
textAlign="center"
whiteSpace="nowrap"
maxWidth={{ base: '100px', xl: '150px' }}
overflow="hidden"
>
{LeaderboardArray[2] && LeaderboardArray[2].volunteer_first_name}{' '}
{LeaderboardArray[2] && LeaderboardArray[2].volunteer_last_name}
<Text fontWeight="medium" fontSize={{ base: '14px', xl: '16px' }} whiteSpace="nowrap">
{LeaderboardArray[2] && truncate(LeaderboardArray[2].total_weight, 2)} lb
</Text>
</Flex>
<Text fontWeight="semibold" fontSize={{ base: '14px', xl: 'lg' }}>
{LeaderboardArray[2] && truncate(LeaderboardArray[2].total_weight, 2)} lb
</Text>
</Flex>
</Flex>
</>
Expand Down

0 comments on commit c177435

Please sign in to comment.