Fix staking info banner on creator staking page

dappforce · Dec 15, 2023 · 5030344 · 5030344
1 parent cbcf365
commit 5030344
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 68 deletions.
diff --git 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
@@ -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>
 

diff --git 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
@@ -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
@@ -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,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}`}