[Asmaa6777]

Hi Ahmed,

This is a design trial I tried on the Advanced Algorithms course. Have a look, and if you like it, we can bring it to the other courses. If something doesn't work for you, tell me and I'll adjust it or drop it.

The goal: lessons that are easier to scan, and visualizers and boxes that feel lighter and friendlier instead of small and heavy.

What changed

Lesson text

• Section headings are purple, with a short bar under each main heading so a new section is easy to spot.
• Bold labels that start a paragraph or bullet ("Worst case:", "Case 1:", "Proof.") are purple. Bold in the middle of a sentence stays as it was. A small rehype plugin (src/lib/rehypeLeadIn.ts, with a test) marks these, because CSS can't tell whether bold text starts a paragraph.
• Equations are lighter: display maths sits in a soft box with a purple left edge.
• Light mode uses a soft plum (#72428a) instead of the bright #6600ff, which was hard on the eyes on the cream background. Dark mode is unchanged.

Visualizers

• Rounded cards with a soft stage behind each picture, the step explanation in a purple-edged bubble, pill buttons with a purple Play, and pill switches.
• Bigger array cells with soft colour fills instead of hard borders. Cells being compared grow slightly.
• No heavy bold or all-caps labels, and bigger tree and graph nodes with lighter labels.
• The hash table visualizer is now horizontal, so the whole table fits in view. A formula strip shows each probe's arithmetic, and a load-factor bar warns when the table is getting full.

Lesson boxes

• Callouts, practical application cards, model answers and quizzes get rounded corners, lighter tints and no all-caps labels.
• Quiz options have A/B/C/D badges that turn into ✓ / ✗ once answered.

Where to look

• /courses/advanced-algorithms/collision-resolution: headings, purple labels, the hash table
• the red-black tree lessons: trees and nodes
• /courses/advanced-algorithms/divide-and-conquer: equations
• the "Practice from past exams" section at the end of any lesson: quizzes and model answers

Check both light and dark mode.

Heads-up

The headings, the plum colour, the visualizer building blocks and the lesson boxes are shared, so Algorithm Design, Theory of Computation and a few Computer Architecture widgets also pick up the new look. I didn't design for those courses specifically. If you'd rather review it on Advanced Algorithms only first, I can limit it to this course.

Checks

• Build and lint pass.
• Tests pass except the 4 in lesson-preview.test.ts, which already fail on main.