Borders & shadows on dropdowns - Minimalist Skin 7

Heyy! :grin:

This proposal concerns dropdowns and their borders and shadows.

While they look quite okay at the moment, I think that they could be a bit improved by having no borders on them and a blurrier shadow.

Current Dropdown look

On the Iceberg theme:

image

On the Darkly theme:
image

Change in Dropdowns

On the Iceberg theme: (the change simplifies the UI of the dropdown without losing the contrast between the dropdown and the background elements)

image

On the Darkly theme (the change is minimal on dark themes):

image

CSS change for dropdowns

image

Proposal vs Bootstrap 5

While Bootstrap 5 chose to go full flat style on every UI component, as well as dropdowns, I believe shadows should stay when it comes to modals, dropdowns and pop-ups because they should feel like they go a level up from the level the rest of the UI is at.

This is how Bootstrap 5ā€™s dropdowns look:
image

What do you think? :thinking:

For reference, here is the styles for .dropdown-menu before those changes:
image

So if I understand well, those are the changes on .dropdown-menu:

  • Removed both border values

Is there a change made on the shadows? What is the value you would pick instead of the current one?

Thank you for this proposal :slight_smile:

Oops, yes, there was actually, I pasted the wrong printscreen. Will modify it in the the initial post as well:

The shadow was changed to:

box-shadow: 0 6px 24px rgba(0, 0, 0, 0.175);

1 Like

hi @amilica. Thanks for the proposal.

Can you point out the visual differences we are expected to see?
I could see the border being removed, and the shadow being slightly ā€œlargerā€, bother changes are very subtle change for the light theme, and canā€™t be seen with a dark them.

Did I miss something?

The changes are pretty subtle, yes. Compared to the other stuff Iā€™ve posted, this change is not as impactful, for sure. I thought: if we can do easy small & quick improvements to the UI, why not do them?

Personally, I always disliked the border on the dropdown menu and never seen its purpose (maybe Iā€™m missing something and there actually is a purpose).

1 Like

Thanks for confirming :slight_smile:
+1 for this change then!

+1 for the change

1 Like

Great, thanks so much! :grin:

I think Iā€™m -0 for this change. When looking on the screenshot I slightly prefer the old version with the border and a bit less shadow, I do like the clear separation of the box it makes. On the proposal I feel itā€™s less separated against the white background.

Actually I just noticed that your proposal concerns all dropdowns but the screenshot only shows the effect on notification dropdown. It would be nice to see what happens for the ā€œMore actionā€ menu dropdown for example. Or the advanced edit dropdown.

I just manually tried removing the border from the edit dropdown and this looks weird to me as the buttons still have borders which creates quite an inconsistency. Could you maybe provide a screenshot with your exact proposed changes? To me, what Bootstrap 5 proposes would look a lot more consistent as these dropdowns are basically a list of buttons.

Now, notifications are different and I wouldnā€™t object to removing the border from the dropdowns that are launched from the top bar. So +0 for removing the border from the dropdowns that expand from the top bar but -0 for removing the border from other dropdowns that are launched from buttons like the ā€œMore Actionsā€ dropdown.

Iā€™ve opened a PR to apply the change on the dropdown of the header only XWIKI-21550: Remove the border and increase the shadown of the header dropdowns by manuelleduc Ā· Pull Request #2607 Ā· xwiki/xwiki-platform Ā· GitHub
As the agreement is rather weak, there is still time to give you opinion.
Thanks

1 Like

Thank you for working on this and sorry for the delay in reply!

While I like the look of the dropdown coming from the navbar without borders, I think itā€™s more important to stay cohesive (especially in the context of bordered buttons). Based on the feedback provided by others here, I think the only improvement than can be done right now is making the shadows a little lighter and blurrier, but still keeping the borders as they are.

I modified the following properties of the dropdown-menu class as:


-webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

A preview (the change is minimal, but I think it looks slightly better):

You can see how the menus look in my instance.