From 2e2d32910af832f2e9c28a30cc2ad45d16f804ce Mon Sep 17 00:00:00 2001
From: 0tuedon <90271995+0tuedon@users.noreply.github.com>
Date: Thu, 12 Dec 2024 23:32:20 +0300
Subject: [PATCH] fix: issues with nested list showing dark gray

---
 .gitignore                                    |  1 +
 src/components/common/Pill.tsx                |  2 +-
 .../common/TranscriptMetadataCard.tsx         | 12 +++++--
 src/components/explore/ContentGrouping.tsx    |  2 +-
 .../individual-transcript/markdown.css        | 35 ++++++++-----------
 5 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7db8e0f..d73d556 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,7 @@
 /public/topics-by-category-counts.json
 /public/aliases.json
 /public/topics-counts.json
+/public/topics.json
 /public/speaker-data.json
 /public/source-count-data.json
 /public/sources-data.json
diff --git a/src/components/common/Pill.tsx b/src/components/common/Pill.tsx
index 64d3960..b2e2b59 100644
--- a/src/components/common/Pill.tsx
+++ b/src/components/common/Pill.tsx
@@ -5,7 +5,7 @@ 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 first-letter:capitalize 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%]"
     >
       {name}
     </Link>
diff --git a/src/components/common/TranscriptMetadataCard.tsx b/src/components/common/TranscriptMetadataCard.tsx
index b4792e0..d478e5d 100644
--- a/src/components/common/TranscriptMetadataCard.tsx
+++ b/src/components/common/TranscriptMetadataCard.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState } from "react";
 import Image from "next/image";
+import allTopics from "@/public/topics-counts.json"
 import {
   BookmarkIcon,
   CalendarIcon,
@@ -38,6 +39,11 @@ const TranscriptMetadataComponent = ({
  
   const formattedDate =   isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
 
+  const topicsWithTitles =  topics.map(topic => {
+    const currentTopic =  allTopics.find( topicData => topicData.slug === topic );
+    return currentTopic;
+  } )
+
   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="flex flex-col md:flex-row flex-wrap gap-4 justify-between ">
@@ -106,9 +112,9 @@ const TranscriptMetadataComponent = ({
             }
             footer={
               <div className="flex flex-wrap gap-2">
-                {(topics && topics.length > 0) ?
-                  topics.map((topic) => (
-                    <Pill key={topic} name={topic} slug={`/tags/${createSlug(topic)}`} />
+                {(topicsWithTitles && topicsWithTitles.length > 0) ?
+                  topicsWithTitles.map((topic) => (
+                    <Pill key={topic?.slug} name={topic?.name || ""} slug={`/tags/${createSlug(topic?.slug || "")}`} />
                   )):
                   <p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
                 }
diff --git a/src/components/explore/ContentGrouping.tsx b/src/components/explore/ContentGrouping.tsx
index 85bcce9..642075f 100644
--- a/src/components/explore/ContentGrouping.tsx
+++ b/src/components/explore/ContentGrouping.tsx
@@ -40,7 +40,7 @@ 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 px-5 pt-5 pb-1 hidden lg:flex gap-2.5 border max-h-[calc(90vh-var(--header-height))] overflow-auto scroller border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
             className
           )}
         >
diff --git a/src/components/individual-transcript/markdown.css b/src/components/individual-transcript/markdown.css
index a780363..cc8c4db 100644
--- a/src/components/individual-transcript/markdown.css
+++ b/src/components/individual-transcript/markdown.css
@@ -33,7 +33,6 @@ span.code-line {
 }
 
 .wmde-markdown p {
-
     margin-bottom: 8px;
     color: #000;
     font-size: 0.875rem;
@@ -41,6 +40,20 @@ span.code-line {
     line-height: 2.1875rem;
 }
 
+.wmde-markdown ul li {
+    list-style-type: circle;
+    color: #000;
+}
+
+.wmde-markdown ul {
+    padding-left: 1em;
+}
+
+.wmde-markdown ol {
+    margin: 0px !important;
+    font-weight: 400;
+}
+
 .wmde-markdown a.anchor {
     display: none !important;
 }
@@ -48,9 +61,6 @@ span.code-line {
 @media (min-width: 1024px) {
 
     .wmde-markdown h1, .wmde-markdown h2 {
-        /* margin: 0px !important; */
-        scroll-margin-top: 100px;
-        color: #000;
         padding-top: 10px;
         padding-bottom: 10px;
         margin: 12px 0px !important;
@@ -63,26 +73,16 @@ span.code-line {
     }
 
     .wmde-markdown p {
-        margin: 0px !important;
-        color: #000;
         font-weight: 400;
         font-size: 1rem;
         line-height: 2.1875rem;
     }
     .wmde-markdown ul,.wmde-markdown ol {
         margin: 0px !important;
-        color: #000;
         font-weight: 400;
         font-size: 1rem;
         line-height: 2.1875rem;
     }
-    .wmde-markdown ul, .wmde-markdown li {
-        list-style-type: circle;
-    }
-
-    .wmde-markdown a.anchor {
-        display: none !important;
-    }
 }
 
 @media (min-width: 1536px) {
@@ -93,17 +93,10 @@ span.code-line {
     }
 
     .wmde-markdown h3,.wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
-        color: #000;
         font-size: 1rem;
     }
 
     .wmde-markdown p {
-        margin: 0px !important;
-        color: #000;
         line-height: 2rem;
     }
-
-    .wmde-markdown a.anchor {
-        display: none !important;
-    }
 }
\ No newline at end of file