chore(explore): dark mode for explore pages

Author: 0tuedon

src/app/(explore)/[...slug]/page.tsx

@@ -90,7 +90,7 @@ const page = ({ params }: { params: { slug: string[] } }) => {
       <div className='flex items-start lg:gap-[50px]'>
         <div className='flex flex-col w-full gap-6 md:gap-8 2xl:gap-10 no-scrollbar'>
           <div
-            className={`flex flex-col ${
+            className={`flex flex-col dark:border-b-gray-custom-1800 ${
               isRoot ? "border-b border-b-[#9B9B9B] pb-6 md:border-b-0 md:pb-0" : "border-b border-b-[#9B9B9B] pb-6 lg:pb-10"
             } gap-5 2xl:gap-6`}
           >
@@ -150,7 +150,9 @@ const page = ({ params }: { params: { slug: string[] } }) => {
                   <Link
                     key={`${value.route}-${i}}`}
                     href={`/${[...slug, value.route].join("/")}`}
-                    className='flex capitalize cursor-pointer border max-w-[100%] border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
+                    className='flex capitalize cursor-pointer border max-w-[100%]
+                    border-gray-custom-1200 dark:border-gray-custom-1800 rounded-[5px] justify-between items-center
+                    text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100  dark:text-gray-custom-100'
                   >
                     <span className='text-wrap break-words max-w-[80%]'>{value.title}</span>
                     <span>{value.count}</span>

src/app/(explore)/categories/page.tsx

@@ -5,7 +5,7 @@ import allCategoriesTopic from "@/public/topics-by-category-counts.json";
 const CategoriesPage = () => {
 
   return (
-    <div className="flex flex-col text-black">
+    <div className="flex flex-col text-black dark:text-gray-custom-100">
         <TranscriptContentPage header="Categories" data={allCategoriesTopic} description="Explore the main areas of focus within the Bitcoin technical ecosystem."  type="words" linkName="tags"/>
     </div>
   );

src/app/about/page.tsx

@@ -12,7 +12,7 @@ import lowerLineIcon from "@/public/svgs/lower-line-icon.svg";
 const page = () => {
   return (
     <main className='flex flex-col items-center justify-center w-full'>
-      <Wrapper className='text-black flex flex-col max-sm:px-3'>
+      <Wrapper className='text-black flex flex-col max-sm:px-3 dark:text-gray-custom-100'>
         <div className='text-center py-10 md:py-[104px] flex flex-col items-center justify-center'>
           <h1 className='text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl'>What Is Bitcoin Transcripts?</h1>
           <p className='text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-10 md:pt-12 2xl:pt-14 text-center w-full'>
@@ -22,7 +22,7 @@ const page = () => {
         </div>
       </Wrapper>
 
-      <div className='bg-gray-custom-900 w-full'>
+      <div className='bg-gray-custom-900 w-full dark:bg-dark-custom-200'>
         <Wrapper className='py-16 md:py-[104px] flex flex-col md:flex-row items-center justify-between gap-10 md:gap-8 lg:gap-[52px] max-sm:px-3'>
           <section className='max-w-full md:max-w-[50%]'>
             <h1 className='text-[40px] text-center md:text-start leading-[48px] font-medium md:text-5xl 2xl:text-6xl'>How We Got Here</h1>
@@ -152,9 +152,9 @@ const GroupedImageSection = ({
                 alt={title}
                 width={132}
                 height={132}
-                className='w-[100px] md:w-[132px] h-[100px] md:h-[132px] bg-black rounded-full border-[0.5px]'
+                className='w-[100px] md:w-[132px] h-[100px] md:h-[132px] bg-black dark:bg-gray-custom-100 rounded-full border-[0.5px]'
               />
-              <p className='text-custom-black-custom-400 text-sm leading-[22.12px] font-medium md:text-base md:font-semibold md:leading-[25.28px] whitespace-nowrap max-w-full text-nowrap overflow-hidden text-ellipsis'>
+              <p className='text-custom-black-custom-400 dark:text-gray-custom-100 text-sm leading-[22.12px] font-medium md:text-base md:font-semibold md:leading-[25.28px] whitespace-nowrap max-w-full text-nowrap overflow-hidden text-ellipsis'>
                 {title}
               </p>
             </Link>

src/components/common/Pill.tsx

@@ -5,7 +5,9 @@ const Pill = ({ name, slug }: { name: string; slug: string }) => {
     <Link
       key={name}
       href={slug || ""}
-      className="max-content py-1 px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 max-md:px-3 max-md:py-[2px] text-xs md:text-sm 2xl:text-base max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]"
+      className="max-content py-1 px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600
+      hover:text-gray-custom-100 max-md:px-3 max-md:py-[2px]  dark:bg-gray-custom-2100 dark:hover:bg-gray-custom-1800
+      text-xs md:text-sm 2xl:text-base max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]"
     >
       {name}
     </Link>

src/components/common/TranscriptDetailsCard.tsx

@@ -3,29 +3,29 @@ import Link from "next/link";
 import Image from "next/image";
 import { ContentTreeArray } from "@/utils/data";
 import DateIcon from "/public/svgs/date-icon.svg";
-import TagsIcon from "/public/svgs/tags-icon.svg";
 import { ContentData, createSlug, formatDate, unsluggify } from "@/utils";
 import { MicIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 import Pill from "./Pill";
+import TagIcon from "../svgs/TagIcon";
 
 const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[] }) => {
   const { speakers, tagsDetailed,  summary, date, title, body, languageURL } = data;
   const calculateRemaining = (data: ContentData[] | string[]) => (data?.length && data.length > 3 ? data.length - 3 : 0);
 
   return (
-    <div className='border border-gray-custom-1200 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
+    <div className='border border-gray-custom-1200 dark:border-gray-custom-1800 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
       <section className='flex justify-between'>
         <div className='flex md:flex-row flex-col justify-between gap-2 w-full'>
           <Link
             href={`${languageURL}`}
-            className='font-bold text-base leading-[21.86px] md:text-xl 2xl:text-[22.5px] md:leading-[30px] text-orange-custom-100 md:text-black'
+            className='font-bold text-base leading-[21.86px] md:text-xl 2xl:text-[22.5px] md:leading-[30px] text-orange-custom-100 md:text-black dark:text-gray-custom-100'
           >
             {title}
           </Link>
           {date && (
             <div className='flex gap-2 items-center h-fit'>
-              <Image src={DateIcon} alt='date icon' className='w-[18px] md:w-[20px]' />
-              <p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800'>{formatDate(date!)}</p>
+              <Image src={DateIcon} alt='date icon' className='w-[18px] md:w-[20px] dark:text-gray-custom-600' />
+              <p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800 dark:text-gray-custom-600'>{formatDate(date!)}</p>
             </div>
           )}
         </div>
@@ -36,7 +36,7 @@ const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[
           <section className='flex gap-2 items-center max-md:gap-1'>
             <>
               <span>
-                <MicIcon className='w-5 md:w-6' />
+                <MicIcon className='w-5 md:w-6 dark:text-gray-custom-100' />
               </span>
               <div className='flex gap-[9px] flex-wrap'>
                 <div className='flex flex-wrap gap-[9px] max-md:gap-2'>
@@ -45,7 +45,7 @@ const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[
                   ))}
 
                   {calculateRemaining(speakers) === 0 ? null : (
-                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
+                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 dark:bg-gray-custom-2100 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
                       + {calculateRemaining(speakers)} more
                     </p>
                   )}
@@ -59,7 +59,7 @@ const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[
           {tagsDetailed?.length ? (
             <>
               <span>
-                <Image src={TagsIcon} alt='date icon' className='w-5 md:w-6' />
+                <TagIcon className='w-5 md:w-6 dark:text-gray-custom-100' />
               </span>
               <div className='flex gap-[9px] flex-wrap'>
                 <div className='flex flex-wrap gap-[9px] max-md:gap-2'>
@@ -81,7 +81,7 @@ const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[
 
       {summary || body ? (
         <section>
-          <p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 2xl:leading-[25px] line-clamp-3'>{summary ? summary : body}</p>
+          <p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 dark:text-gray-custom-100 2xl:leading-[25px] line-clamp-3'>{summary ? summary : body}</p>
         </section>
       ) : null}
     </div>

src/components/explore/AlphabetGrouping.tsx

@@ -14,25 +14,26 @@ const AlphabetGrouping = ({ currentGroup, groupedData }: IAlphabetGrouping) => {
   return (
     <div
       className={
-        "grid grid-cols-5 p-5 gap-4 lg:p-6  2xl:gap-6  border border-gray-custom-1200 rounded-md"
+        "grid grid-cols-5 p-5 gap-4 lg:p-6  2xl:gap-6  border border-gray-custom-1200 dark:border-gray-custom-1800 rounded-md"
       }
     >
       {allCharacters.map((char) =>
         !char.isDisabled ? (
           <Link
             key={char.alp}
             href={`#${char.alp.toLowerCase()}`}
-            className={` flex justify-center items-center w-8 h-8 text-base 2xl:h-10 2xl:w-10 2xl:text-lg
+            className={` flex justify-center items-center w-8 h-8 text-base 2xl:h-10 2xl:w-10 2xl:text-lg dark:text-gray-custom-100
     ${
       currentGroup === char.alp
-        ? "text-orange-custom-100 bg-orange-custom-900 rounded-[4px] font-semibold"
+        ? `text-orange-custom-100 dark:text-orange-custom-100 bg-orange-custom-900 dark:bg-brown-custom-100
+        rounded-[4px] font-semibold dark:border dark:border-gray-custom-1800`
         : ""
     } `}
           >
             {char.alp}
           </Link>
         ) : (
-          <button  key={char.alp} className="text-gray-custom-1400 cursor-not-allowed">
+          <button  key={char.alp} className="text-gray-custom-1400 dark:text-gray-custo-100 cursor-not-allowed">
             {char.alp}
           </button>
         )

src/components/explore/ContentGrouping.tsx

@@ -26,7 +26,7 @@ const ContentGrouping = ({
       linkRef.current.click();
     }
   };
-  
+
   useEffect(() => {
     if (currentGroup) {
       if (selectRef.current) {
@@ -40,18 +40,20 @@ const ContentGrouping = ({
       {screen === "desktop" && (
         <div
           className={twMerge(
-            " flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))] overflow-auto scroller border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
+            `flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))]
+            overflow-auto scroller border-gray-custom-1200   dark:border-gray-custom-1800
+            rounded-md w-full min-w-[260px] 2xl:min-w-[354px] `,
             className
           )}
         >
           {Object.keys(groupedData).map((char) => (
             <Link
               key={char}
               href={`#${createContentSlug(char)}`}
