Skip to content

Commit

Permalink
Installed tailwind and rebuilt leaderboard page (#528)
Browse files Browse the repository at this point in the history 
* installed tailwind and rebuilt leaderboard page

* Use new sidebar

* Change bonus points modal, integrate topbar

---------

Co-authored-by: Jiong Yan Yap <[email protected]>
  • Loading branch information
@nicolasmatthewlee @VictiniX888
nicolasmatthewlee and VictiniX888 authored Nov 4, 2024
1 parent ec2e3a9 commit 916e97a
Show file tree
Hide file tree
Showing 14 changed files with 653 additions and 410 deletions.
171 changes: 43 additions & 128 deletions apps/dashboard/components/battlepass/battlepass-page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,16 @@
import { H3, Text } from '@hibiscus/ui';
import { GlobalStyles } from '@hibiscus/styles';
import {
GlobalStyle,
BodyTextSmall,
BodyText,
Heading,
} from '@hacksc/sctw-ui-kit';
import { Text } from '@hibiscus/ui';
import { useBattlepassAPI } from '../../hooks/use-battlepass-api/use-battlepass-api';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import BattlepassPointsBar from './battlepass-points-bar';
import { BattlepassWelcomeHeader } from './battlepass-welcome-header';
import BattlepassLeaderboard from './leaderboard/battlepass-leaderboard';
import { BonusPointItem } from './bonus-points/types';
import BattlepassBonusPointsList from './bonus-points/bonus-points-list';
import useHibiscusUser from '../../hooks/use-hibiscus-user/use-hibiscus-user';
import Image from 'next/image';
import {
BattlepassProgress,
BATTLEPASS_LEVEL_POINTS,
calculateBattlepassProgress,
} from '../../common/calculate-battlepass-progress';
import { GlowSpan } from '@hibiscus/ui-kit-2023';
import { Colors2023 } from '@hibiscus/styles';

function BattlepassPage() {
const battlepassAPI = useBattlepassAPI();
Expand Down Expand Up @@ -61,127 +49,54 @@ function BattlepassPage() {
}, []);

return (
<Wrapper>
<BattlepassWelcomeHeader />
<WidgetContainer>
<WidgetHeader>Your Points</WidgetHeader>
{bpProg !== null && (
<BattlepassPointsBar
rangeMinPoint={bpProg.level}
rangeMaxPoint={bpProg.nextLevel}
currentPoint={userPoints}
minLabel={<YellowPoints>{userPoints} PTS</YellowPoints>}
maxLabel={
BATTLEPASS_LEVEL_POINTS[bpProg.level] <
BATTLEPASS_LEVEL_POINTS[3] ? (
<PreNextLevelText>
Next level @{' '}
<NextLevelTextSpan color={Colors2023.BLUE.STANDARD}>
{bpProg.nextLevel} PTS
</NextLevelTextSpan>
</PreNextLevelText>
) : null
}
/>
)}
</WidgetContainer>
<SecondSection>
<LeftColumnSecondSection>
<WidgetContainer>
<WidgetHeader>Leaderboard</WidgetHeader>
<BattlepassLeaderboard />
</WidgetContainer>
</LeftColumnSecondSection>
<RightColumnSecondSection>
<WidgetContainer>
<WidgetHeader>Bonus Points</WidgetHeader>
<div className="border-neutral-200 border">
{/* content */}
<div className="flex space-x-[90px]">
{/* left column */}
<div className="flex-1 space-y-[60px] flex flex-col justify-between">
{/* points bar */}
<div>
<h2 className="text-base m-0 mb-[10px]">Points</h2>
{bpProg !== null && (
<BattlepassPointsBar
rangeMinPoint={bpProg.level}
rangeMaxPoint={bpProg.nextLevel}
currentPoint={userPoints}
minLabel={
<div className="text-sm italic">{userPoints + ' pts'}</div>
}
maxLabel={
BATTLEPASS_LEVEL_POINTS[bpProg.level] <
BATTLEPASS_LEVEL_POINTS[3] ? (
<div className="text-theme-gray text-sm">
{'NEXT LEVEL @ '}{' '}
<span className="text-theme-blue italic font-medium">
{bpProg.nextLevel + ' pts'}
</span>
</div>
) : null
}
/>
)}
</div>
{/* bonus points activities */}
<div>
<h2 className="text-base m-0 mb-[10px]">Bonus Points</h2>
{bonusPointItems.loading ? (
<Text>Loading</Text>
) : (
<BattlepassBonusPointsList items={bonusPointItems.data} />
)}
</WidgetContainer>
</RightColumnSecondSection>
</SecondSection>
</Wrapper>
</div>
</div>
{/* leaderboard */}
<div className="flex-1">
<h2 className="text-base m-0 mb-[10px]">Leaderboard</h2>
<BattlepassLeaderboard />
</div>
</div>
</div>
);
}

export default BattlepassPage;

