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