From f16d4fec7c6eb46010486fb200f87073e457c5d9 Mon Sep 17 00:00:00 2001
From: Jan Keromnes <janx@linux.com>
Date: Fri, 6 Aug 2021 06:42:49 +0000
Subject: [PATCH] [dashboard] Adjust ContextMenu background style (hover,
 active)

---
 components/dashboard/src/Menu.tsx                   | 2 ++
 components/dashboard/src/components/ContextMenu.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 0a9ff3eedd090b..9228f71484c5fe 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -159,6 +159,7 @@ export default function Menu() {
                                 <span className="text-gray-800 dark:text-gray-100 text-base font-semibold">{userFullName}</span>
                                 <span className="">Personal Account</span>
                             </div>,
+                            active: !team,
                             separator: true,
                             link: '/',
                         },
@@ -171,6 +172,7 @@ export default function Menu() {
                                     : '...'
                                 }</span>
                             </div>,
+                            active: team && team.id === t.id,
                             separator: true,
                             link: `/${t.slug}`,
                         })).sort((a, b) => a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1),
diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index 36c530e9681477..4ef2ea0fa0882e 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -84,7 +84,7 @@ function ContextMenu(props: ContextMenuProps) {
                 <div className={`mt-2 z-50 bg-white dark:bg-gray-900 absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg truncated ${props.classes || 'w-48 right-0'}`}>
                     {props.menuEntries.map((e, index) => {
                         const clickable = e.href || e.onClick || e.link;
-                        const entry = <div className={`px-4 flex py-3 ${clickable ? 'hover:bg-gray-200 dark:hover:bg-gray-800' : ''} text-sm leading-1 ${e.customFontStyle || font} ${e.separator ? ' border-b border-gray-200 dark:border-gray-800' : ''}`} title={e.title}>
+                        const entry = <div className={`px-4 flex py-3 ${clickable ? 'hover:bg-gray-100 dark:hover:bg-gray-700' : ''} ${e.active ? 'bg-gray-50 dark:bg-gray-800' : ''} ${index === 0 ? 'rounded-t-lg' : ''} ${index === props.menuEntries.length - 1 ? 'rounded-b-lg' : ''} text-sm leading-1 ${e.customFontStyle || font} ${e.separator ? ' border-b border-gray-200 dark:border-gray-800' : ''}`} title={e.title}>
                             {e.customContent || <><div className="truncate w-52">{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div> : null}</>}
                         </div>
                         const key = `entry-${menuId}-${index}-${e.title}`;