From fcd57c12fcac92382f78307c2bf643cd44d5533c Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sun, 23 Oct 2022 18:20:36 -0700
Subject: [PATCH] more style tweaks

---
 .../components/explorer/ExplorerTopBar.tsx    |  6 +----
 .../src/components/jobs/JobManager.tsx        |  2 +-
 .../src/components/primitive/Shortcut.tsx     |  5 ++--
 packages/ui/src/OverlayPanel.tsx              | 24 ++++++++++---------
 packages/ui/src/Select.tsx                    |  2 +-
 packages/ui/style/colors.scss                 |  2 +-
 6 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/interface/src/components/explorer/ExplorerTopBar.tsx b/packages/interface/src/components/explorer/ExplorerTopBar.tsx
index f65cf23f4..6ddf93426 100644
--- a/packages/interface/src/components/explorer/ExplorerTopBar.tsx
+++ b/packages/interface/src/components/explorer/ExplorerTopBar.tsx
@@ -99,11 +99,7 @@ const SearchBar = forwardRef<HTMLInputElement, DefaultProps>((props, forwardedRe
 				{...searchField}
 			/>
 
-			<div
-				className={clsx(
-					'space-x-1 absolute top-[1px] right-1 peer-focus:invisible pointer-events-none'
-				)}
-			>
+			<div className={clsx('space-x-1 absolute right-1 peer-focus:invisible pointer-events-none')}>
 				{platform === 'browser' ? (
 					<Shortcut chars="⌘F" aria-label={'Press Command-F to focus search bar'} />
 				) : os === 'macOS' ? (
diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx
index 0a2bd42df..1a1ccc77f 100644
--- a/packages/interface/src/components/jobs/JobManager.tsx
+++ b/packages/interface/src/components/jobs/JobManager.tsx
@@ -57,7 +57,7 @@ function elapsed(seconds: number) {
 	return new Date(seconds * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)?.[0];
 }
 
-const HeaderContainer = tw.div`z-20 flex items-center w-full h-10 px-2 border-b border-app-line rounded-t-md bg-app-box`;
+const HeaderContainer = tw.div`z-20 flex items-center w-full h-10 px-2 border-b border-app-line rounded-t-md bg-app-selected`;
 
 export function JobsManager() {
 	const runningJobs = useLibraryQuery(['jobs.getRunning']);
diff --git a/packages/interface/src/components/primitive/Shortcut.tsx b/packages/interface/src/components/primitive/Shortcut.tsx
index 4a3295d88..c0edfd6ec 100644
--- a/packages/interface/src/components/primitive/Shortcut.tsx
+++ b/packages/interface/src/components/primitive/Shortcut.tsx
@@ -13,9 +13,8 @@ export const Shortcut: React.FC<ShortcutProps> = (props) => {
 		<kbd
 			className={clsx(
 				`px-1 border border-b-2`,
-				`rounded-lg text-xs font-bold`,
-				`text-gray-400 bg-gray-200 border-gray-300`,
-				`dark:text-gray-400 dark:bg-transparent dark:border-transparent`,
+				`rounded-md text-xs font-bold`,
+				`border-app-line dark:border-transparent`,
 				className
 			)}
 			{...rest}
diff --git a/packages/ui/src/OverlayPanel.tsx b/packages/ui/src/OverlayPanel.tsx
index 9e3a205db..a7a4a4c89 100644
--- a/packages/ui/src/OverlayPanel.tsx
+++ b/packages/ui/src/OverlayPanel.tsx
@@ -9,16 +9,6 @@ interface Props extends DropdownMenu.MenuContentProps {
 	disabled?: boolean;
 }
 
-const MENU_CLASSES = `
-  flex flex-col
-  min-w-[11rem] z-50 m-2 space-y-1
-  select-none cursor-default rounded-lg 
-  text-left text-sm text-ink
-  bg-app-overlay/90 backdrop-blur
-  border border-app-line
-  shadow-2xl shadow-black/40 
-`;
-
 export const OverlayPanel = ({
 	trigger,
 	children,
@@ -50,7 +40,19 @@ export const OverlayPanel = ({
 					show && (
 						<DropdownMenu.Portal forceMount>
 							<DropdownMenu.Content forceMount asChild>
-								<animated.div className={clsx(MENU_CLASSES, className)} style={styles}>
+								<animated.div
+									className={clsx(
+										'flex flex-col',
+										'min-w-[11rem] z-50 m-2 space-y-1',
+										'select-none cursor-default rounded-lg',
+										'text-left text-sm text-ink',
+										'bg-app-overlay/90 backdrop-blur',
+										// 'border border-app-overlay',
+										'shadow-2xl shadow-black/60 ',
+										className
+									)}
+									style={styles}
+								>
 									{children}
 								</animated.div>
 							</DropdownMenu.Content>
diff --git a/packages/ui/src/Select.tsx b/packages/ui/src/Select.tsx
index 99c3ddd1b..714c08cd8 100644
--- a/packages/ui/src/Select.tsx
+++ b/packages/ui/src/Select.tsx
@@ -53,7 +53,7 @@ export function SelectOption(props: PropsWithChildren<{ value: string }>) {
 			className={clsx(
 				'relative flex items-center pl-6 px-1 py-0.5 pr-4 text-xs',
 				'rounded font-sm cursor-pointer select-none text-ink',
-				'focus:outline-none radix-disabled:opacity-50 hover:bg-accent '
+				'focus:outline-none hover:text-white radix-disabled:opacity-50 hover:bg-accent '
 			)}
 			value={props.value}
 		>
diff --git a/packages/ui/style/colors.scss b/packages/ui/style/colors.scss
index 138fd2358..368870efd 100644
--- a/packages/ui/style/colors.scss
+++ b/packages/ui/style/colors.scss
@@ -72,7 +72,7 @@
   --color-app-overlay: var(--light-hue), 5%, 100%;
   --color-app-input: var(--light-hue), 5%, 100%;
   --color-app-focus: var(--light-hue), 5%, 98%;
-  --color-app-line: var(--light-hue), 5%, 89%;
+  --color-app-line: var(--light-hue), 5%, 90%;
   --color-app-button: var(--light-hue), 5%, 100%;
   --color-app-divider: var(--light-hue), 5%, 80%;
   --color-app-selected: var(--light-hue), 5%, 93%;