Merge pull request #131 from dappforce/change-staking-bg

Change bg for creator staking banner section
dappforce · Dec 27, 2023 · a35c7a3 · a35c7a3
2 parents fd9d525 + cda2c99
commit a35c7a3
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git a/public/images/banners/staking-bg-mobile.png b/public/images/banners/staking-bg-mobile.png
diff --git a/public/images/banners/staking-bg.png b/public/images/banners/staking-bg.png
diff --git a/public/tailwind.css b/public/tailwind.css
@@ -1422,6 +1422,14 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-white\/20 {
+  background-color: rgb(255 255 255 / 0.2);
+}
+
+.bg-white\/50 {
+  background-color: rgb(255 255 255 / 0.5);
+}
+
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
@@ -1914,6 +1922,10 @@ video {
   color: rgb(255 255 255 / 0.8);
 }
 
+.text-text-dark\/80 {
+  color: rgb(var(--text-dark) / 0.8);
+}
+
 .opacity-0 {
   opacity: 0;
 }

diff --git a/src/components/creatorsStaking/Banner/index.tsx b/src/components/creatorsStaking/Banner/index.tsx
@@ -88,7 +88,7 @@ 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='flex flex-col gap-2 text-text-dark md:items-start items-center'>
             <div className='text-4xl md:text-left text-center UnboundedFont'>
               Creator Staking Beta
             </div>

diff --git a/src/components/creatorsStaking/Banner/utils.tsx b/src/components/creatorsStaking/Banner/utils.tsx
@@ -15,14 +15,14 @@ type StatsCardProps = {
 
 export const DashboardCard = ({ title, value, desc, infoTitle }: StatsCardProps) => {
   return (
-    <CardWrapper className='bg-background-stats-card/20 min-h-[116px] backdrop-blur-[24.5px]'>
-      <div className='text-white/80 flex items-center gap-2'>
+    <CardWrapper className='bg-white/50 min-h-[116px] backdrop-blur-[24.5px]'>
+      <div className='text-text-dark/80 flex items-center gap-2'>
         {title}
         {infoTitle && <Tooltip title={infoTitle}><QuestionCircleOutlined /></Tooltip>}
       </div>
       <div>
-        <div className='text-white md:text-2xl text-[19px]  font-semibold'>{value}</div>
-        {desc && <div className='text-white/80 text-sm'>{desc}</div>}
+        <div className='text-text-dark md:text-2xl text-[19px]  font-semibold'>{value}</div>
+        {desc && <div className='text-text-dark/80 text-sm'>{desc}</div>}
       </div>
     </CardWrapper>
   )

diff --git a/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx b/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
@@ -66,7 +66,7 @@ const SuccessModal = ({
         <Button
           variant='primary'
           href='https://subsocial.network/active-staking-details'
-          className='w-max md:!px-6 !px-4 text-sm'
+          className='w-max md:!px-6 !px-4 text-sm hover:text-white'
           size='md'
         >
           Learn more