WIP Right sidebar UI updates

We have received feedback that the sidebar is getting a bit cluttered, making it difficult to figure out where to look when viewing an issue or MR. We have UX research scheduled for 12.0 and 12.1 to find out which sections are most important to users. After that, we'll be able to reorganize and possibly remove some elements from the sidebar altogether.

Related issues

• Allow users to disable time tracking from sidebar
• Allow users to customize/configure the sidebar
• UX Research: right sidebar usage and preferences
• Track clicks on the sidebar

Proposal

Make the sidebar white to match the rest of the page content.

Right now it's gray, mimicking the contextual sidebar on the left. Since the right sidebar content is purely related to the actual page content, we could make it actually look like it's a part of the main page. A white background helps

Decrease the label size

We use a lot of labels on issues, and they take up a lot of vertical space in the sidebar. If we change the size to match those in system notes, we save some space

Reference label

This takes up horizontal room, cutting the actual reference link in half. Removing it means you get to see most, if not all of the link.

Sidebar size

The first commit shows the sidebar at 240px rather than 290px. Things can get cramped quickly, so I also decreased the font size to 12px, made the Add todo and Move issue buttons smaller, and decreased the number of default participants to 5 rather than 7. This size breaks the dropdown; we'll probably need some JS to show the dropdowns correctly, given that the sidebar is set to overflow: hidden

In the second commit the size reduction is less drastic (272px instead of our current 290, so things still work with the default 14px font, but with 6 default participants rather than our current 7. Dropdowns work correctly at this size.

Buttons

I've changed the default buttons to btn-sm to take up less vertical space. The regular-sized buttons are reserved for the main page content.

Divider color

Since the sidebar background is white, we can use a lighter gray color to divide the sidebar sections. I've switched to #f2f2f2 rather than #e8e8e8 (which I don't think is even one of our colors 🤔). There isn't much contrast, but I'm not sure these blocks really need a high contrast separator. We have a lot of lines in our UI as it is.

Current	f1ac90cc

Current	774bda28