-              className={`flex text-sm  2xl:text-lg leading-5   ${
+              className={`flex text-sm  2xl:text-lg leading-5 ${
                 createContentSlug(currentGroup) == createContentSlug(char)
-                  ? "text-orange-custom-100 rounded-[4px] font-semibold"
-                  : ""
+                  ? "text-orange-custom-100  rounded-[4px] font-semibold"
+                  : "dark:text-gray-custom-100"
               } `}
             >
               {char}

src/components/explore/ExploreNavigation.tsx

@@ -8,12 +8,12 @@ import { ArrowLinkUpRight } from "@bitcoin-dev-project/bdp-ui/icons";
 const ExploreNavigation = () => {
   return (
     <section className='hidden md:flex  flex-shrink-0 sticky top-0 overflow-y-auto flex-col self-start gap-4 2xl:gap-6 w-full max-w-[240px] 2xl:max-w-[320px]'>
-      <div className='flex flex-col gap-4 2xl:gap-6 rounded-lg px-5 py-[23px] border border-gray-custom-1200'>
+      <div className='flex flex-col gap-4 2xl:gap-6 rounded-lg px-5 py-[23px] border border-gray-custom-1200 dark:border-gray-custom-1800'>
         {ExploreNavigationItems.map((item) => (
           <ExploreNavigationItem key={item.href} href={item.href} title={item.title} />
         ))}
       </div>
-      <div className='flex flex-col gap-4 rounded-lg p-4 border border-gray-custom-1200'>
+      <div className='flex flex-col gap-4 rounded-lg p-4 border border-gray-custom-1200 dark:border-gray-custom-1800'>
         <p className='text-sm 2xl:text-lg font-semibold'>Review Transcripts</p>
         <Link
           href='https://review.btctranscripts.com'
@@ -55,8 +55,9 @@ const ExploreNavigationItem = ({ href, title }: { href: string; title: string })
       data-active={isActive}
       href={href}
       className={twMerge(
-        "text-sm 2xl:text-lg leading-none px-4 py-4 rounded-lg 2xl:px-6 2xl:py-6 2xl:rounded-xl hover:bg-orange-custom-800 hover:text-orange-custom-100 transition-all",
-        isActive ? "bg-orange-custom-800 text-orange-custom-100 font-semibold" : ""
+        `text-sm 2xl:text-lg leading-none px-4 py-4 rounded-lg 2xl:px-6 2xl:py-6 2xl:rounded-xl hover:bg-orange-custom-800  hover:text-orange-custom-100
+        transition-all dark:hover:bg-brown-custom-100 `,
+        isActive ? "bg-orange-custom-800 text-orange-custom-100 font-semibold dark:bg-brown-custom-100" : ""
       )}
     >
       {title}

src/components/explore/GroupedTranscriptContent.tsx

@@ -21,7 +21,7 @@ const GroupedTranscriptContent = ({
     inView: boolean,
     entry: IntersectionObserverEntry
   ) => {
-  
+
     if (inView) {
       setCurrentGroup(topicsByAlphabet[0]);
     }
@@ -37,7 +37,7 @@ const GroupedTranscriptContent = ({
       id={topicsByAlphabet[0].toLowerCase()}
       className="flex flex-col gap-7 "
     >
-      <h4 className="font-bold text-2xl capitalize">{topicsByAlphabet[0]}</h4>
+      <h4 className="font-bold text-2xl capitalize dark:text-gray-custom-100">{topicsByAlphabet[0]}</h4>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
         {topicsByAlphabet[1].map((topics, i) => (
           <SingleTranscriptContent
@@ -54,7 +54,7 @@ const GroupedTranscriptContent = ({
       id={createSlug(topicsByAlphabet[0])}
       className="flex flex-col gap-7"
     >
-      <h4 className="font-bold text-2xl capitalize">{topicsByAlphabet[0]}</h4>
+      <h4 className="font-bold text-2xl capitalize dark:text-gray-custom-100">{topicsByAlphabet[0]}</h4>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
         {topicsByAlphabet[1] &&
         topicsByAlphabet[1].map((data, i) => (
@@ -70,4 +70,4 @@ const GroupedTranscriptContent = ({
   );
 };
 
-export default GroupedTranscriptContent;
+export default GroupedTranscriptContent;

src/components/explore/SingleTranscriptContent.tsx

@@ -11,10 +11,10 @@ const SingleTranscriptContent = ({ count, slug, name, linkName }: SingleContent)
   return (
     <Link
       href={url}
-      className='flex capitalize cursor-pointer border max-w-[100%]  border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
+      className='flex capitalize cursor-pointer border max-w-[100%]  border-gray-custom-1200 dark:border-gray-custom-1800 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
     >
-      <span className='text-wrap break-words max-w-[80%]'>{name}</span>
-      <span className='font-normal font-basis-mono'>{getDoubleDigits(count)}</span>
+      <span className='text-wrap break-words max-w-[80%] dark:text-gray-custom-100'>{name}</span>
+      <span className='font-normal font-basis-mono dark:text-gray-custom-100'>{getDoubleDigits(count)}</span>
     </Link>
   );
 };

src/components/explore/SourcesBreadCrumbs.tsx

@@ -73,13 +73,13 @@ export const SourcesBreadCrumbs = ({ slugPaths, current }: { slugPaths: string[]
         <div key={link.name} className='flex gap-1 items-center'>
           <Link
             className={`capitalize hover:underline font-medium text-sm 2xl:text-base text-nowrap ${
-              isActive.name.toLowerCase() === link.name.toLowerCase() ? "text-orange-custom-100" : "text-black md:text-gray-custom-800"
+              isActive.name.toLowerCase() === link.name.toLowerCase() ? "text-orange-custom-100" : "text-black md:text-gray-custom-800 dark:text-gray-custom-600"
             }`}
             href={link.link}
           >
             {link.name}
           </Link>
-          {i !== allRoutes.length - 1 && <p className='text-custom-black-custom-200'>/</p>}
+          {i !== allRoutes.length - 1 && <p className='text-custom-black-custom-200 dark:text-gray-custom-600'>/</p>}
         </div>
       ))}
     </div>

src/components/explore/TranscriptContentPage.tsx

@@ -78,11 +78,11 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({
             />
           )}
         </div>
-        <div className="flex flex-col border-b border-b-[#9B9B9B] pb-6 lg:pb-10  gap-6 ">
+        <div className="flex flex-col border-b border-b-gray-custom-1900  dark:border-b-gray-custom-1800 pb-6 lg:pb-10  gap-6 ">
           <BaseCrumbLists crumbsArray={allRoutes} />
           <div className="flex flex-col gap-1  lg:gap-4">
-            <h3 className="text-xl  2xl:text-2xl font-medium">{header}</h3>
-            <p className="hidden lg:inline-block text-sm  lg:text-base 2xl:text-lg text-custom-black-custom-300">
+            <h3 className="text-xl  2xl:text-2xl font-medium dark:text-gray-custom-100">{header}</h3>
+            <p className="hidden lg:inline-block text-sm  lg:text-base 2xl:text-lg text-custom-black-custom-300 dark:text-gray-custom-100">
               {description}
             </p>
             <p className="inline-block lg:hidden text-sm lg:text-lg text-custom-black-custom-300">

src/components/landing-page/WhyTranscripts.tsx

@@ -96,7 +96,7 @@ const WhyTranscripts = () => {
                 Review Transcripts, Earn Sats
               </Link>
               <button
-                className='text-xl bg-orange-custom-200 border-gray-custom-300 text-orange-custom-400 py-6 rounded-full flex items-center md:w-[85%] whitespace-nowrap justify-center px-32 h-20 max-xl:h-[72px] max-lg:h-16 max-md:h-14 max-lg:w-full max-md:w-full font-semibold text-nowrap max-lg:text-lg max-md:text-base max-lg:px-16 max-md:px-8 cursor-pointer hidden'
+                className='text-xl bg-orange-custom-200 border-gray-custom-300 text-orange-custom-400 py-6 rounded-full items-center md:w-[85%] whitespace-nowrap justify-center px-32 h-20 max-xl:h-[72px] max-lg:h-16 max-md:h-14 max-lg:w-full max-md:w-full font-semibold text-nowrap max-lg:text-lg max-md:text-base max-lg:px-16 max-md:px-8 cursor-pointer hidden'
                 onClick={() => setIsOpen(!isOpen)}
               >
                 Suggest Source for Transcription