Use compact styling

Author: kraenhansen

packages/compass-components/src/components/context-menu.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
 
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
 import {
   ContextMenuProvider as ContextMenuProviderBase,
   useContextMenu,
@@ -14,6 +17,17 @@ export type {
   ContextMenuItemGroup,
 } from '@mongodb-js/compass-context-menu';
 
+const menuStyles = css({
+  paddingTop: spacing[100],
+  paddingBottom: spacing[100],
+});
+
+const itemStyles = css({
+  paddingTop: 0,
+  paddingBottom: 0,
+  fontSize: '.8em',
+});
+
 export function ContextMenuProvider({
   children,
 }: {
@@ -54,6 +68,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
         open={menu.isOpen}
         setOpen={menu.close}
         justify="start"
+        className={menuStyles}
       >
         {itemGroups.map((items: ContextMenuItemGroup, groupIndex: number) => {
           return (
@@ -67,6 +82,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
                     key={`menu-group-${groupIndex}-item-${itemIndex}`}
                     data-text={item.label}
                     data-testid={`menu-group-${groupIndex}-item-${itemIndex}`}
+                    className={itemStyles}
                     onClick={(evt: React.MouseEvent) => {
                       item.onAction?.(evt);
                       menu.close();