github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change background color of editor

Browse Source
pull/8127/head
Kamran Ahmed 6 months ago
parent 8e5adc6295
commit ffb1a795c0
7 changed files with 39 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/Course/CourseLayout.tsx
  2. 4
      src/components/CourseAI/CourseAI.tsx
  3. 2
      src/components/CourseNotes/CourseNotes.tsx
  4. 2
      src/components/Resizable.tsx
  5. 4
      src/components/SqlCodeEditor/SqlCodeEditor.tsx
  6. 50
      src/components/SqlCodeEditor/sql-code-editor-theme.ts
  7. 8
      src/components/SqlCodeEditor/use-sql-editor.ts

10
src/components/Course/CourseLayout.tsx
Unescape View File

@ -142,7 +142,7 @@ export function CourseLayout(props: CourseLayoutProps) {
</div> </div>
{activeChapterId && activeLessonId && ( {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"> <div className="flex items-center gap-2">
<CourseAI <CourseAI
courseId={activeCourseId} courseId={activeCourseId}
@ -159,18 +159,18 @@ export function CourseLayout(props: CourseLayoutProps) {
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<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 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={() => { onClick={() => {
window.location.href = prevLessonLink; window.location.href = prevLessonLink;
}} }}
disabled={!prevLessonLink || completeLesson.isPending} disabled={!prevLessonLink || completeLesson.isPending}
> >
<ChevronLeft className="size-4 stroke-[3]" /> <ChevronLeft className="size-4 stroke-[3]" />
Prev Previous Lesson
</button> </button>
<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={() => { onClick={() => {
const isQuizPending = const isQuizPending =
($currentLesson?.lessonType === 'lesson-quiz' || ($currentLesson?.lessonType === 'lesson-quiz' ||
@ -194,7 +194,7 @@ export function CourseLayout(props: CourseLayoutProps) {
}} }}
disabled={completeLesson.isPending} disabled={completeLesson.isPending}
> >
Next Next Lesson
{completeLesson.isPending ? ( {completeLesson.isPending ? (
<Loader2 className="size-4 animate-spin stroke-[3]" /> <Loader2 className="size-4 animate-spin stroke-[3]" />
) : ( ) : (

4
src/components/CourseAI/CourseAI.tsx
Unescape View File

@ -33,10 +33,10 @@ export function CourseAI(props: CourseAIProps) {
return ( return (
<div className="relative"> <div className="relative">
<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 pl-3 pr-4 py-2 text-sm leading-none disabled:opacity-60 hover:bg-black hover:text-white transition-colors"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >
<Sparkles className="size-4 stroke-[2.5]" /> <Sparkles className="size-4 stroke-[2]" />
Ask AI Ask AI
</button> </button>

2
src/components/CourseNotes/CourseNotes.tsx
Unescape View File

@ -20,7 +20,7 @@ export function CourseNotes(props: CourseNotesProps) {
return ( return (
<div className="relative"> <div className="relative">
<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 pl-3 pr-4 py-2 text-sm leading-none disabled:opacity-60 hover:bg-black hover:text-white transition-colors"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >
<MessageSquareCode className="size-4 stroke-[2.5]" /> <MessageSquareCode className="size-4 stroke-[2.5]" />

2
src/components/Resizable.tsx
Unescape View File

@ -26,7 +26,7 @@ const ResizableHandle = ({
}) => ( }) => (
<ResizablePrimitive.PanelResizeHandle <ResizablePrimitive.PanelResizeHandle
className={cn( 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, className,
)} )}
{...props} {...props}

4
src/components/SqlCodeEditor/SqlCodeEditor.tsx
Unescape View File

@ -127,13 +127,13 @@ export function SqlCodeEditor(props: SqlCodeEditorProps) {
id="editor" id="editor"
ref={editorRef} ref={editorRef}
data-enable-grammarly={false} 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> </div>
<div <div
className={cn( 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', isSubmitted && 'justify-between',
)} )}
> >

50
src/components/SqlCodeEditor/sql-code-editor-theme.ts
Unescape View File

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

8
src/components/SqlCodeEditor/use-sql-editor.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save