From cf7ac8c8a1b0c172bdadc1de14e1624d253e9a9f Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 30 Mar 2022 22:30:59 -0700
Subject: [PATCH] Darken bg on hover

---
 web/components/nav/menu.tsx         | 2 +-
 web/components/nav/profile-menu.tsx | 2 +-
 web/components/nav/sidebar.tsx      | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/components/nav/menu.tsx b/web/components/nav/menu.tsx
index a0345e37..9d348fab 100644
--- a/web/components/nav/menu.tsx
+++ b/web/components/nav/menu.tsx
@@ -11,7 +11,7 @@ export function MenuButton(props: {
   return (
     <Menu as="div" className={clsx('relative z-40 flex-shrink-0', className)}>
       <div>
-        <Menu.Button className="flex rounded-full">
+        <Menu.Button className="w-full rounded-full">
           <span className="sr-only">Open user menu</span>
           {buttonContent}
         </Menu.Button>
diff --git a/web/components/nav/profile-menu.tsx b/web/components/nav/profile-menu.tsx
index 7a344a8c..990c12bc 100644
--- a/web/components/nav/profile-menu.tsx
+++ b/web/components/nav/profile-menu.tsx
@@ -28,7 +28,7 @@ export function getNavigationOptions(user?: User | null) {
 export function ProfileSummary(props: { user: User | undefined }) {
   const { user } = props
   return (
-    <Row className="group avatar items-center gap-4 py-6 text-gray-600 group-hover:text-gray-900">
+    <Row className="group avatar my-3 items-center gap-4 rounded-md py-3 text-gray-600 group-hover:bg-gray-100 group-hover:text-gray-900">
       <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
 
       <div className="truncate text-left">
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 0af007dc..cb7055df 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -36,7 +36,7 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
         className={clsx(
           item.href == currentPage
             ? 'bg-gray-200 text-gray-900'
-            : 'text-gray-600 hover:bg-gray-50',
+            : 'text-gray-600 hover:bg-gray-100',
           'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
         )}
         aria-current={item.href == currentPage ? 'page' : undefined}
@@ -58,7 +58,7 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
 
 function MoreButton() {
   return (
-    <a className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-50">
+    <a className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100">
       <DotsHorizontalIcon
         className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
         aria-hidden="true"
@@ -128,7 +128,7 @@ export default function Sidebar() {
             <a
               key={fold.name}
               href={`/fold/${fold.slug}`}
-              className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+              className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900"
             >
               <span className="truncate">&nbsp; {fold.name}</span>
             </a>