From 6e2c6525da5ab05f7a85dbe4ba53f44a951684c2 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 20 Jan 2021 11:32:26 +0100
Subject: [PATCH] Dark mode adjustments for popover

Add new popover classes from @nextcloud/vue's Popover and PopoverMenu*
components. This fixes issues where the menu icons were not inverted.

Adjusted border for both the avatar popover menu and also actions
popover menu to make them easier to distinguish from the background.

Now using border color for the popover arrow to make it more visible
outside the border.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 apps/accessibility/css/dark.scss | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/accessibility/css/dark.scss b/apps/accessibility/css/dark.scss
index 78203eae9f337..90f9e80f51f94 100644
--- a/apps/accessibility/css/dark.scss
+++ b/apps/accessibility/css/dark.scss
@@ -53,11 +53,12 @@ $color-border-dark: lighten($color-main-background, 14%);
 
 .bubble,
 .app-navigation-entry-menu,
-.popovermenu {
+.popovermenu,
+.popover__menu {
 	li {
 		> button,
 		> a,
-		> .menuitem {
+		> .menuitem, > .popover__menuitem {
 			> img {
 				filter: invert(100%);
 			}
@@ -71,6 +72,22 @@ $color-border-dark: lighten($color-main-background, 14%);
 	border: 1px solid var(--color-border);
 }
 
+.popover[x-placement^='top'] .popover__arrow {
+	border-top-color: var(--color-border);
+}
+.popover[x-placement^='bottom'] .popover__arrow {
+	border-bottom-color: var(--color-border);
+}
+.popover[x-placement^='left'] .popover__arrow {
+	border-left-color: var(--color-border);
+}
+.popover[x-placement^='right'] .popover__arrow {
+	border-right-color: var(--color-border);
+}
+.popover .popover__inner {
+	border: 1px solid var(--color-border);
+}
+
 // Prevent slideshow icons from going dark
 #slideshow {
 	[class^='icon-'], [class*=' icon-']{