From fb69c979232cfd53a38b803b6fc4544610d2f431 Mon Sep 17 00:00:00 2001 From: Thunnini Date: Tue, 20 Dec 2022 23:37:56 +0900 Subject: [PATCH] Some improvements for complete page --- pages/complete/index.tsx | 212 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 204 insertions(+), 8 deletions(-) diff --git a/pages/complete/index.tsx b/pages/complete/index.tsx index 82e17d5..33f9c3c 100644 --- a/pages/complete/index.tsx +++ b/pages/complete/index.tsx @@ -111,6 +111,15 @@ export default function CompletePage() { {availableAddress} + + + Make your way up the leaderboard + + + Tweet an invite link and both you and your friend will earn points + on the ICNS leaderboard. + + @@ -120,8 +129,100 @@ export default function CompletePage() { width={28} height={28} /> - INVITE FRIENDS + TWEET INVITE LINK + { + e.preventDefault(); + + const { twitterUsername } = router.query; + + navigator.clipboard.writeText( + `https://app.icns.xyz?referral=${twitterUsername}`, + ); + }} + > + copy invite link + + + + + + + + + + + + + + + Coming soon + + + Leaderboard + + + + + + + + + ); @@ -142,14 +243,10 @@ const MainContainer = styled.div` color: white; `; -const MainTitle = styled.h1` - text-overflow: ; -`; - const ContentContainer = styled.div` width: 31rem; - padding: 2.625rem 3rem; + padding: 2.625rem 0; background-color: ${color.grey["900"]}; `; @@ -174,7 +271,7 @@ const TitleContainer = styled.div` const RecipentContainer = styled.div` display: flex; flex-direction: column; - margin: 0 1rem; + margin: 0 4rem; gap: 0.5rem; `; @@ -188,6 +285,33 @@ const RecipentTitle = styled.div` color: ${color.grey["400"]}; `; +const SubLeaderboardIntroContainer = styled.div` + margin: 0 2.5rem; + margin-top: 2.5rem; + + padding: 1.25rem 1.5rem; + + background-color: ${color.grey["700"]}; +`; + +const SubLeaderboardIntroTitle = styled.div` + font-weight: 600; + font-size: 0.8125rem; + line-height: 123.5%; + + margin-bottom: 0.75rem; + + color: ${color.grey["100"]}; +`; + +const SubLeaderboardIntroDescription = styled.div` + font-weight: 400; + font-size: 0.8125rem; + line-height: 138%; + + color: ${color.grey["300"]}; +`; + const AddressContainer = styled.div` font-family: "Inter", serif; font-style: normal; @@ -260,7 +384,8 @@ const ShareButtonContainer = styled.div` width: 20rem; height: 5rem; - margin-top: 0.75rem; + margin-top: 1.5rem; + margin-bottom: 1.125rem; cursor: pointer; user-select: none; @@ -278,3 +403,74 @@ const ShareButtonText = styled.div` color: ${color.grey["100"]}; `; + +const CopyInviteLink = styled.div` + display: flex; + align-items: center; + + font-weight: 600; + font-size: 0.875rem; + line-height: 102.5%; + + text-align: center; + letter-spacing: 0.07em; + text-transform: uppercase; + + color: ${color.grey["200"]}; + stroke: ${color.grey["200"]}; + + &:hover { + color: ${color.grey["300"]}; + stroke: ${color.grey["300"]}; + } + + cursor: pointer; +`; + +const ComingSoonLeaderboardContainer = styled.div` + margin-top: 4.5rem; + + height: 5rem; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +`; + +const ComingSoonLeaderboardContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 10rem; +`; + +const ComingSoonLeaderboardContent1 = styled.div` + font-weight: 600; + font-size: 0.8125rem; + line-height: 102.5%; + + letter-spacing: 0.19em; + text-transform: uppercase; + + margin-bottom: 0.5rem; + + color: ${color.grey["700"]}; +`; + +const ComingSoonLeaderboardContent2 = styled.div` + font-weight: 600; + font-size: 1rem; + line-height: 102.5%; + + letter-spacing: 0.07em; + text-transform: uppercase; + + color: ${color.grey["500"]}; +`; + +const RotateSvg = styled.svg` + animation: ${spinAnimation} 4s linear infinite; +`;