Darken bg on hover

This commit is contained in:
Austin Chen 2022-03-30 22:30:59 -07:00
parent 67a9189057
commit cf7ac8c8a1
3 changed files with 5 additions and 5 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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>