From 3fcf92c7f5826ccb123801026f0333aa88a3758a Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 7 Apr 2025 12:51:13 +0100
Subject: [PATCH] UI changes for TW4

---
 src/components/ChangelogImages.tsx                    | 8 ++++----
 src/components/GenerateCourse/AICourseContent.tsx     | 2 +-
 src/components/GenerateRoadmap/RoadmapTopicDetail.tsx | 2 +-
 src/components/PageProgress.tsx                       | 2 +-
 src/components/SQLCourse/ChapterRow.tsx               | 4 ++--
 src/components/SQLCourse/CourseFeature.tsx            | 4 ++--
 src/components/TopicDetail/TopicDetail.tsx            | 4 ++--
 src/styles/global.css                                 | 4 ++++
 8 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/ChangelogImages.tsx b/src/components/ChangelogImages.tsx
index 269694466..6166aac73 100644
--- a/src/components/ChangelogImages.tsx
+++ b/src/components/ChangelogImages.tsx
@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight, MoveRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React, { useState, useEffect, useCallback } from 'react';
 
 interface ChangelogImagesProps {
@@ -73,7 +73,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
       </div>
       {enlargedImage && (
         <div
-          className="fixed inset-0 z-999 flex items-center justify-center bg-black bg-opacity-75"
+          className="fixed inset-0 z-999 flex items-center justify-center bg-black/75"
           onClick={handleCloseEnlarged}
         >
           <img
@@ -82,7 +82,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
             className="max-h-[90%] max-w-[90%] rounded-xl object-contain"
           />
           <button
-            className="absolute left-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white hover:bg-opacity-100 bg-opacity-50 p-2"
+            className="absolute left-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white/50 hover:bg-white/100 p-2"
             onClick={(e) => {
               e.stopPropagation();
               handleNavigation('prev');
@@ -91,7 +91,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
             <ChevronLeft size={24} />
           </button>
           <button
-            className="absolute right-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white hover:bg-opacity-100 bg-opacity-50 p-2"
+            className="absolute right-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white/50 hover:bg-white/100 p-2"
             onClick={(e) => {
               e.stopPropagation();
               handleNavigation('next');
diff --git a/src/components/GenerateCourse/AICourseContent.tsx b/src/components/GenerateCourse/AICourseContent.tsx
index 5e5f46b5f..e0364fe33 100644
--- a/src/components/GenerateCourse/AICourseContent.tsx
+++ b/src/components/GenerateCourse/AICourseContent.tsx
@@ -475,7 +475,7 @@ export function AICourseContent(props: AICourseContentProps) {
 
       {sidebarOpen && (
         <div
-          className="fixed inset-0 z-10 bg-gray-900 bg-opacity-50 lg:hidden"
+          className="fixed inset-0 z-10 bg-gray-900/50 lg:hidden"
           onClick={() => setSidebarOpen(false)}
         ></div>
       )}
diff --git a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
index 652627ad4..bffe8c9a5 100644
--- a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
+++ b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
@@ -246,7 +246,7 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) {
           </>
         )}
       </div>
-      <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
+      <div className="fixed inset-0 z-30 bg-gray-900/50"></div>
     </div>
   );
 }
diff --git a/src/components/PageProgress.tsx b/src/components/PageProgress.tsx
index 85f336e5a..8f16b10ac 100644
--- a/src/components/PageProgress.tsx
+++ b/src/components/PageProgress.tsx
@@ -28,7 +28,7 @@ export function PageProgress(props: Props) {
   return (
     <div>
       {/* Tailwind based spinner for full page */}
-      <div className="fixed left-0 top-0 z-100 flex h-full w-full items-center justify-center bg-white bg-opacity-75">
+      <div className="fixed left-0 top-0 z-100 flex h-full w-full items-center justify-center bg-white/75">
         <div className="flex  items-center justify-center rounded-md border bg-white px-4 py-2 ">
           <Spinner
             className="h-4 w-4 sm:h-4 sm:w-4"
diff --git a/src/components/SQLCourse/ChapterRow.tsx b/src/components/SQLCourse/ChapterRow.tsx
index 0a1fe251e..971f18885 100644
--- a/src/components/SQLCourse/ChapterRow.tsx
+++ b/src/components/SQLCourse/ChapterRow.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown, BookIcon, CodeIcon, FileQuestion, MessageCircleQuestionIcon, CircleDot } from 'lucide-react';
+import { ChevronDown, BookIcon, CodeIcon, CircleDot } from 'lucide-react';
 import { cn } from '../../lib/classname';
 import { useEffect, useState } from 'react';
 
@@ -53,7 +53,7 @@ export function ChapterRow(props: ChapterRowProps) {
             'hover:bg-linear-to-br hover:from-zinc-900/95 hover:via-zinc-900/80 hover:to-zinc-900/60',
           !isExpanded &&
             'hover:cursor-pointer hover:shadow-[0_0_30px_rgba(0,0,0,0.2)]',
-          isExpanded && 'rounded-b-none border-b-0',
+          isExpanded && 'cursor-pointer rounded-b-none border-b-0',
         )}
       >
         <div className="flex items-start gap-4">
diff --git a/src/components/SQLCourse/CourseFeature.tsx b/src/components/SQLCourse/CourseFeature.tsx
index d3a5ec715..54d2457cc 100644
--- a/src/components/SQLCourse/CourseFeature.tsx
+++ b/src/components/SQLCourse/CourseFeature.tsx
@@ -34,7 +34,7 @@ export function CourseFeature(props: CourseFeatureProps) {
             setIsZoomed(false);
             setIsExpanded(false);
           }}
-          className="fixed inset-0 z-999 flex cursor-zoom-out items-center justify-center bg-black bg-opacity-75"
+          className="fixed inset-0 z-999 flex cursor-zoom-out items-center justify-center bg-black/75"
         >
           <img
             src={imgUrl}
@@ -56,7 +56,7 @@ export function CourseFeature(props: CourseFeatureProps) {
         <button
           onClick={() => setIsExpanded(!isExpanded)}
           className={cn(
-            'z-20 flex w-full items-center rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 text-left transition-colors duration-200 ease-out hover:bg-zinc-800/40',
+            'z-20 flex w-full cursor-pointer items-center rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 text-left transition-colors duration-200 ease-out hover:bg-zinc-800/40',
             {
               'relative bg-zinc-800 hover:bg-zinc-800': isExpanded,
             },
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index 498d6d930..4483a16c7 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -13,7 +13,7 @@ import {
   renderTopicProgress,
   updateResourceProgress as updateResourceProgressApi,
 } from '../../lib/resource-progress';
-import { pageProgressMessage, sponsorHidden } from '../../stores/page';
+import { pageProgressMessage } from '../../stores/page';
 import { TopicProgressButton } from './TopicProgressButton';
 import { showLoginPopup } from '../../lib/popup';
 import { useToast } from '../../hooks/use-toast';
@@ -623,7 +623,7 @@ export function TopicDetail(props: TopicDetailProps) {
           </>
         )}
       </div>
-      <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
+      <div className="fixed inset-0 z-30 bg-gray-900/50"></div>
     </div>
   );
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index f95c33be2..73079c6e6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -31,6 +31,10 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
+
+  button {
+    @apply cursor-pointer;
+  }
 }
 
 @utility container {