diff --git a/public/tailwind.css b/public/tailwind.css index 05853fa5..bed14ea1 100644 --- a/public/tailwind.css +++ b/public/tailwind.css @@ -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; @@ -877,8 +872,12 @@ video { width: 13rem; } -.w-\[13rem\] { - width: 13rem; +.w-\[14rem\] { + width: 14rem; +} + +.w-\[17rem\] { + width: 17rem; } .w-\[20px\] { @@ -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; @@ -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; } @@ -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; @@ -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; } @@ -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; diff --git a/src/components/creatorsStaking/Banner/index.tsx b/src/components/creatorsStaking/Banner/index.tsx index a2180d98..cbaae784 100644 --- a/src/components/creatorsStaking/Banner/index.tsx +++ b/src/components/creatorsStaking/Banner/index.tsx @@ -87,10 +87,11 @@ const Banner = () => { >
-
Creator Staking Beta
+
+ Creator Staking Beta +
- An innovative way to stake for your favorite dapp and content - creators + Generate rewards for both you and creators by staking SUB towards them
diff --git a/src/components/creatorsStaking/index.tsx b/src/components/creatorsStaking/index.tsx index 33e7b341..037c7ab3 100644 --- a/src/components/creatorsStaking/index.tsx +++ b/src/components/creatorsStaking/index.tsx @@ -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) diff --git a/src/components/creatorsStaking/tailwind-components/Button.tsx b/src/components/creatorsStaking/tailwind-components/Button.tsx index 228c1a29..c5e8712a 100644 --- a/src/components/creatorsStaking/tailwind-components/Button.tsx +++ b/src/components/creatorsStaking/tailwind-components/Button.tsx @@ -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', diff --git a/src/components/creatorsStaking/utils/StakingInfoBanner.tsx b/src/components/creatorsStaking/utils/StakingInfoBanner.tsx index 5d3da4c0..8c27c360 100644 --- a/src/components/creatorsStaking/utils/StakingInfoBanner.tsx +++ b/src/components/creatorsStaking/utils/StakingInfoBanner.tsx @@ -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 ( @@ -40,8 +40,8 @@ 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, } @@ -49,16 +49,14 @@ const StakingInfoBanner = () => { >
- {isStaked ? 'Earn extra SUB tokens' : 'Support creators & earn SUB'} + Earn extra SUB tokens
- {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
@@ -66,13 +64,13 @@ const StakingInfoBanner = () => { 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