Skip to content

Commit

Permalink
Merge pull request #122 from dappforce/fix-banner
Browse files Browse the repository at this point in the history
Fix staking info banner on creator staking page
  • Loading branch information
samchuk-vlad authored Dec 15, 2023
2 parents cbcf365 + 5030344 commit af27b1f
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 68 deletions.
77 changes: 26 additions & 51 deletions public/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -634,11 +634,6 @@ video {
margin: 0.25rem;
}

.\!mx-4 {
margin-left: 1rem !important;
margin-right: 1rem !important;
}

.mx-0 {
margin-left: 0px;
margin-right: 0px;
Expand Down Expand Up @@ -877,8 +872,12 @@ video {
width: 13rem;
}

.w-\[13rem\] {
width: 13rem;
.w-\[14rem\] {
width: 14rem;
}

.w-\[17rem\] {
width: 17rem;
}

.w-\[20px\] {
Expand All @@ -902,18 +901,6 @@ video {
width: 100vw;
}

.w-\[14rem\] {
width: 14rem;
}

.w-\[13\.5rem\] {
width: 13.5rem;
}

.w-\[17rem\] {
width: 17rem;
}

.min-w-fit {
min-width: -moz-fit-content;
min-width: fit-content;
Expand Down Expand Up @@ -1368,34 +1355,30 @@ video {
--tw-bg-opacity: 0.25;
}

.bg-staking-bg-mobile {
background-image: url(/images/banners/staking-bg-mobile.png);
.bg-earn-sub-desktop-banner {
background-image: url(/images/banners/earn-sub-desktop-banner.png);
}

.bg-support-creators-mobile-banner {
background-image: url(/images/banners/support-creators-mobile-banner.png);
.bg-earn-sub-mobile-banner {
background-image: url(/images/banners/earn-sub-mobile-banner.png);
}

.bg-support-creators-desktop-banner {
background-image: url(/images/banners/support-creators-desktop-banner.png);
.bg-staking-bg-mobile {
background-image: url(/images/banners/staking-bg-mobile.png);
}

.bg-earn-sub-desktop-banner {
background-image: url(/images/banners/earn-sub-desktop-banner.png);
.bg-support-creators-desktop-banner {
background-image: url(/images/banners/support-creators-desktop-banner.png);
}

.bg-earn-sub-mobile-banner {
background-image: url(/images/banners/earn-sub-mobile-banner.png);
.bg-support-creators-mobile-banner {
background-image: url(/images/banners/support-creators-mobile-banner.png);
}

.bg-cover {
background-size: cover;
}

.bg-right {
background-position: right;
}

.bg-center {
background-position: center;
}
Expand Down Expand Up @@ -1731,6 +1714,11 @@ video {
line-height: 1.5;
}

.\!text-\[\#A91C83\] {
--tw-text-opacity: 1 !important;
color: rgb(169 28 131 / var(--tw-text-opacity)) !important;
}

.\!text-red-500 {
--tw-text-opacity: 1 !important;
color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
Expand Down Expand Up @@ -1828,24 +1816,6 @@ video {
color: rgb(255 255 255 / 0.8);
}

.text-\[\] {
color: ;
}

.text-\[\#\] {
color: #;
}

.text-\[\#A91C83\] {
--tw-text-opacity: 1;
color: rgb(169 28 131 / var(--tw-text-opacity));
}

.\!text-\[\#A91C83\] {
--tw-text-opacity: 1 !important;
color: rgb(169 28 131 / var(--tw-text-opacity)) !important;
}

.opacity-0 {
opacity: 0;
}
Expand Down Expand Up @@ -2112,6 +2082,11 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:text-text:hover {
--tw-text-opacity: 1;
color: rgb(var(--text) / var(--tw-text-opacity));
}

.hover\:underline:hover {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
Expand Down
7 changes: 4 additions & 3 deletions src/components/creatorsStaking/Banner/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,11 @@ const Banner = () => {
>
<div className='flex md:flex-row gap-6 flex-col justify-between md:items-start items-center w-full'>
<div className='flex flex-col gap-2 text-white md:items-start items-center'>
<div className='text-4xl md:text-left text-center UnboundedFont'>Creator Staking Beta</div>
<div className='text-4xl md:text-left text-center UnboundedFont'>
Creator Staking Beta
</div>
<div className='text-[20px] md:text-left text-center'>
An innovative way to stake for your favorite dapp and content
creators
Generate rewards for both you and creators by staking SUB towards them
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/components/creatorsStaking/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import GetSubInfoSection from './utils/GetSubInfoSection'
import StakingInfoBanner from './utils/StakingInfoBanner'

const MultiAccountWarning = () => {
const [openModal, setOpenModal] = useState(false)
const [ openModal, setOpenModal ] = useState(false)

const onButtonClick = () => {
setOpenModal(true)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const buttonStyles = cva('relative rounded-full transition leading-[22px]
primaryOutline:
'bg-transparent border border-background-primary !text-text-primary',
whiteOutline: 'bg-transparent border border-white text-text',
white: 'bg-white !text-text',
white: 'bg-white text-text hover:text-text',
mutedOutline: 'bg-transparent border border-text-muted text-text-muted',
transparent: 'bg-transparent',
redOutline: 'bg-transparent border border-text-red',
Expand Down
22 changes: 10 additions & 12 deletions src/components/creatorsStaking/utils/StakingInfoBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ const StakingInfoBanner = () => {
sendEvent(eventName, { amountRange: amountRange })
}

if (loading && !locked) return null

const isStaked = locked && !new BN(locked).isZero()

if ((loading && !locked) || !isStaked) return null

const walletForDiscussUrl = wallet ? `?wallet=${wallet}` : ''

return (
Expand All @@ -40,39 +40,37 @@ const StakingInfoBanner = () => {
'flex flex-col gap-4 relative rounded-[20px] text-white',
'md:p-6 p-4',
{
['bg-support-creators-mobile-banner']: !isStaked && isMobile,
['bg-support-creators-desktop-banner']: !isStaked && !isMobile,
// ['bg-support-creators-mobile-banner']: !isStaked && isMobile,
// ['bg-support-creators-desktop-banner']: !isStaked && !isMobile,
['bg-earn-sub-mobile-banner']: isStaked && isMobile,
['bg-earn-sub-desktop-banner']: isStaked && !isMobile,
}
)}
>
<div className='flex flex-col gap-2'>
<div className='md:text-4xl text-2xl md:w-full w-[17rem] UnboundedFont'>
{isStaked ? 'Earn extra SUB tokens' : 'Support creators & earn SUB'}
Earn extra SUB tokens
</div>
<div
className={clsx('md:text-xl text-lg text-white/80', {
['w-[14rem]']: isStaked && isMobile,
})}
>
{isStaked
? 'Get rewarded based on your social activity'
: 'Generate rewards for both you and creators by staking towards them'}
Get rewarded based on your social activity
</div>
</div>
<div className='flex items-center gap-4'>
<Button
href='https://subsocial.network/active-staking-details'
target='_blank'
variant={'white'}
className={clsx('md:w-auto w-full border-white !text-text-primary', {
['!text-[#A91C83]']: isStaked,
})}
className={clsx(
'md:w-auto w-full border-white !text-[#A91C83]'
)}
disabled={loading}
onClick={() => onButtonClick('cs_active_cs_banner_lear_more_clicked')}
>
{isMobile ? 'Learn more' : 'How does it work?'}
Learn more
</Button>
<Button
href={`https://grill.chat/creators/stakers-20132${walletForDiscussUrl}`}
Expand Down

0 comments on commit af27b1f

Please sign in to comment.