Merge pull request #653 from dappforce/colors

Update slides colors in dark mode
dappforce · Apr 26, 2024 · d14de3d · d14de3d
2 parents 1141c1f + d2aa34d
commit d14de3d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/src/components/carousel/CarouselDotButton.tsx b/src/components/carousel/CarouselDotButton.tsx
@@ -69,7 +69,7 @@ export const DotButton: React.FC<PropType> = (props) => {
       type='button'
       {...restProps}
       className={cx(
-        'h-2 w-2 rounded-full bg-black/40 transition-opacity',
+        'h-2 w-2 rounded-full bg-black/40 transition-opacity dark:bg-white/50',
         restProps.className
       )}
     >

diff --git a/src/components/layouts/CreatorSidebar/CreatorSidebar.tsx b/src/components/layouts/CreatorSidebar/CreatorSidebar.tsx
@@ -15,22 +15,22 @@ export default function CreatorSidebar({ className }: { className?: string }) {
 
   if (!isInitializedProxy || (isLoading && myAddress))
     return (
-      <div
-        ref={ref}
-        className={cx(
-          'flex animate-pulse flex-col rounded-2xl bg-background-light',
-          className
-        )}
-      >
-        <div className='flex flex-col gap-1 border-b border-border-gray p-4'>
-          <Skeleton className='w-48 text-lg' />
-          <Skeleton className='w-32 text-sm' />
-        </div>
-        <div className='flex flex-col gap-3 p-4 text-sm'>
-          <Skeleton className='w-full' />
-          <Skeleton className='w-full' />
-          <Skeleton className='w-full' />
-          <Skeleton className='w-full' />
+      <div className={className} ref={ref}>
+        <div
+          className={cx(
+            'flex animate-pulse flex-col rounded-2xl bg-background-light'
+          )}
+        >
+          <div className='flex flex-col gap-1 border-b border-border-gray p-4'>
+            <Skeleton className='w-48 text-lg' />
+            <Skeleton className='w-32 text-sm' />
+          </div>
+          <div className='flex flex-col gap-3 p-4 text-sm'>
+            <Skeleton className='w-full' />
+            <Skeleton className='w-full' />
+            <Skeleton className='w-full' />
+            <Skeleton className='w-full' />
+          </div>
         </div>
       </div>
     )

diff --git a/src/components/layouts/CreatorSidebar/OverviewCard.tsx b/src/components/layouts/CreatorSidebar/OverviewCard.tsx
@@ -38,7 +38,7 @@ function StakedCard() {
             buttonText='Start Earning'
             buttonHref='/staking'
             image={EngageToEarn}
-            className='bg-[#DFEFFF] text-[#4972E9]'
+            className='bg-[#DFEFFF] text-[#4972E9] dark:bg-[#092847] dark:text-[#A8BBF3]'
           />,
           <StakedSlide
             key='chat-monetization'
@@ -47,7 +47,7 @@ function StakedCard() {
             buttonText='Explore Chats'
             buttonHref='/'
             image={ChatMonetization}
-            className='bg-[#DFFFDF] text-[#30AD30]'
+            className='bg-[#DFFFDF] text-[#30AD30] dark:bg-[#092847] dark:text-[#A8BBF3]'
           />,
           <StakedSlide
             key='establish-your-brand'
@@ -57,7 +57,7 @@ function StakedCard() {
             buttonHref='/dd'
             forceHardNavigation
             image={EstablishBrand}
-            className='bg-[#ECF1FF] text-[#0F172A]'
+            className='bg-[#ECF1FF] text-[#0F172A] dark:bg-[#092847] dark:text-[#A8BBF3]'
           />,
           <StakedSlide
             key='seamless-access'
@@ -68,7 +68,7 @@ function StakedCard() {
             forceHardNavigation
             buttonHref='https://grillapp.net/@olehmell/lets-use-login-with-grill-key-100229'
             image={SeamlessAccess}
-            className='bg-[#C0FEF3] text-[#1A3D7A]'
+            className='bg-[#C0FEF3] text-[#1A3D7A] dark:bg-[#092847] dark:text-[#A8BBF3]'
           />,
         ]}
       />