const PreNextLevelText = styled(BodyTextSmall)`
color: #939393;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
`;
const NextLevelTextSpan = styled.span`
color: var(--Redward, #ff514f);
text-align: center;
/* smaller red glow */
text-shadow: 0px 0px 10px rgba(255, 94, 92, 0.5);
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0;
text-transform: uppercase;
`;

const YellowPoints = styled(BodyTextSmall)`
color: var(--Arthurs-Sweater, #ecb400);
text-align: center;
/* smaller yellow glow */
text-shadow: 0px 0px 10px #ffd13c;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0;
text-transform: uppercase;
`;

const Wrapper = styled.div`
display: flex;
flex-direction: column;
gap: 2rem;
background-color: white;
padding-bottom: 50px;
`;

const WidgetContainer = styled.div`
display: flex;
flex-direction: column;
gap: 10px;
`;

const LeftColumnSecondSection = styled.div`
display: flex;
flex-direction: column;
flex: 1;
`;

const RightColumnSecondSection = styled.div`
display: flex;
flex-direction: column;
flex: 1;
`;

const SecondSection = styled.div`
display: flex;
gap: 30px;
@media (max-width: 1024px) {
flex-direction: column;
}
`;

const WidgetHeader = styled.p`
font-family: 'filson-pro', sans-serif;
color: var(--Redward, #ff514f);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -1.25px;
`;
57 changes: 15 additions & 42 deletions apps/dashboard/components/battlepass/battlepass-points-bar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { Colors2023 } from '@hibiscus/styles';
import React from 'react';
import styled from 'styled-components';

interface Props {
rangeMinPoint: number;
Expand All @@ -21,47 +19,22 @@ function BattlepassPointsBar(props: Props) {
);

return (
<Container>
<BarBack>
<BarFront progress={progress} />
</BarBack>
<BottomDiv>
<div style={{ color: '#ecb400' }}>{props.minLabel}</div>
<div style={{ color: '#ce0c0a' }}>{props.maxLabel}</div>
</BottomDiv>
</Container>
<div className="space-y-[5px]">
<div className="relative h-[25px]">
{progress > 0 && (
<div
className="bg-theme-red absolute rounded h-full border"
style={{ width: progress * 100 + '%' }}
/>
)}
<div className="absolute rounded w-full h-full border"></div>
</div>
<div className="flex justify-between">
<div>{props.minLabel}</div>
<div>{props.maxLabel}</div>
</div>
</div>
);
}

export default BattlepassPointsBar;

const Container = styled.div`
width: 26rem;
max-width: 100%;
`;

const BarBack = styled.div`
position: relative;
width: 100%;
height: 1.3rem;
border: 3px solid #ff514f;
border-radius: 100px;
box-shadow: 0px 0px 10px 0px #fe513980;
`;

const BarFront = styled.div<{ progress: number }>`
position: absolute;
top: 0;
left: 0;
width: ${(props) => props.progress * 100}%;
height: 100%;
border-radius: inherit;
background-color: #ff514f;
text-shadow: 0px 0px 10px #ffffff;
`;

const BottomDiv = styled.div`
margin-top: 8px;
display: flex;
justify-content: space-between;
`;
33 changes: 0 additions & 33 deletions apps/dashboard/components/battlepass/battlepass-welcome-header.tsx
View file

This file was deleted.

41 changes: 10 additions & 31 deletions apps/dashboard/components/battlepass/bonus-points/bonus-points-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
import { H3, H4, Text } from '@hibiscus/ui';
// import { Button } from '@hibiscus/ui-kit-2023';
import { Button } from '@hacksc/sctw-ui-kit';
import React from 'react';
import styled from 'styled-components';
import { BonusPointsStatus } from '../../../common/apis/battlepass/types';
import { BonusPointItem } from './types';

Expand All @@ -13,39 +9,22 @@ interface Props {

function BonusPointsItem({ data, handleClick }: Props) {
return (
<Container>
<TextDiv>
<Text style={{ color: 'white' }}>{data.points} pts</Text>
<H4>{data.title}</H4>
</TextDiv>
<div>
<Button
color="yellow"
<div className="flex justify-between space-x-[15px]">
<div className="space-y-[5px]">
<p className="text-theme-blue font-medium text-xs">{data.points} pts</p>
<p className="text-sm">{data.title}</p>
</div>
<div className="flex items-center">
<button
className="border border-theme-gray rounded px-[20px] py-[5px] text-xs text-theme-gray"
disabled={data.status !== BonusPointsStatus.VERIFY}
onClick={handleClick}
>
{data.status}
</Button>
</button>
</div>
</Container>
</div>
);
}

export default BonusPointsItem;

const TextDiv = styled.div`
@media (max-width: 768px) {
width: 100%;
}
`;

const Container = styled.div`
display: flex;
justify-content: space-between;
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
}
padding: 10px;
gap: 10px;
`;
Loading

0 comments on commit 916e97a

Please sign in to comment.