[dashboard] Adjust ContextMenu background style (hover, active)

Author: jankeromnes

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),

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}`;