From ad6d0fd373914c6067406fc8382d8b08d943cc97 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 13 Apr 2025 17:04:31 -0500
Subject: [PATCH] styling improvements on course header and course tab

---
 .../content/courses/CourseDetails.js          |  2 +-
 .../content/courses/CourseHeader.js           | 47 ++++---------------
 src/components/menutab/MenuTab.js             |  1 +
 src/pages/course/[slug]/index.js              | 26 +++++++---
 4 files changed, 29 insertions(+), 47 deletions(-)

diff --git a/src/components/content/courses/CourseDetails.js b/src/components/content/courses/CourseDetails.js
index bf8da54..7d29ff0 100644
--- a/src/components/content/courses/CourseDetails.js
+++ b/src/components/content/courses/CourseDetails.js
@@ -202,7 +202,7 @@ export default function CourseDetails({
   }
 
   return (
-    <div className="w-full">
+    <div className="w-full bg-gray-800 p-4 rounded-lg">
       <Toast ref={toastRef} />
       <WelcomeModal />
       
diff --git a/src/components/content/courses/CourseHeader.js b/src/components/content/courses/CourseHeader.js
index d05c362..c841b5e 100644
--- a/src/components/content/courses/CourseHeader.js
+++ b/src/components/content/courses/CourseHeader.js
@@ -1,14 +1,11 @@
 import React from 'react';
-import { Tag } from 'primereact/tag';
 import { useRouter } from 'next/router';
 import GenericButton from '@/components/buttons/GenericButton';
-import Image from 'next/image';
 import 'primeicons/primeicons.css';
 
 const CourseHeader = ({ 
   course, 
   isMobileView, 
-  isCompleted, 
   navbarHeight,
   isNavbarMode = false 
 }) => {
@@ -42,30 +39,16 @@ const CourseHeader = ({
             e.stopPropagation();
             router.push('/');
           }}
-          className="mr-2 pl-0 p-button-rounded p-button-text text-gray-300 hover:text-white"
+          className="mr-2 p-button-rounded p-button-text text-gray-300 hover:text-white"
           rounded={true}
           text={true}
           aria-label="Go back to home"
         />
         
-        {course.image && (
-          <div className="relative h-8 w-8 mr-3 rounded-md overflow-hidden flex-shrink-0 border border-gray-700/50">
-            <img
-              src={course.image}
-              alt={course.name}
-              className="object-cover w-full h-full"
-            />
-          </div>
-        )}
-        
-        <div className="flex items-center">
-          <h1 className={`text-white font-semibold truncate ${isMobileView ? 'text-base max-w-[120px]' : 'text-lg max-w-[240px]'}`}>
+        <div className="flex items-center pb-1">
+          <h2 className={`text-white font-semibold truncate ${isMobileView ? 'text-base max-w-[160px]' : 'text-lg max-w-[300px]'}`}>
             {course.name}
-          </h1>
-          
-          {isCompleted && !isMobileView && (
-            <Tag severity="success" value="Completed" size="small" className="ml-2 py-0.5 text-xs" />
-          )}
+          </h2>
         </div>
       </div>
     );
@@ -74,10 +57,10 @@ const CourseHeader = ({
   // Standard mode - for course page content
   return (
     <div 
-      className="bg-transparent backdrop-blur-sm mb-0 p-3 px-4 sticky z-20 flex items-center justify-between"
+      className="bg-transparent backdrop-blur-sm mb-0 p-3 px-4 sticky z-20 flex items-center"
       style={{ top: `${navbarHeight}px` }}
     >
-      <div className="flex items-center max-w-[80%]">
+      <div className="flex items-center max-w-[90%]">
         <GenericButton
           icon="pi pi-arrow-left"
           onClick={handleBackNavigation}
@@ -88,23 +71,9 @@ const CourseHeader = ({
           text={true}
           aria-label="Go back"
         />
-        {!isMobileView && course.image && (
-          <div className="relative w-8 h-8 mr-3 rounded-md overflow-hidden flex-shrink-0 border border-gray-700/50">
-            <img
-              src={course.image}
-              alt={course.name}
-              className="object-cover w-full h-full"
-            />
-          </div>
-        )}
-        <h1 className={`font-medium text-gray-100 ${isMobileView ? 'text-sm' : 'text-base'} truncate`}>
+        <h2 className={`font-medium text-gray-100 ${isMobileView ? 'text-sm' : 'text-base'} truncate`}>
           {course.name}
-        </h1>
-      </div>
-      <div className="flex items-center">
-        {isCompleted && (
-          <Tag severity="success" value="Completed" size="small" className="ml-2 py-1 text-xs" />
-        )}
+        </h2>
       </div>
     </div>
   );
diff --git a/src/components/menutab/MenuTab.js b/src/components/menutab/MenuTab.js
index 1e6f7dd..5d7527e 100644
--- a/src/components/menutab/MenuTab.js
+++ b/src/components/menutab/MenuTab.js
@@ -42,6 +42,7 @@ export default function MenuTab({ items, activeIndex, onTabChange, sidebarVisibl
             tooltip={sidebarVisible ? "Hide lessons" : "Show lessons"}
             tooltipOptions={{ position: 'bottom' }}
             aria-label="Toggle course lessons"
+            size="small"
           />
         </div>
       )}
diff --git a/src/pages/course/[slug]/index.js b/src/pages/course/[slug]/index.js
index e960754..931e858 100644
--- a/src/pages/course/[slug]/index.js
+++ b/src/pages/course/[slug]/index.js
@@ -348,13 +348,25 @@ const Course = () => {
   // Render the QA section (empty for now)
   const renderQASection = () => {
     return (
-      <div className="rounded-lg border p-8 mt-4">
+      <div className="rounded-lg p-8 mt-4 bg-gray-800">
         <h2 className="text-xl font-bold mb-4">Comments</h2>
-        <ZapThreadsWrapper
-          anchor={course?.d}
-          user={session?.user?.pubkey ? nip19.npubEncode(session?.user?.pubkey) : null}
-          relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
-        />
+        {nAddress !== null ? (
+          <ZapThreadsWrapper
+            anchor={nAddress}
+            user={session?.user?.pubkey ? nip19.npubEncode(session?.user?.pubkey) : null}
+            relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
+            disable="zaps"
+          />
+        ) : course?.d ? (
+          <ZapThreadsWrapper
+            anchor={course.d}
+            user={session?.user?.pubkey ? nip19.npubEncode(session?.user?.pubkey) : null}
+            relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
+            disable="zaps"
+          />
+        ) : (
+          <p>Loading comments...</p>
+        )}
       </div>
     );
   };
@@ -364,7 +376,7 @@ const Course = () => {
     const isCompleted = completedLessons.length > 0;
     
     return (
-      <div className={`bg-gray-900 rounded-lg border border-gray-800 shadow-md ${isMobileView ? 'p-4' : 'p-6'}`}>
+      <div className={`bg-gray-800 rounded-lg border border-gray-800 shadow-md ${isMobileView ? 'p-4' : 'p-6'}`}>
         {isMobileView && course && (
           <div className="mb-2">
             {/* Completed tag above image in mobile view */}