UX: Updated Color and Added Icons to Site-Sidebar and Community-Sidebar Buttons

[dankxiaobong]

UX: Updated Text Alignment, Color and Added Icons to Site-Sidebar and Community-Sidebar Buttons

Another draft related to #3823

Description

Screenshots

Before

community-sidebar

## site-sidebar

After

community-sidebar

## site-sidebar

[Nutomic]

The icons look good. Different button colors are too much though, remove and purge should be gray so they dont catch your attention all the time while browsing.

You can also change the less common actions to be icon-only buttons without text. Then they can be shown side by side and take up less space. Specifically report, modlog, remove and purge.

[dankxiaobong]

Thank you for your feedback!

I updated the buttons as per your suggestion (also added the settings Button in there). You're right it looks better this way! Also Updated the Block Community button to be danger outline (instead of danger fill)

Personally, I still think the purge and remove should be danger coded - only mods/admins would see those (and catch their attention all the time while browsing) - Maybe move it to settings?

What do you think?

[Nutomic]

The outline color looks much better than before. It could even use a lighter red color, or more transparency. You can also try a similar blue or green outline for create post. Or alternatively color only the icon. Between button icon and text there should be a bit more margin.

Actually purge and remove would be better in a dropdown menu, similar to post/comment actions. Others report, modlog etc should also go to the dropdown. Settings for remote communities should not be accessible for admins, so thats not a good place for remove/purge.

Overall we need to try a lot of different things, and figure out what looks and works best.

[dessalines]

Gotta be honest I really don't like these left-aligned block buttons, or the removed text for all the other items. Its far less clear what it is, and doesn't look as clean.

Try using btn-light border-danger-subtle for the block button's border.

I spose I would be fine moving some of these things to a dropdown menu tho, IE a 3-dot menu block button, that opens a dropdown with the extra options.

Check out the other dropdown menus in the code for how these should look, or read over the material 3 menus.

Dropdown menus can be left aligned and have items, and it looks decent:

Also we shouldn't really be doing much designing from scratch; I'm following the google material 3 design docs for all these UI changes. They've done a lot of research into what looks good and is functional, and have pretty much every UI paradigm and problem covered there. Then all we do is translate that into bootstrap classes.

[dessalines]

Closing as we should be minimizing colors, and the block buttons look better without icons.