Yimaru/Yimaru-Admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix lesson stepper visibility and state styling

Browse Source 
Restore a stable practice-style step indicator in Add New Lesson so active and completed steps are clearly visible and connectors render correctly.

Made-with: Cursor
This commit is contained in:
Yared Yemane 2026-04-14 08:00:26 -07:00
parent a3f31e92c1
commit 558cf11abc
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/content-management/AddNewLessonPage.tsx
View File

@ -99,12 +99,6 @@ 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()
@ -283,17 +277,20 @@ 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 ${stepNodeClass(
currentStep === step.number,
currentStep > step.number,
)}`}
className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold shadow-sm transition-all duration-300 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"
}`}
>
{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 ${currentStep > step.number ? "bg-grayScale-700" : "bg-grayScale-200"}`} />
<div className={`mx-4 h-0.5 w-20 ${currentStep > step.number ? "bg-brand-500" : "bg-grayScale-200"}`} />
) : null}
</div>
))}