From b86fa06d7b4e86f266f41d21904a62d722813fd1 Mon Sep 17 00:00:00 2001 From: saithsab877 Date: Sat, 25 Jan 2025 19:04:00 +0500 Subject: [PATCH] feat: update bounty landing page layout and display --- src/components/common/TopEarners/index.tsx | 30 ------- .../TopEarners/leaderboardItem/index.tsx | 44 +++++++++-- src/helpers/helpers-extended.ts | 7 ++ src/pages/BountiesLandingPage/index.tsx | 79 ++++++++++++++++--- 4 files changed, 115 insertions(+), 45 deletions(-) diff --git a/src/components/common/TopEarners/index.tsx b/src/components/common/TopEarners/index.tsx index c75d7ee13..42889b7cd 100644 --- a/src/components/common/TopEarners/index.tsx +++ b/src/components/common/TopEarners/index.tsx @@ -68,31 +68,6 @@ const ErrorContainer = styled.div` color: ${colors.light.red1}; `; -const ViewBountiesButton = styled.button` - margin-top: 60px; - padding: 12px 24px; - font-size: 16px; - font-weight: bold; - color: white; - background-color: ${colors.light.blue1}; - border: none; - border-radius: 8px; - cursor: pointer; - transition: background-color 0.3s; - display: block; - margin-left: auto; - margin-right: auto; - - &:hover { - background-color: ${colors.light.blue2}; - } - - &:focus { - outline: none; - box-shadow: 0 0 0 2px ${colors.light.blue2}; - } -`; - const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarnersProps) => { const { leaderboard } = useStores(); const [error, setError] = useState(null); @@ -111,10 +86,6 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner fetchData(); }, [leaderboard, onError]); - const handleViewBountiesClick = () => { - window.open('https://community.sphinx.chat/bounties', '_blank'); - }; - if (error) { return ( @@ -140,7 +111,6 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner ))} - View Open Bounties ); }); diff --git a/src/components/common/TopEarners/leaderboardItem/index.tsx b/src/components/common/TopEarners/leaderboardItem/index.tsx index f75a5d475..3becce3b4 100644 --- a/src/components/common/TopEarners/leaderboardItem/index.tsx +++ b/src/components/common/TopEarners/leaderboardItem/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import styled from 'styled-components'; import { PriceOuterContainer } from '../..'; import { colors } from '../../../../config'; -import { DollarConverter } from '../../../../helpers'; +import { formatSatsInMillions, satToUsd } from '../../../../helpers'; import { LeaderItem } from '../../../../pages/leaderboard/store'; import { UserInfo } from '../../../../pages/leaderboard/userInfo'; @@ -15,6 +15,7 @@ const ItemContainer = styled.div` align-items: center; gap: 1rem; padding: 0.5rem; + padding-right: 0 !important; margin-left: var(--position-gutter); background-color: ${colors.light.pureWhite}; border-radius: 0.5rem; @@ -47,6 +48,38 @@ const ItemContainer = styled.div` left: calc(-1 * var(--position-gutter)); font-weight: 500; } + + & .Price_Dynamic_Text { + display: flex; + align-items: center; + } + + & .Price_inner_Container { + display: flex; + align-items: center; + gap: 4px; + } + + & .sat-amount { + display: flex; + align-items: center; + gap: 4px; + } + + & .separator { + margin: 0 10px; + color: black; + font-weight: 500; + } + + & .usd-amount { + margin-right: 5px; + color: ${colors.light.text2}; + &::before { + content: '|'; + color: ${colors.light.grayish.G900}; + } + } `; type Props = LeaderItem & { @@ -69,10 +102,11 @@ export const LeaerboardItem = ({ owner_pubkey, total_sats_earned, position }: Pr priceBackground={color.primaryColor.P100} >
- {DollarConverter(total_sats_earned)} -
-
- SAT +
+ {formatSatsInMillions(total_sats_earned)} SAT + | + ${satToUsd(total_sats_earned)} +
diff --git a/src/helpers/helpers-extended.ts b/src/helpers/helpers-extended.ts index 45e1e9581..66fe32f10 100644 --- a/src/helpers/helpers-extended.ts +++ b/src/helpers/helpers-extended.ts @@ -406,3 +406,10 @@ export const normalizeUrl = (input: string): string => { return noSpaces; } }; + +export const formatSatsInMillions = (sats: number): string => { + if (sats >= 1000000) { + return `${(sats / 1000000).toFixed(1)}M`; + } + return DollarConverter(sats); +}; diff --git a/src/pages/BountiesLandingPage/index.tsx b/src/pages/BountiesLandingPage/index.tsx index 419b2f61f..9456dcef8 100644 --- a/src/pages/BountiesLandingPage/index.tsx +++ b/src/pages/BountiesLandingPage/index.tsx @@ -1,13 +1,50 @@ /* eslint-disable react/prop-types */ -import React from 'react'; +import React, { useState } from 'react'; import styled from 'styled-components'; import { useIsMobile } from '../../hooks'; import { colors } from '../../config/colors'; import TopEarners from '../../components/common/TopEarners/index.tsx'; import { BountyComponents } from '../../components/BountyComponents'; +import StartUpModal from '../../people/utils/StartUpModal'; + +const ButtonContainer = styled.div` + display: flex; + gap: 16px; + margin-top: 20px; + margin-bottom: 20px; +`; + +const Button = styled.button<{ variant: 'primary' | 'secondary' }>` + padding: 12px 24px; + font-size: 16px; + font-weight: 600; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + + ${({ variant }: { variant: 'primary' | 'secondary' }) => + variant === 'primary' + ? ` + background: ${colors.light.blue1}; + color: white; + border: none; + &:hover { + background: ${colors.light.blue2}; + } + ` + : ` + background: transparent; + color: ${colors.light.blue1}; + border: 1px solid ${colors.light.blue1}; + &:hover { + background: ${colors.light.blue1}10; + } + `} +`; const BountiesLandingPage: React.FC = () => { const isMobile = useIsMobile(); + const [isOpenStartupModal, setIsOpenStartupModal] = useState(false); const color = colors['light']; @@ -25,7 +62,7 @@ const BountiesLandingPage: React.FC = () => { `; const ContentWrapper = styled.div` - max-width: 1500px; + max-width: 1550px; width: 100%; margin: 40px; padding: 40px; @@ -50,10 +87,8 @@ const BountiesLandingPage: React.FC = () => { const ContentGrid = styled.div` display: grid; grid-template-columns: 2fr 1fr; - gap: 60px; height: 100%; position: relative; - margin-right: -20px; &:after { content: ''; @@ -93,7 +128,7 @@ const BountiesLandingPage: React.FC = () => { font-family: Barlow; color: ${color.text1}; margin-bottom: 24px; - font-weight: 500; + font-weight: 600; } p { @@ -115,7 +150,7 @@ const BountiesLandingPage: React.FC = () => { font-family: Barlow; color: ${color.text1}; margin-bottom: 24px; - font-weight: 500; + font-weight: 600; } p { @@ -127,24 +162,48 @@ const BountiesLandingPage: React.FC = () => { } `; + const handleStartEarning = () => { + setIsOpenStartupModal(true); + }; + + const handleViewBounties = () => { + window.open('https://community.sphinx.chat/bounties', '_blank'); + }; + return ( -

Welcome to Bounties

+

Complete Tasks and Get Paid in Bitcoin Instantly

- Building the modern marketplace for work. Complete a bounty and get paid in Bitcoin - instantly! ⚡ + Welcome to the modern marketplace for work that gives you the freedom to earn Bitcoin + for every bounty you complete.

+ + + + -

Freedom to Earn!

+

All-Time Top Bounty Hunters

 + + {isOpenStartupModal && ( + setIsOpenStartupModal(false)} + dataObject={'createWork'} + buttonColor={'success'} + /> + )} ); };