Design: Redesign TableOfContents

[Hakeemmidan]

Description

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).

Related Issue

Fixes #4721

[minimalsm]

Heyy @Hakeemmidan Thanks for the PR on this ❤️

I'm not keen on either change to the EditPage button. Ethereum.org content changes rapidly and entropy is something we need to be constantly conscious of because of how bleeding-edge the tech is. The majority of content changes on the docs are submitted by sharp-eyed readers and making a button less distracting in exchange for making it more difficult for the user to contribute to a page is not a trade-off we should be making IMO.

Personally, I think the zen mode looks a lot better as an icon. I suspect some UX designers might be opposed to using only an icon when that icon is not universally understood but I think it's an improvement.

Curious to hear some more thoughts on this (cc: @wackerow @corwintines @pettinarip)

[minimalsm]

Oh and if you haven't seen it @corwintines shouted out your original ZenMode contribution on our latest community call 🥰

[wackerow]

Hey @Hakeemmidan, thanks for the PR! I do agree with @minimalsm that we should keep the edit button prominent. We're open-source and community driven first, and I would argue we should highlight that.

As for the icon, some icons can certainly help simplify the UI, but per Josh's point, this could also evade users who may not recognize that a yin-yang icon. Also don't think this should go at the bottom, since if a user wants to take advantage of the "zen" layout, this should be in a consistent place at the top, rather than being placed at variable distance down the page depending on how long the table of contents is.

I do appreciate the work you've done here, but overall I personally feel the current setup is doing the trick to communicate zen-mode effectively, and highlight need for contributions. Just my two gwei =)

[samajammin]

Thanks @Hakeemmidan! Glad to see you continuing to contribute 😄 - we'd love to get you more involved. Feel free to hop into our Discord to collaborate.

Overall I'm open to hearing you out but I agree with @minimalsm & @wackerow:

• the "Edit" button is something we want to be prominent
• I suspect the toggle icon is more universally understood than the yin-yang icon (but if you have evidence of this used elsewhere please share)
• explicitly displaying "zen mode" allows for straightforward translations into other languages

[Hakeemmidan]

Hi all,

Thank you for your responses and continuous support! = )

Given that it seems that there is more or less an agreement that a labeled toggle might make more sense, I've returned it to that. (Even though I do agree with @minimalsm's that it looks much better as an icon.)

I'll lower the text size to match the table of content, and slightly lower the opacity (to 0.8) to make it a little less distracting (if that's ok).

I think that it definitely should not be at the very top of the table of contents. At the very least, I think it should be swapped with the 'edit page' at the top. Or it could be at the very bottom, but I do see @wackerow's point of the disadvantage of it shifting places depending on the length of the content when it's the bottom. So swapping it with the edit page at the top seems like the better option.

I'll also keep the 'edit page' button at the top since there seems to be an agreement to keep it there.

Here's a screenshot of what it looks like after the changes:

Before	After

It'd be ideal if we had anonymous user data about usage of experimental features such as this one because right now this feels like throwing darts in the dark, haha. These sorts of decisions should probably be based on user usage, not my/our personal preference. But that could be a future project; The future looks bright! 🌅

Overall, I'd say I'm becoming more convinced over time of @minamilsm's comment about having a Notion-like collapsible SideNav as a possible replacement to this. It seems like the more intuitive, more well-known design. So I think I'll open that issue (#4168) back up soon after implementing a mock-up of it, to open that discussion back up again.

Thank you all for baring experimentation on such a large-scale website. It is greatly appreciated! 🙏

[Hakeemmidan]

@minimalsm

Oh and if you haven't seen it @corwintines shouted out your original ZenMode contribution on our latest community call 🥰

That's awesome! 😍 Thank you all for the shoutout 🙏

I've also been seeing it across the web (in PRs, Issues, videos, screenshots, etc.). It's incredible how much of an impact contributing to a project like this could have! 😍🛠🧩 But it's also somewhat scary, I'm not gonna lie, haha.

---

@wackerow

... Just my two gwei =)

Nice 😂 👾

---

@samajammin

Thanks @Hakeemmidan! Glad to see you continuing to contribute 😄 ....

Thank you all for the support!

... - we'd love to get you more involved. Feel free to hop into our Discord to collaborate.

🎉 ✔️

[samajammin]

I like the look of the new changes 👍

[corwintines]

Looks good @Hakeemmidan!