UI changes for TW4

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');

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>
       )}

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>
   );
 }

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"

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">

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,
             },

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>
   );
 }

src/styles/global.css

@@ -31,6 +31,10 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
+
+  button {
+    @apply cursor-pointer;
+  }
 }
 
 @utility container {