From 8f04cbe4e1e0ae2a8ff6d0200175a0b2b0f4564c Mon Sep 17 00:00:00 2001
From: maxichrome <maxichrome@users.noreply.github.com>
Date: Fri, 27 May 2022 21:10:47 -0500
Subject: [PATCH] add light-theme context menu

---
 packages/ui/.storybook/main.js          |  3 ++-
 packages/ui/package.json                |  1 +
 packages/ui/src/ContextMenu.stories.tsx |  6 +++---
 packages/ui/src/ContextMenu.tsx         | 10 ++++++----
 pnpm-lock.yaml                          | 24 +++++++++++++++++++++++-
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
index 27b41382d..7ec0c6f1b 100644
--- a/packages/ui/.storybook/main.js
+++ b/packages/ui/.storybook/main.js
@@ -12,7 +12,8 @@ module.exports = {
 					implementation: require('postcss')
 				}
 			}
-		}
+		},
+		'storybook-tailwind-dark-mode'
 	],
 	webpackFinal: async (config) => {
 		config.module.rules.push({
diff --git a/packages/ui/package.json b/packages/ui/package.json
index bdeae2568..4c63a217c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -46,6 +46,7 @@
 		"postcss-loader": "^7.0.0",
 		"sass": "^1.50.0",
 		"sass-loader": "^13.0.0",
+		"storybook-tailwind-dark-mode": "^1.0.12",
 		"style-loader": "^3.3.1",
 		"typescript": "^4.6.3"
 	}
diff --git a/packages/ui/src/ContextMenu.stories.tsx b/packages/ui/src/ContextMenu.stories.tsx
index a8cdeae60..364ed372e 100644
--- a/packages/ui/src/ContextMenu.stories.tsx
+++ b/packages/ui/src/ContextMenu.stories.tsx
@@ -22,7 +22,7 @@ Default.args = {
 				{
 					label: 'New Item',
 					icon: Plus,
-					onClick: () => alert('Item clicked')
+					onClick: () => {}
 				}
 			]
 		},
@@ -31,13 +31,13 @@ Default.args = {
 				{
 					label: 'View Info',
 					icon: FileText,
-					onClick: () => alert('Info!!!')
+					onClick: () => {}
 				},
 				{
 					label: 'Delete',
 					icon: Trash,
 					danger: true,
-					onClick: () => alert('Delete item clicked')
+					onClick: () => {}
 				}
 			]
 		}
diff --git a/packages/ui/src/ContextMenu.tsx b/packages/ui/src/ContextMenu.tsx
index b3b78be36..fab3e9b13 100644
--- a/packages/ui/src/ContextMenu.tsx
+++ b/packages/ui/src/ContextMenu.tsx
@@ -25,14 +25,16 @@ export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
 		<div
 			role="menu"
 			className={clsx(
-				'flex flex-col select-none cursor-default bg-gray-600 text-gray-100 text-left text-sm font-semibold rounded p-1.5 gap-1.5 border-2 border-gray-500',
+				'shadow-box shadow-gray-300 dark:shadow-gray-700 flex flex-col select-none cursor-default bg-gray-50 text-gray-800 border-gray-200 dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500 text-left text-sm font-semibold rounded p-1.5 gap-1.5 border-2',
 				className
 			)}
 			{...rest}
 		>
 			{sections.map((sec, i) => (
 				<>
-					{i !== 0 && <hr className="border-0 border-b border-b-gray-500 mx-2" />}
+					{i !== 0 && (
+						<hr className="border-0 border-b border-b-gray-300 dark:border-b-gray-500 mx-2" />
+					)}
 
 					<section key={i} className="flex items-stretch flex-col gap-0.5">
 						{sec.heading && (
@@ -48,9 +50,9 @@ export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
 											textAlign: 'inherit'
 										}}
 										className={clsx(
-											'flex flex-row gap-1.5 items-center cursor-default rounded-sm flex-1 px-1.5 py-1 focus:bg-gray-500 hover:bg-gray-500',
+											'flex flex-row gap-1.5 items-center cursor-default rounded-sm flex-1 px-1.5 py-1 focus-visible:bg-gray-150 hover:bg-gray-150 dark:focus-visible:bg-gray-500 dark:hover:bg-gray-500',
 											{
-												'text-red-400': item.danger
+												'text-red-600 dark:text-red-400': item.danger
 											}
 										)}
 										onClick={item.onClick}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 09468011f..d26218877 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -389,6 +389,7 @@ importers:
       react-dom: ^18.0.0
       sass: ^1.50.0
       sass-loader: ^13.0.0
+      storybook-tailwind-dark-mode: ^1.0.12
       style-loader: ^3.3.1
       tailwindcss: ^3.0.23
       typescript: ^4.6.3
@@ -421,6 +422,7 @@ importers:
       postcss-loader: 7.0.0_postcss@8.4.12
       sass: 1.50.0
       sass-loader: 13.0.0_sass@1.50.0
+      storybook-tailwind-dark-mode: 1.0.12_zpnidt7m3osuk7shl3s4oenomq
       style-loader: 3.3.1
       typescript: 4.6.3
 
@@ -7992,7 +7994,7 @@ packages:
     dev: true
 
   /default-browser-id/1.0.4:
-    resolution: {integrity: sha1-5Z0JpdFXuCi4dsJoFuYcPSosIDo=}
+    resolution: {integrity: sha512-qPy925qewwul9Hifs+3sx1ZYn14obHxpkX+mPD369w4Rzg+YkJBgi3SOvwUq81nWSjqGUegIgEPwD8u+HUnxlw==}
     engines: {node: '>=0.10.0'}
     hasBin: true
     requiresBuild: true
@@ -15351,6 +15353,26 @@ packages:
     resolution: {integrity: sha512-CMtO2Uneg3SAz/d6fZ/6qbqqQHi2ynq6/KzMD/26gTkiEShCcpqFfTHgOxsE0egAq6SX3FmN4CeSqn8BzXQkJg==}
     dev: true
 
+  /storybook-tailwind-dark-mode/1.0.12_zpnidt7m3osuk7shl3s4oenomq:
+    resolution: {integrity: sha512-0/JryZmq43dT0zYawjtQAZeYdm2ejlj0yV5P7ITgNPZ75Bv0r5voI6M4h2rpSK79Snw3qmmmfxiS5OpvsLluAw==}
+    peerDependencies:
+      '@storybook/addons': ^6.2.9
+      '@storybook/api': ^6.2.9
+      '@storybook/components': ^6.2.9
+      '@storybook/core-events': ^6.2.9
+      '@storybook/theming': ^6.2.9
+      react: ^16.8.0 || ^17.0.0
+      react-dom: ^16.8.0 || ^17.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.0.0
+      react-dom: 18.0.0_react@18.0.0
+    dev: true
+
   /stream-browserify/2.0.2:
     resolution: {integrity: sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==}
     dependencies: