chore(dark-page): added dark pages on explore and indivdualtranscript page

Author: 0tuedon

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

@@ -4,7 +4,6 @@ import Image from "next/image";
 import { notFound } from "next/navigation";
 import { ContentTreeArray } from "@/utils/data";
 import LinkIcon from "/public/svgs/link-icon.svg";
-import WorldIcon from "/public/svgs/world-icon.svg";
 import allSources from "@/public/sources-data.json";
 import { constructSlugPaths, deriveSourcesList, fetchTranscriptDetails, loopArrOrObject } from "@/utils";
 import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
@@ -13,6 +12,7 @@ import TranscriptDetailsCard from "@/components/common/TranscriptDetailsCard";
 import { SourcesBreadCrumbs } from "@/components/explore/SourcesBreadCrumbs";
 import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
 import { LanguageCodes } from "@/config";
+import WorldIcon from "@/components/svgs/WorldIcon";
 
 // forces 404 for paths not generated from `generateStaticParams` function.
 export const dynamicParams = false;
@@ -106,11 +106,11 @@ const page = ({ params }: { params: { slug: string[] } }) => {
               <h3 className='text-xl 2xl:text-2xl font-medium pt-6 md:pt-3'>{metadata?.title ?? slug[slug.length - 1]}</h3>
               {isRoot && metadata?.website ? (
                 <div className='flex gap-1 items-center pt-3 md:pt-6'>
-                  <Image src={WorldIcon} alt='world icon' className='w-[18px] md:w-[20px]' />
+                  <WorldIcon className='w-[18px] md:w-[20px] dark:text-gray-custom-100' />
                   <Link
                     href={metadata?.website ?? ""}
                     target='_blank'
-                    className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black underline text-wrap break-words line-clamp-1'
+                    className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black dark:text-gray-custom-100 underline text-wrap break-words line-clamp-1'
                   >
                     {metadata.website ?? ""}
                   </Link>

src/app/about/page.tsx

@@ -8,6 +8,7 @@ import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
 import reviewers from "@/public/reviewers-data.json";
 import upperLineIcon from "@/public/svgs/upper-line-icon.svg";
 import lowerLineIcon from "@/public/svgs/lower-line-icon.svg";
+import CustomBorder from "@/components/svgs/CustomBorder";
 
 const page = () => {
   return (
@@ -59,6 +60,11 @@ const page = () => {
           </div>
 
           <div className='flex flex-col gap-10 md:gap-20 relative'>
+            <div
+            className="flex w-full max-w-24 md:max-w-[184px] z-[-1] h-full justify-center absolute">
+              <CustomBorder className='h-full' />
+            </div>
+
             {processFlowData.map((item) => (
               <div key={item.title} className='flex flex-row items-center gap-4 sm:gap-[31px]'>
                 <section

src/components/common/BaseCrumbLists.tsx

@@ -15,14 +15,14 @@ const BaseCrumbLists = ({crumbsArray}:{crumbsArray:BaseCrumbType[]}) => {
             className={`capitalize hover:underline font-medium text-sm 2xl:text-base ${
               link.isActive
                 ? "text-orange-custom-100"
-                : "text-black md:text-gray-custom-800"
+                : "text-black md:text-gray-custom-800 dark:text-gray-custom-800"
             }`}
             href={link.link}
           >
             {link.name}
           </Link>
           {i !== crumbsArray.length - 1 && (
-            <p className="text-custom-black-custom-200">/</p>
+            <p className="text-custom-black-custom-200 dark:text-gray-custom-800">/</p>
           )}
         </div>
       ))}

src/components/common/Tabs.tsx

@@ -27,7 +27,8 @@ const Tabs = ({
 
   return (
     <div className="flex flex-col relative">
-      <div className="sticky bg-white z-10 top-0 lg:top-0  md:pt-6 h-full flex gap-4 md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200">
+      <div className="sticky bg-white dark:bg-dark-custom-100 z-10 top-0 lg:top-0  md:pt-6 h-full flex gap-4
+        md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200 dark:border-b-gray-custom-1800">
         <Tab
           title="Transcript"
           isOpen={openTabs === "transcript"}
@@ -116,7 +117,7 @@ const Tab = ({
       <section className="flex flex-col h-full items-center justify-between relative w-full">
         <p
           className={`text-sm md:text-base xl:text-lg 2xl:text-xl font-normal ${
-            isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400"
+            isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400 dark:text-gray-custom-100"
           }`}
         >
           {title}

src/components/common/TranscriptMetadataCard.tsx

@@ -11,8 +11,6 @@ import { createSlug, FieldCountItem } from "@/utils";
 import AiGeneratedIcon from "../svgs/AIGeneratedIcon";
 import { format, isDate } from "date-fns";
 import Pill from "./Pill";
-import { getIsolatedFacetLink } from "@/service/URLManager/helper";
-
 interface ITranscriptMetadataComponent {
   title: string;
   date: string | Date;
@@ -34,43 +32,37 @@ const TranscriptMetadataComponent = ({
     setShowDetail((prev) => !prev);
   };
 
+  
   const convertedDate  = date ? new Date(date) : false
 
-  const formattedDate = isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
+  const formattedDate =   isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
+
 
   return (
-    <div className="border flex text-black flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200">
+    <div className="border flex text-black dark:text-gray-custom-100 flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200 dark:border-gray-custom-1800">
       <div className="flex flex-col md:flex-row flex-wrap gap-4 justify-between ">
         <h4 className="text-orange-custom-100 text-xl font-bold md:text-2xl 2xl:text-[2rem]">
           {title}
         </h4>
         <button
           onClick={handleShowDetail}
-          className="text-black text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border  w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap"
+          className="text-black dark:text-gray-custom-100
+          text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border
+          w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap"
         >
           {showDetail ? (
             <>
-              <Image
-                src="/svgs/eye-close-icon.svg"
-                alt="eye close icon"
-                width={24}
-                height={24}
-                className="w-5"
-              />
+              <EyeClose className="w-5 dark:text-gray-custom-100" />
               <span className="font-medium text-sm 2xl:text-base">
                 Hide Details{" "}
               </span>
             </>
           ) : (
             <>
-              <Image
-                src="/svgs/eye-open-icon.svg"
-                alt="eye open icon"
-                width={24}
-                height={24}
-                className="w-5"
-              />
-              <span className="font-medium">Show Details</span>
+              <EyeOpen className="w-5 dark:text-gray-custom-100" />
+              <span className="font-medium text-sm 2xl:text-base">
+                Show Details
+              </span>
             </>
           )}
         </button>
@@ -81,7 +73,7 @@ const TranscriptMetadataComponent = ({
           <MetadataBlock
             header={
               <>
-                <CalendarIcon width={"19px"} color="#141B34" />
+                <CalendarIcon width={"19px"} />
                 <p className="text-base lg:text-lg font-semibold">Date</p>
               </>
             }
@@ -100,13 +92,13 @@ const TranscriptMetadataComponent = ({
           <MetadataBlock
             header={
               <>
-                <BookmarkIcon width={"19px"} color="#000000" />
+                <BookmarkIcon width={"19px"} />
                 <p className="text-base lg:text-lg font-semibold">Topics</p>
               </>
             }
             footer={
               <div className="flex flex-wrap gap-2">
-                {(topics && topics.length > 0) ?
+                {topics && topics.length > 0 ? (
                   topics.map((topic) => (
                     <Pill key={topic.slug} kind="link" name={topic.name} slug={getIsolatedFacetLink({filter_field: "tags", filter_value: topic.slug})} />
                   )):
@@ -119,13 +111,13 @@ const TranscriptMetadataComponent = ({
           <MetadataBlock
             header={
               <>
-                <MicIcon width={"19px"} color="#000000" />
+                <MicIcon width={"19px"} />
                 <p className="text-base lg:text-lg font-semibold">Speakers</p>
               </>
             }
             footer={
               <div className="flex flex-wrap gap-2">
-                {speakers && speakers.length > 0 ?
+                {speakers && speakers.length > 0 ? (
                   speakers.map((speaker) => (
                     <Pill key={speaker} kind="link" name={speaker} slug={getIsolatedFacetLink({filter_field: "authors", filter_value: speaker})} />
                   )):
@@ -138,13 +130,7 @@ const TranscriptMetadataComponent = ({
           <MetadataBlock
             header={
               <>
-                <Image
-                  src="/svgs/pencil-icon.svg"
-                  alt="pencil icon"
-                  width={24}
-                  height={24}
-                  className="w-5"
-                />
+                <PencilIcon className="w-5 dark:text-gray-custom-100" />
                 <p className="text-base  lg:text-lg font-semibold">
                   Transcript by
                 </p>

src/components/individual-transcript/IndividualTranscript.tsx

@@ -26,7 +26,7 @@ const IndividualTranscript = ({
   ];
   const finalRoutes = [...staticRoutes, ...breadCrumbs];
   return (
-    <Wrapper className="relative flex flex-col !px-0 gap-6 lg:gap-7 2xl:gap-10 mx-auto h-[calc(100svh-var(--header-height)-10px)] w-full overflow-y-auto scroll-smooth">
+    <Wrapper className="relative flex flex-col !px-0 gap-6 lg:gap-7 dark:bg-dark-custom-100 2xl:gap-10 mx-auto h-[calc(100vh-var(--header-height))] w-full overflow-y-auto scroll-smooth">
       <div className="py-4 lg:pt-7 2xl:pt-10 px-4 lg:px-10 2xl:px-[60px]">
         <BaseCrumbLists crumbsArray={finalRoutes} />
       </div>

src/components/individual-transcript/TranscriptTabContent.tsx

@@ -11,7 +11,7 @@ function formatSpeakerText(text: string): string {
   // Replace matched text with formatted HTML
   return text.replace(pattern, (match, speaker, time) => {
     // HTML for the speaker's name
-    const formattedSpeaker = `<span className="font-bold text-black text-base leading-[1.36rem]">${speaker}:</span>`;
+    const formattedSpeaker = `<span className="font-bold text-black dark:text-gray-custom-100 text-base leading-[1.36rem]">${speaker}:</span>`;
     // HTML for the timestamp
     const formattedTime = `<span className="text-gray-custom-1700 font-bold text-base leading-[1.36rem]">${time}</span>`;
 

src/components/individual-transcript/markdown.css

@@ -17,14 +17,15 @@
     font-size: 1.125rem;
 }
 
-.wmde-markdown h3,
-.wmde-markdown h4,
-.wmde-markdown h5,
-.wmde-markdown h6 {
+.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
     color: #000;
     scroll-margin-top: 100px;
     font-size: 1rem;
 }
+html.dark  .wmde-markdown h1, .wmde-markdown h2, .wmde-markdown h3, .wmde-markdown h4,
+.wmde-markdown h5, .wmde-markdown h6 {
+     color: #fafafa;
+}
 
 span.code-line {
     white-space: pre-wrap;
@@ -45,11 +46,21 @@ span.code-line {
     line-height: 2.1875rem;
 }
 
+html.dark .wmde-markdown p {
+    color: #fafafa;
+}
 .wmde-markdown ul li {
     list-style-type: circle;
     color: #000;
 }
 
+html.dark .wmde-markdown ul li {
+    color: #fafafa;
+}
+
+html.dark .wmde-markdown ol li {
+    color: #fafafa;
+}
 .wmde-markdown ul {
     padding-left: 1em;
 }

src/components/landing-page/TranscriptCard.tsx

@@ -48,7 +48,8 @@ const TranscriptCard = ({ data, daysOpened, transcripts, source }: TranscriptCar
                   ))}
 
                   {remainingSpeakers === 0 ? null : (
-                    <p className='py-[4.11px] px-[16.43px] rounded-[5.13px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 max-md:py-[2px] max-xl:text-[13px] max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
+                    <p className='py-[4.11px] px-[16.43px] rounded-[5.13px] bg-gray-custom-700 dark:bg-gray-custom-1800  dark:text-gray-custom-100
+                      whitespace-nowrap text-nowrap max-md:px-3 max-md:py-[2px] max-xl:text-[13px] max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
                       + {remainingSpeakers} more
                     </p>
                   )}

src/components/layout/Header.tsx

@@ -3,7 +3,6 @@
 import React, { useState, useRef, useEffect, Suspense } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import MenuIcon from "/public/svgs/menu.svg";
 import MobileMenu from "../landing-page/MobileMenu";
 import { MenuApp, menuApps } from "@/utils/data";
 import { AppsIcon, ArrowRight, CloseIconOutlined, DayIcon, NightIcon } from "@bitcoin-dev-project/bdp-ui/icons";
@@ -72,27 +71,30 @@ export const LanguageSwitcher = () => {
 };
 
 export const AppItem = ({ href, image, alt, title }: MenuApp) => (
+  <div className="py-1 first-of-type:pt-4  md:py-2 px-4 md:px-5 first-of-type:md:pt-6 last-of-type:pb-4 last-of-type:md:pb-6">
   <Link
     href={href}
-    className="py-2 md:py-3 px-5 md:px-8 gap-3 md:gap-6 flex items-center hover:bg-orange-custom-600 first-of-type:pt-4 first-of-type:md:pt-6 last-of-type:pb-4 last-of-type:md:pb-6"
+    className=" py-2  hover:px-2 hover:md:px-3 gap-3 md:gap-6 flex items-center rounded-xl
+    hover:bg-orange-custom-600 dark:hover:bg-brown-custom-100 transition-all duration-200"
     target="_blank"
     rel="noopener noreferrer"
   >
     <Image
       className={`rounded-xl w-11 h-11 lg:w-16 lg:h-16 ${
         alt === "Bitcoin search" || alt === "Bitcoin TLDR"
-          ? "border-[1.5px] border-gray-custom-600"
+          ? "border-[1.5px] border-gray-custom-600 dark:border-gray-custom-1800"
           : ""
       }`}
       src={image}
       alt={alt}
       width={88}
       height={88}
     />
-    <p className="text-xs md:text-sm xl:text-base 2xl:text-lg text-left ">
+    <p className="text-xs md:text-sm xl:text-base 2xl:text-lg text-left dark:text-gray-custom-100">
       {title}
     </p>
   </Link>
+  </div>
 );
 
 export function AppMenu() {
@@ -155,10 +157,10 @@ const MenuSwitcher = () => {
           className="hidden data-[is-open=true]:block absolute top-0 right-0 mt-3 md:mt-4"
         >
           <div
-            className={`bg-white rounded-2xl border border-gray-custom-600 w-[min(90vw,300px)] md:w-[402px] max-h-[calc(100vh-70px)] md:max-h-[calc(100vh-100px)] overflow-auto`}
+            className={`bg-white dark:bg-dark-custom-100 rounded-2xl border border-gray-custom-600 w-[min(90vw,300px)] md:w-[402px] max-h-[calc(100vh-70px)] md:max-h-[calc(100vh-100px)] overflow-auto`}
           >
             <AppItem {...menuApps[0]} />
-            <div className="mx-5 md:mx-7 my-3 md:my-3 border border-gray-custom-300"></div>
+            <div className="mx-5 md:mx-7 my-3 md:my-3 border border-gray-custom-300 dark:border-b-gray-custom-1800"></div>
             {menuApps.slice(1).map((item) => (
               <AppItem key={item.title} {...item} />
             ))}

src/components/svgs/CustomBorder.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const CustomBorder = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={1}
+    height={"100%"}
+    // viewBox="0 0 1 1359"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <line x1={0.5} x2={0.5} y2={"100%"} stroke="#616161" strokeDasharray="8 8" />
+  </svg>
+);
+export default CustomBorder;

src/components/svgs/EyeClose.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const EyeClose = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={20}
+    height={21}
+    viewBox="0 0 20 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M18.3346 7.16669C18.3346 7.16669 15.0013 12.1667 10.0013 12.1667C5.0013 12.1667 1.66797 7.16669 1.66797 7.16669"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+    />
+    <path
+      d="M12.5 11.75L13.75 13.8333"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.668 9.66669L18.3346 11.3334"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1.66797 11.3334L3.33464 9.66669"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.5 11.75L6.25 13.8333"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default EyeClose;