From a3f31e92c13cd13dd89937bea4239f263c4fe773 Mon Sep 17 00:00:00 2001
From: Yared Yemane <yaredyemane1@gmail.com>
Date: Tue, 14 Apr 2026 07:56:37 -0700
Subject: [PATCH] refine lesson creation form styling and soften lesson tab
 contrast

Restyle the lesson creation flow to match the polished practice experience with cleaner step visuals and section layouts, and reduce high-contrast accents in the lessons panel for a calmer UI.

Made-with: Cursor
---
 .../content-management/AddNewLessonPage.tsx   | 62 +++++++++++++------
 .../content-management/HumanLanguagePage.tsx  | 14 ++---
 2 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/src/pages/content-management/AddNewLessonPage.tsx b/src/pages/content-management/AddNewLessonPage.tsx
index 24d60c7..8f5a759 100644
--- a/src/pages/content-management/AddNewLessonPage.tsx
+++ b/src/pages/content-management/AddNewLessonPage.tsx
@@ -99,6 +99,12 @@ function isDirectVideoFile(url: string): boolean {
   return /\.(mp4|webm|ogg|mov|m4v)$/.test(clean)
 }
 
+function stepNodeClass(active: boolean, completed: boolean): string {
+  if (active) return "bg-grayScale-900 text-white ring-4 ring-grayScale-200"
+  if (completed) return "bg-grayScale-700 text-white"
+  return "border-2 border-grayScale-300 bg-white text-grayScale-400"
+}
+
 export function AddNewLessonPage() {
   const { categoryId, courseId, subModuleId } = useParams()
   const navigate = useNavigate()
@@ -277,19 +283,18 @@ export function AddNewLessonPage() {
                 <div key={step.number} className="flex items-center">
                   <div className="flex flex-col items-center">
                     <div
-                      className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold shadow-sm sm:h-10 sm:w-10 sm:text-sm ${
-                        currentStep === step.number
-                          ? "bg-brand-500 text-white ring-4 ring-brand-100"
-                          : currentStep > step.number
-                            ? "bg-brand-500 text-white"
-                            : "border-2 border-grayScale-300 bg-white text-grayScale-400"
-                      }`}
+                      className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold shadow-sm sm:h-10 sm:w-10 sm:text-sm ${stepNodeClass(
+                        currentStep === step.number,
+                        currentStep > step.number,
+                      )}`}
                     >
                       {currentStep > step.number ? <Check className="h-4 w-4" /> : step.number}
                     </div>
                     <span className="mt-2 text-xs font-semibold text-grayScale-500">{step.label}</span>
                   </div>
-                  {index < STEPS.length - 1 ? <div className="mx-4 h-0.5 w-20 bg-grayScale-200" /> : null}
+                  {index < STEPS.length - 1 ? (
+                    <div className={`mx-4 h-0.5 w-20 ${currentStep > step.number ? "bg-grayScale-700" : "bg-grayScale-200"}`} />
+                  ) : null}
                 </div>
               ))}
             </div>
