Make popover styling consistent

[git-f0x]

Makes all popovers use the same styling, with hover highlights (matching those on the VPN page currently).

Also removes some unnecessary Vecs.

[jacobgkau]

Pop-overs still have different padding than drop-downs, so there's still some inconsistency here. I want to make sure we know what direction we're going with this.

This is what the pop-over currently looks like on the VPN page:

This is what it used to look like on the Bluetooth page:

This is what it will now look like on the Bluetooth page:

This is what drop-downs still look like:

@pop-os/ux Is this the direction we want to make the change, or would it be better to make the VPN pop-over match what the others currently look like (which is more similar to the drop-downs)? This topic is very similar to what was being discussed in pop-os/libcosmic#1042 (comment) regarding drop-down styling across different components.

[git-f0x]

This was mainly because the popovers on the keyboard and region pages were quite different and didn't feel nice.
The popovers are now styled very similar to context or app menus.
Though I think some padding could potentially look a bit better in menus as well, since the highlights have rounded corners.
Alternatively, the highlights could be square, but clipped at the corners of the menu (but that doesn't work with the current iced version).

[kleenleen]

imho, the best looking one is this look but with an added padding for the highlight:
(but not as huge as it's it's currently the case for cosmic-settings dropdowns, it's currently way too much:
Current situation: missing padding / way oversized padding.)

---

And when in cosmic-settings choosing for multiple option, the check icon should be on the left side rather than on the right, because it gives this icon a consistent position rather that varying randomly based on the length of the longest entry. ...And actually, it is already set on the left for icon based choices, so why even having this icon on the right side at all ?

---

The best way dropdown could ever look

• Clean small padding for highlight
• Always a left blank for icons (visual aid / checked icon)
• shortcut help darker than menu entry text and slightly smaller (to help without make the UI heavier looking)
• separators that help sorting content

This example is not perfect (text is slightly too big and separators look better when they don't go full across) but it illustrates the niceness of having a constant left space for potential aiding icons/checked icons.

[maria-komarova]

Sorry for the delayed response. The dropdown menus that open after clicking on "view more" icon should all follow the dropdown menu styling for now: https://www.figma.com/design/SkAtS5qlVOGQC0n895AHzX/Design-System--WIP-?node-id=11667-220337&t=gEV0p3UotnX2xe1B-4. It should also be a widget from libcosmic. That way if we decide to change the styling of the dropdowns later to match other menus we only need to do it in the library. At least, ideally.

[git-f0x]

I've updated this for testing with pop-os/libcosmic#1053 (libcosmic needs to be patched with a local clone of that in Cargo.toml to properly test).

[kleenleen]

Sorry for the delayed response. The dropdown menus that open after clicking on "view more" icon should all follow the dropdown menu styling for now: https://www.figma.com/design/SkAtS5qlVOGQC0n895AHzX/Design-System--WIP-?node-id=11667-220337&t=gEV0p3UotnX2xe1B-4. It should also be a widget from libcosmic. That way if we decide to change the styling of the dropdowns later to match other menus we only need to do it in the library. At least, ideally.

I think the figma reference design needs a retake. Nothing justifies the check icon as a suffix.
Like I said, all the other elements of the UI have the checkmark icon on the left side, and that allows a consistent position.
I think you should modify this part.