Change background color of editor

src/components/Course/CourseLayout.tsx

@@ -142,7 +142,7 @@ export function CourseLayout(props: CourseLayoutProps) {
         </div>
 
         {activeChapterId && activeLessonId && (
-          <footer className="flex items-center justify-between border-t border-zinc-800 px-4">
+          <footer className="flex items-center justify-between border-t px-4">
             <div className="flex items-center gap-2">
               <CourseAI
                 courseId={activeCourseId}
@@ -159,18 +159,18 @@ export function CourseLayout(props: CourseLayoutProps) {
             </div>
             <div className="flex items-center gap-2">
               <button
-                className="flex items-center gap-1 rounded-lg border border-zinc-800 px-2 py-1.5 text-sm leading-none disabled:opacity-60"
+                className="flex items-center gap-1 rounded-lg border border-black pl-3 pr-4 py-2 text-sm leading-none disabled:opacity-60 hover:bg-black hover:text-white transition-colors disabled:pointer-events-none"
                 onClick={() => {
                   window.location.href = prevLessonLink;
                 }}
                 disabled={!prevLessonLink || completeLesson.isPending}
               >
                 <ChevronLeft className="size-4 stroke-[3]" />
-                Prev
+                Previous Lesson
               </button>
 
               <button
-                className="flex items-center gap-1 rounded-lg border border-zinc-800 px-2 py-1.5 text-sm leading-none disabled:opacity-60"
+                className="flex items-center gap-1 rounded-lg border border-black pr-3 pl-4 py-2 text-sm leading-none disabled:opacity-60 hover:bg-black hover:text-white transition-colors"
                 onClick={() => {
                   const isQuizPending =
                     ($currentLesson?.lessonType === 'lesson-quiz' ||
@@ -194,7 +194,7 @@ export function CourseLayout(props: CourseLayoutProps) {
                 }}
                 disabled={completeLesson.isPending}
               >
-                Next
+                Next Lesson
                 {completeLesson.isPending ? (
                   <Loader2 className="size-4 animate-spin stroke-[3]" />
                 ) : (

src/components/CourseAI/CourseAI.tsx

@@ -33,10 +33,10 @@ export function CourseAI(props: CourseAIProps) {
   return (
     <div className="relative">
       <button
-        className="flex items-center gap-1 rounded-lg border border-zinc-800 px-2 py-1.5 text-sm leading-none disabled:opacity-60"
+        className="flex items-center gap-1 rounded-lg border border-black pl-3 pr-4 py-2 text-sm leading-none disabled:opacity-60 hover:bg-black hover:text-white transition-colors"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <Sparkles className="size-4 stroke-[2.5]" />
+        <Sparkles className="size-4 stroke-[2]" />
         Ask AI
       </button>
 

src/components/CourseNotes/CourseNotes.tsx

@@ -20,7 +20,7 @@ export function CourseNotes(props: CourseNotesProps) {
   return (
     <div className="relative">
       <button
-        className="flex items-center gap-1 rounded-lg border border-zinc-800 px-2 py-1.5 text-sm leading-none disabled:opacity-60"
+        className="flex items-center gap-1 rounded-lg border border-black pl-3 pr-4 py-2 text-sm leading-none disabled:opacity-60 hover:bg-black hover:text-white transition-colors"
         onClick={() => setIsOpen(!isOpen)}
       >
         <MessageSquareCode className="size-4 stroke-[2.5]" />

src/components/Resizable.tsx

@@ -26,7 +26,7 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      'focus-visible:ring-ring relative flex w-px items-center justify-center bg-gray-300 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'focus-visible:ring-ring relative flex w-px items-center justify-center bg-gray-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className,
     )}
     {...props}

src/components/SqlCodeEditor/SqlCodeEditor.tsx

@@ -127,13 +127,13 @@ export function SqlCodeEditor(props: SqlCodeEditorProps) {
             id="editor"
             ref={editorRef}
             data-enable-grammarly={false}
-            className="absolute inset-x-0 inset-y-2 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;] [&>div]:h-full"
+            className="absolute inset-x-0 inset-y-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;] [&>div]:h-full"
           ></div>
         </div>
 
         <div
           className={cn(
-            'flex items-center justify-end gap-1 border-t border-zinc-800 p-2',
+            'flex items-center justify-end gap-1 border-t p-2',
             isSubmitted && 'justify-between',
           )}
         >

src/components/SqlCodeEditor/sql-code-editor-theme.ts

@@ -2,7 +2,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { EditorView } from 'codemirror';
 import { tags as t } from '@lezer/highlight';
 
-export const editorDarkTheme = EditorView.theme(
+export const editorLightTheme = EditorView.theme(
   {
     // Styling for the editor background and text
     '&': {},
@@ -14,43 +14,41 @@ export const editorDarkTheme = EditorView.theme(
     '.cm-content': {},
     // Line number styles
     '.cm-lineNumbers .cm-gutterElement': {
-      color: '#757575',
+      color: '#6b7280',
       minWidth: '24px',
     },
     // Scrollbar styles
     '.cm-scroller': {
-      paddingRight: '12px',
-      paddingLeft: '12px',
     },
     '.cm-scroller::-webkit-scrollbar': {},
     // Highlight active line
     '.cm-activeLine': {
-      backgroundColor: '#27272a',
+      backgroundColor: '#f3f4f6',
     },
     // Cursor styles
     '.cm-cursor': {
-      borderColor: '#f4f4f5',
+      borderColor: '#18181b',
     },
     // Code line styling for inserted and deleted lines
     '.code-line.inserted': {
-      backgroundColor: 'rgba(72, 187, 120, 0.2)', // Green background for inserted lines
+      backgroundColor: 'rgba(72, 187, 120, 0.1)', // Lighter green background for inserted lines
     },
     '.code-line.deleted': {
-      backgroundColor: 'rgba(239, 68, 68, 0.1)', // Red background for deleted lines
+      backgroundColor: 'rgba(239, 68, 68, 0.05)', // Lighter red background for deleted lines
     },
     // Highlighted line
     '.highlight-line': {
-      borderLeft: '2px solid #EC4899', // Pink border for highlighted line
-      backgroundColor: 'rgba(229, 231, 235, 0.4)', // Light gray background for highlighted lines
+      borderLeft: '2px solid #EC4899', // Keep pink border for highlighted line
+      backgroundColor: 'rgba(243, 244, 246, 0.6)', // Very light gray background for highlighted lines
     },
     '.cm-gutters': {
-      backgroundColor: '#18181b',
+      backgroundColor: '#f9fafb',
     },
     '.cm-activeLineGutter': {
-      backgroundColor: '#27272a',
+      backgroundColor: '#f3f4f6',
     },
     '.cm-line': {
-      color: '#a1a1aa',
+      color: '#374151',
     },
     '.cm-foldPlaceholder': {
       border: 'none',
@@ -61,20 +59,20 @@ export const editorDarkTheme = EditorView.theme(
     },
   },
   {
-    dark: true,
+    dark: false,
   },
 );
 
-export const editorDarkHightlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: '#3B82F6' },
-  { tag: t.operator, color: '#F59E0B' },
-  { tag: t.variableName, color: '#D946EF' },
-  { tag: t.number, color: '#10B981' },
-  { tag: t.string, color: '#A855F7' },
-  { tag: t.punctuation, color: '#a1a1aa' },
-  { tag: t.typeName, color: '#D946EF' },
-  { tag: t.attributeName, color: '#A855F7' },
-  { tag: t.name, color: '#f4f4f5' },
-  { tag: t.comment, color: '#71717a' },
-  { tag: t.paren, color: '#a1a1aa' },
+export const editorLightHightlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: '#2563eb' },     // Slightly darker blue
+  { tag: t.operator, color: '#d97706' },    // Slightly darker amber
+  { tag: t.variableName, color: '#c026d3' }, // Slightly darker fuchsia
+  { tag: t.number, color: '#059669' },      // Slightly darker emerald
+  { tag: t.string, color: '#7c3aed' },      // Slightly darker violet
+  { tag: t.punctuation, color: '#6b7280' }, // Gray-500
+  { tag: t.typeName, color: '#c026d3' },    // Slightly darker fuchsia
+  { tag: t.attributeName, color: '#7c3aed' }, // Slightly darker violet
+  { tag: t.name, color: '#18181b' },        // Dark gray for better contrast
+  { tag: t.comment, color: '#9ca3af' },     // Gray-400
+  { tag: t.paren, color: '#6b7280' },       // Gray-500
 ]);

src/components/SqlCodeEditor/use-sql-editor.ts

@@ -10,8 +10,8 @@ import {
 } from '@codemirror/commands';
 import { syntaxHighlighting } from '@codemirror/language';
 import {
-  editorDarkHightlightStyle,
-  editorDarkTheme,
+  editorLightHightlightStyle,
+  editorLightTheme,
 } from './sql-code-editor-theme';
 
 const External = Annotation.define<boolean>();
@@ -68,8 +68,8 @@ export function useSqlEditor(props: UseSqlEditorProps) {
         history(),
         keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
         updateListener,
-        editorDarkTheme,
-        syntaxHighlighting(editorDarkHightlightStyle),
+        editorLightTheme,
+        syntaxHighlighting(editorLightHightlightStyle),
         EditorView.contentAttributes.of({
           'data-enable-grammarly': 'false',
         }),