Redesign: TableOfContents

[Hakeemmidan]

Is your feature request related to a problem? Please describe.

Not really. Just a redesign of TableOfContents component contents.

Describe the solution you'd like

From

Inactive	active

To

Inactive	active

Things that changed:

• 'Edit page' button and 'zen mode' toggle are moved to the bottom of the component
  • Why?
    • Because the table of content information should be more prominent than 'zen mode' and 'edit page', as it is the main purpose of the TabeleOfContents component
• Removed text and toggle of zen mode and replaced with a toggleable icon, and lowered its opacity (to make it less distracting).
• Lowered opacity of the 'edit page' (to make it less distracting).

Describe alternatives you've considered
#4168

Additional context

• I used the FaYinYang react icon for the zen mode toggle. I feel like there might be better fitting icons. Let me know if you know of any that might be a better fit! = )
• Edit: I also unintentionally created the full-redesign/branch needed for the PR while making the mock-up for this issue so I pushed that as well and connected it to this issue (Design: Redesign TableOfContents #4722)

[victorlrz]

@Hakeemmidan I would love to work on this :)

[Hakeemmidan]

@victorlrz
There's a pull request for this already, unfortunately.
Thank you for the enthusiasm though! = )

PS: This seems like a similar issue (design/frontend related), and it's marked as 'stale', so it might be a good candidate to check out! ( ^___^ )

[victorlrz]

Oh thanks @Hakeemmidan :) I'll have a loook !