[Header/Topics][l]: topics page is now fully themed according to acti…

…ve topic -- refs #105

components/_shared/carousel/card/Carousel.tsx

@@ -25,10 +25,19 @@ interface Item {
 const Carousel: React.FC<{
   items: Item[];
   itemOnClick: (item: any) => any;
-}> = ({ items, itemOnClick }) => {
+  color?: string;
+}> = ({ items, itemOnClick, color }) => {
   const prevEl = '.nav-prev-button';
   const nextEl = '.nav-next-button';
 
+  let css;
+  if(color) {
+    css = `
+    .swiper-bullet-active {
+      background: ${color} !important;
+    }`
+  }
+
   return (
     <>
       <div className="relative">
@@ -86,6 +95,7 @@ const Carousel: React.FC<{
             </SwiperSlide>
           ))}
         </Swiper>
+        <style>{css}</style>
         <div className="pagination text-center" />
       </div>
     </>

components/_shared/image_header/Badge.tsx

@@ -1,7 +1,18 @@
-const Badge: React.FC<{ text: string }> = ({ text }) => {
+const Badge: React.FC<{ text: string; color?: string }> = ({
+  text,
+  color,
+}) => {
+
   return (
     <>
-      <span className="bg-[#80E47E]  px-6  py-2  rounded-full">{text}</span>
+      <span
+        className={`px-6  py-2  rounded-full font-medium ${
+          color ? 'text-white' : ''
+        }`}
+        style={{ backgroundColor: color || '#80E47E' }}
+      >
+        {text}
+      </span>
     </>
   );
 };

components/_shared/image_header/ImageHeader.tsx

@@ -80,7 +80,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                   </p>
                 </div>
                 <div className="pb-[3rem]">
-                  <Badge text={badgeText} />
+                  <Badge text={badgeText} color={color} />
                 </div>
               </div>
             </div>

components/topic/MainOptions.tsx

@@ -152,13 +152,15 @@ const MainOptions: React.FC<any> = ({
   fixTranslations(activeTopic);
   subtopics.forEach((subtopic) => fixTranslations(subtopic));
 
+  const color = configs?.filter((el) => el.name == topic)[0]?.color;
+
   return (
     <>
       <div className="mb-20" id="header">
         <TopicHeader
           topic={activeTopic}
           datasetsCount={activeTopic.package_count}
-          color={configs?.filter((el) => el.name == topic)[0]?.color}
+          color={color}
         />
       </div>
       {subtopics?.length > 0 && (
@@ -167,6 +169,7 @@ const MainOptions: React.FC<any> = ({
           <SubtopicsCarousel
             subtopics={subtopics}
             subtopicOnClick={onSutopicClick}
+            color={color}
           />
         </div>
       )}

components/topic/SubtopicsCarousel.tsx

@@ -1,6 +1,6 @@
 import Carousel from '../_shared/carousel/card/Carousel';
 
-const SubtopicsCarousel: React.FC<any> = ({ subtopics, subtopicOnClick }) => {
+const SubtopicsCarousel: React.FC<any> = ({ subtopics, subtopicOnClick, color }) => {
   const items = subtopics.map((subtopic) => {
     return {
       name: subtopic.name,
@@ -22,7 +22,7 @@ const SubtopicsCarousel: React.FC<any> = ({ subtopics, subtopicOnClick }) => {
 
   return (
     <>
-      <Carousel items={items} itemOnClick={subtopicOnClick} />
+      <Carousel color={color} items={items} itemOnClick={subtopicOnClick} />
     </>
   );
 };