@@ -297,19 +302,30 @@ export function AddNewLessonPage() {
         ) : null}
 
         {currentStep === 1 ? (
-          <Card className="p-6">
-            <h2 className="text-lg font-semibold text-grayScale-900">Step 1: Context</h2>
+          <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
+            <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
+              <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 1: Context</h2>
+              <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
+                Define lesson metadata that will be stored in the linked question set.
+              </p>
+            </div>
+            <div className="p-5 sm:p-8 lg:p-10">
             <div className="mt-5 space-y-4">
               <div className="space-y-2">
                 <label className="text-sm font-medium text-grayScale-700">Lesson title</label>
-                <Input value={lessonTitle} onChange={(e) => setLessonTitle(e.target.value)} placeholder="Enter lesson title" />
+                <Input
+                  value={lessonTitle}
+                  onChange={(e) => setLessonTitle(e.target.value)}
+                  placeholder="Enter lesson title"
+                  className="h-11"
+                />
               </div>
               <div className="space-y-2">
                 <label className="text-sm font-medium text-grayScale-700">Description</label>
                 <textarea
                   value={lessonDescription}
                   onChange={(e) => setLessonDescription(e.target.value)}
-                  className="min-h-[88px] w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm"
+                  className="min-h-[96px] w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-grayScale-400 focus:outline-none focus:ring-2 focus:ring-grayScale-100"
                   placeholder="Enter lesson description"
                 />
               </div>
@@ -391,7 +407,11 @@ export function AddNewLessonPage() {
                 ) : null}
               </div>
             </div>
-            <div className="mt-6 flex justify-end">
+            </div>
+            <div className="flex flex-col-reverse items-stretch justify-between gap-3 border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:flex-row sm:items-center sm:px-8 sm:py-5">
+              <Button variant="ghost" onClick={() => navigate(backTo)} className="sm:w-auto">
+                Cancel
+              </Button>
               <Button onClick={handleNext}>
                 Next: Questions
                 <ArrowRight className="ml-2 h-4 w-4" />
@@ -401,9 +421,9 @@ export function AddNewLessonPage() {
         ) : null}
 
         {currentStep === 2 ? (
-          <div className="space-y-4">
+          <div className="space-y-5">
             {questions.map((question, index) => (
-              <Card key={question.id} className="p-5">
+              <Card key={question.id} className="border border-grayScale-200/90 border-l-4 border-l-grayScale-700 p-5 shadow-sm">
                 <div className="mb-4 flex items-center justify-between">
                   <div className="flex items-center gap-2">
                     <GripVertical className="h-4 w-4 text-grayScale-400" />
@@ -452,7 +472,7 @@ export function AddNewLessonPage() {
               <Plus className="mr-2 h-4 w-4" />
               Add another question
             </Button>
-            <div className="flex justify-between">
+            <div className="flex items-center justify-between rounded-2xl border border-grayScale-200/80 bg-grayScale-50/30 px-4 py-4 sm:px-6 sm:py-5">
               <Button variant="outline" onClick={handleBack}>
                 Back
               </Button>
@@ -465,15 +485,19 @@ export function AddNewLessonPage() {
         ) : null}
 
         {currentStep === 3 ? (
-          <Card className="p-6">
-            <h2 className="text-lg font-semibold text-grayScale-900">Step 3: Review & publish</h2>
+          <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
+            <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
+              <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 3: Review & publish</h2>
+            </div>
+            <div className="p-5 sm:p-8">
             <div className="mt-4 space-y-2 text-sm text-grayScale-700">
               <p><span className="font-medium">Question set title:</span> {lessonTitle || "Untitled Lesson"}</p>
               <p><span className="font-medium">Question set description:</span> {lessonDescription || "—"}</p>
               <p><span className="font-medium">Sub-module lesson intro video:</span> {introVideoUrl || "—"}</p>
               <p><span className="font-medium">Questions:</span> {questions.length}</p>
             </div>
-            <div className="mt-6 flex justify-between">
+            </div>
+            <div className="flex items-center justify-between border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:px-8 sm:py-5">
               <Button variant="outline" onClick={handleBack}>
                 Back
               </Button>
diff --git a/src/pages/content-management/HumanLanguagePage.tsx b/src/pages/content-management/HumanLanguagePage.tsx
index af86384..37307d8 100644
--- a/src/pages/content-management/HumanLanguagePage.tsx
+++ b/src/pages/content-management/HumanLanguagePage.tsx
@@ -1754,13 +1754,13 @@ export function HumanLanguagePage() {
                                                     }
                                                     className={`relative pb-3 pt-2 text-sm font-semibold transition-colors ${
                                                       panelTab === "lessons"
-                                                        ? "text-brand-600"
+                                                        ? "text-grayScale-800"
                                                         : "text-grayScale-400 hover:text-grayScale-700"
                                                     }`}
                                                   >
                                                     Lessons
                                                     {panelTab === "lessons" ? (
-                                                      <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-brand-500" />
+                                                      <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-grayScale-700" />
                                                     ) : null}
                                                   </button>
                                                   <button
@@ -1770,13 +1770,13 @@ export function HumanLanguagePage() {
                                                     }
                                                     className={`relative pb-3 pt-2 text-sm font-semibold transition-colors ${
                                                       panelTab === "practices"
-                                                        ? "text-brand-600"
+                                                        ? "text-grayScale-800"
                                                         : "text-grayScale-400 hover:text-grayScale-700"
                                                     }`}
                                                   >
                                                     Practices
                                                     {panelTab === "practices" ? (
-                                                      <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-brand-500" />
+                                                      <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-grayScale-700" />
                                                     ) : null}
                                                   </button>
                                                   </div>
@@ -1785,7 +1785,7 @@ export function HumanLanguagePage() {
                                                       type="button"
                                                       size="sm"
                                                       variant="outline"
-                                                      className="h-8 border-grayScale-200 bg-white px-2 text-[11px] hover:border-brand-200 hover:bg-brand-50/40"
+                                                      className="h-8 border-grayScale-200 bg-white px-2 text-[11px] hover:border-grayScale-300 hover:bg-grayScale-50"
                                                       onClick={() => openCreatePracticeDialog(course.course_id, subModule.id)}
                                                     >
                                                       <Plus className="h-3.5 w-3.5" />
@@ -1821,7 +1821,7 @@ export function HumanLanguagePage() {
                                                         type="button"
                                                         size="sm"
                                                         variant="outline"
-                                                        className="h-8 border-grayScale-200 bg-white px-2 text-[11px] hover:border-brand-200 hover:bg-brand-50/40"
+                                                        className="h-8 border-grayScale-200 bg-white px-2 text-[11px] hover:border-grayScale-300 hover:bg-grayScale-50"
                                                         onClick={() => openCreateLessonDialog(course.course_id, subModule.id)}
                                                       >
                                                         <Plus className="h-3.5 w-3.5" />
@@ -1958,7 +1958,7 @@ export function HumanLanguagePage() {
                                                                     href={selectedLesson.intro_video_url}
                                                                     target="_blank"
                                                                     rel="noopener noreferrer"
-                                                                    className="text-sm font-medium text-brand-600 hover:underline"
+                                                                    className="text-sm font-medium text-grayScale-700 hover:underline"
                                                                   >
                                                                     {selectedLesson.intro_video_url}
                                                                   </a>