From d689e7e58ab30a96c231a52b9b1022c8b0e12ac6 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Sun, 21 Apr 2024 17:28:27 +0300
Subject: [PATCH] [ENG-1750] Update context menu colors (#2369)

update context menu colors
---
 interface/app/$libraryId/Spacedrop/index.tsx | 4 ++--
 packages/ui/src/ContextMenu.tsx              | 2 +-
 packages/ui/style/colors.scss                | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/interface/app/$libraryId/Spacedrop/index.tsx b/interface/app/$libraryId/Spacedrop/index.tsx
index a11d68061..9b43d925a 100644
--- a/interface/app/$libraryId/Spacedrop/index.tsx
+++ b/interface/app/$libraryId/Spacedrop/index.tsx
@@ -112,12 +112,12 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
 				<Icon name="Spacedrop" size={56} />
 				<span className="text-lg font-bold">Spacedrop</span>
 
-				<div className="flex flex-col space-y-4 pt-2">
+				<div className="flex flex-col pt-2">
 					<p className="text-center text-ink-dull">{t('spacedrop_description')}</p>
 					{discoveredPeers.size === 0 && (
 						<div
 							className={clsx(
-								'flex items-center justify-center gap-3 rounded-md border border-dashed border-app-line bg-app-darkBox px-3 py-2 font-medium text-ink'
+								'mt-3 flex items-center justify-center gap-3 rounded-md border border-dashed border-app-line bg-app-darkBox px-3 py-2 font-medium text-ink'
 							)}
 						>
 							<p className="text-center text-ink-faint">{t('no_nodes_found')}</p>
diff --git a/packages/ui/src/ContextMenu.tsx b/packages/ui/src/ContextMenu.tsx
index 1139df489..106947d1f 100644
--- a/packages/ui/src/ContextMenu.tsx
+++ b/packages/ui/src/ContextMenu.tsx
@@ -15,7 +15,7 @@ interface ContextMenuProps extends RadixCM.MenuContentProps {
 export const contextMenuClassNames = clsx(
 	'z-50 max-h-[calc(100vh-20px)] overflow-y-auto',
 	'my-2 min-w-48 max-w-64 py-0.5',
-	'cool-shadow bg-menu',
+	'cool-shadow bg-menu/95 backdrop-blur-lg',
 	'border border-menu-line',
 	'cursor-default select-none rounded-md',
 	'animate-in fade-in'
diff --git a/packages/ui/style/colors.scss b/packages/ui/style/colors.scss
index 23f545165..2f7bc6f29 100644
--- a/packages/ui/style/colors.scss
+++ b/packages/ui/style/colors.scss
@@ -45,9 +45,9 @@
 	--color-app-slider: var(--dark-hue), 15%, 20%;
 	--color-app-explorer-scrollbar: var(--dark-hue), 20%, 25%;
 	// menu
-	--color-menu: var(--dark-hue), 25%, 5%;
-	--color-menu-line: var(--dark-hue), 15%, 11%;
-	--color-menu-ink: var(--dark-hue), 5%, 100%;
+	--color-menu: var(--dark-hue), 15%, 10%;
+	--color-menu-line: var(--dark-hue), 15%, 14%;
+	--color-menu-ink: var(--dark-hue), 10%, 100%;
 	--color-menu-faint: var(--dark-hue), 5%, 80%;
 	--color-menu-hover: var(--dark-hue), 15%, 30%;
 	--color-menu-selected: var(--dark-hue), 5%, 30%;
@@ -99,7 +99,7 @@
 	--color-app-slider: var(--light-hue), 5%, 95%;
 	--color-app-explorer-scrollbar: var(--light-hue), 5%, 75%;
 	// menu
-	--color-menu: var(--light-hue), 5%, 100%;
+	--color-menu: var(--light-hue), 5%, 98%;
 	--color-menu-line: var(--light-hue), 5%, 95%;
 	--color-menu-ink: var(--light-hue), 5%, 20%;
 	--color-menu-faint: var(--light-hue), 5%, 80%;