[UI] Sidebars

[andersonjeccel]

Q	A
Bug fix? (use the a.b branch)	🟢
New feature/enhancement? (use the a.x branch)	🟢
Deprecations?	🔴
BC breaks? (use the c.x branch)	🔴
Automated tests included?	🔴
Related user documentation PR URL	mautic/user-documentation#...
Related developer documentation PR URL	mautic/developer-documentation-new#...
Issue(s) addressed	Fixes #...

Description

This PR is based on another PR, where I introduce tokens to replace most of the UI variables, aiming to improve consistency in all components. We need it to be merged before this one becomes available for code review.

This PR:

• Make things light to have a dark version
• Adds dark theme
• Fixes weird minimized sidebar size
• Increases icon size when minimized

---

Before:

sidebars-before.mp4

After:

sidebars-after.mp4

---

📋 Steps to test this PR:

1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
2. Interact with the sidebar

How to test dark mode?

1. Open dev tools on your browser (F12)
2. Open the Console tab
3. On the field, paste document.documentElement.setAttribute('color-theme', 'dark'); and hit Enter
4. The components changed by the specific PR you're seeing will become dark

[kuzmany]

Ok, understand the change, just minor for me

[andersonjeccel]

@kuzmany I moved the Settings title to an accessible description for screen readers only

Why to have a title on the right sidebar if we don’t have a title on the left?

And the second sidebar is more than settings… How would a points group differ from a category? If one of them is a setting, the other also should be considered

perhaps we can be a bit more reasonable for users going this way, what do you think?

[kuzmany]

@andersonjeccel I've noticed the empty space. From a user's perspective, it appears to be a bug.I am not saying you need to fix it, just saying even if it fits all attributes, for basic users it could look like a bug in design.

[shinde-rahul]

When the sidebar collapsed the menu items like,

• Component
• Channels
• Points
  They are inaccessible. Please check this,

video1500268263.mp4

[andersonjeccel]

@kuzmany I’m actually searching for perceptions like yours

what if we had a toggle for dark mode there? Would you find it a strange place to be?

my initial idea was to put the toggle on the account profile

[andersonjeccel]

@shinde-rahul I’ll check it

Do you know if this functionality works normally on other instances?

[andersonjeccel]

@shinde-rahul Checked, it seems like an old issue
I won't be able to pick it, probably needs technical effort only a dev could do

[andersonjeccel]

How to test dark mode?

1. Open dev tools on your browser (F12)
2. Open the Console tab
3. On the field, paste document.documentElement.setAttribute('color-theme', 'dark'); and hit Enter
4. The components changed by the specific PR you're seeing will become dark

[PatrickJenkner]

Looks good in both light and dark mode 👍
I agree with @kuzmany that the empty space in the right sidebar looks weird. I like your idea of putting the toggle for dark mode there. That would make it more easily accessible than putting it in the profile