feat: complete the dark mode on Explore

rooch-network · May 13, 2024 · 7458c00 · 7458c00
1 parent abd9702
commit 7458c00
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/docs/website/components/index/index.tsx b/docs/website/components/index/index.tsx
@@ -143,21 +143,22 @@ export default function Index({
       </div>
 
       {/* EXPLORE */}
-      <div className="py-16 md:py-20 px-4 sm:px-6 lg:px-20 bg-white flex flex-col md:flex-row items-center justify-center gap-6 md:gap-0">
+      <div className="py-16 md:py-20 px-4 sm:px-6 lg:px-20 bg-white flex flex-col md:flex-row items-center justify-center gap-6 md:gap-0 dark:bg-inherit">
         <div className="px-4 max-w-[854px] h-full w-full">
-          <h2 className="text-4xl md:text-6xl font-semibold text-center text-[#2E2929]">
+          <h2 className="text-4xl md:text-6xl font-semibold text-center text-[#2E2929] dark:text-[#E4E4E4]">
             {exploreTitle.split(' ').slice(0, -2).join(' ')}{' '}
             <span className="text-[#46977E]">{exploreTitle.split(' ').slice(-2).join(' ')}</span>
           </h2>
           <div className="flex flex-col items-center justify-center gap-6">
-            <h3 className="text-[#737B7D] text-base font-normal max-w-2xl text-center">
+            <h3 className="text-[#737B7D] dark:text-[#81888A] text-base font-normal max-w-2xl text-center">
               {exploreContent}
             </h3>
             <Image
               src="/logo/explore/explore_logo.svg"
               alt="explore logo"
               width={280}
               height={280}
+              className="dark:filter dark:invert dark:brightness-200"
             />
             <div className="mt-16">
               <Image
@@ -174,11 +175,11 @@ export default function Index({
         {/* EXPLORE CARDS */}
         <div className="flex flex-wrap justify-center gap-4">
           {explores.map((explore) => (
-            <div className="bg-[#BFC9C6] rounded-2xl border border-1 border-black shadow-lg p-6 w-full md:w-60 md:h-85 flex flex-col items-start justify-center gap-1">
+            <div className="bg-[#BFC9C6] rounded-2xl border border-1 border-black shadow-lg p-6 w-full md:w-60 md:h-85 flex flex-col items-start justify-center gap-1 hover:cursor-default">
               <div className="flex items-center justify-end w-full">
                 <Image src={explore.logo} alt={explore.title} width={100} height={100} />
               </div>
-              <h4 className="text-[#413434] font-bold text-2xl">{explore.title}</h4>
+              <h4 className="text-[#413434] font-bold text-2xl leading-7">{explore.title}</h4>
               <h4 className="text-[#413434] text-sm">{explore.description}</h4>
             </div>
           ))}

diff --git a/docs/website/tailwind.config.js b/docs/website/tailwind.config.js
@@ -11,6 +11,11 @@ module.exports = {
         'gradient-blogs':
           'linear-gradient(179.19deg, rgba(255, 255, 255, 0.76) 0.69%, rgba(179, 192, 188, 0.76) 50%, rgba(133, 157, 150, 0.76) 99.31%)',
       },
+      boxShadow: {
+        custom1: '0px 0px 18.38px 0px #FF914B', // 对应第一个阴影
+        custom2: '0px 0px 128.69px 0px #FF914B', // 对应第二个阴影
+        custom3: '0px 0px 220.61px 0px #FF914B', // 对应第三个阴影
+      },
     },
   },
   plugins: [require('preline/plugin')],