Redesign the lesson content page

[flacial]

Things to redesign

Lesson parts nav

Large and unstyled

Elements spacing & letter spacing

Margin between elements and codeblocks

Fonts

The fonts are inconsistent. The should be `Inter` font

Challengebar font, size, colors, weight, and letters spacing

Table of content

It's too large

Text length

It's hard to read lengthy text

---

We can use the design mock we created in the past for this page. I think it would do the job.

[akshayishaan]

Is anyone working in this issue? I want to work on this issue. Can @flacial explain a bit more about it?

[flacial]

Is anyone working in this issue? I want to work on this issue. Can @flacial explain a bit more about it?

No one is working on this issue. The main thing to do is to change the page's design to this mock design. Doing so will fix some UI issues that affect the student experience while studying (also polish the page).

If you're planning to take this issue, let's chat on Discord. My username there is Flacial#1292

[akshayishaan]

@flacial It was my bad.....in understanding your issue. Unfortunately i am not a designer. I thought you have the design and You need me to code this up. Anyways.....I am new here, exploring open source issues. Nice talking to you.

[anthonykhoa]

I thought you have the design and You need me to code this up.

From what I understand, the designs are ready and someone needs to code them up. I think you misunderstood @flacial's words

[SlyBouhafs]

After a bit of tweaking, thanks to @flacial for the help, here is the new lessons page redesign to match our new design, there are two variants, left TOC and right TOC, we can vote on which one we should implement.

Right TOC page:

Right TOC scroll:

Left TOC page:

Left TOC scroll:

If you guys have any feedback, i would love to hear it.

[flacial]

@SlyBouhafs I vote for Left TOC page. It looks perfect!

[flacial]

I like the idea of having a container around the content (especially headers):

With the current design, things look like they're floating around and nothing to contain them (not pretty):

[SlyBouhafs]

With the current design, things look like they're floating around and nothing to contain them (not pretty):

I agree, that header is mostly for students/mentors, we need to adapt it so that it works with the admin pages too, i will work on that too.