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 ( return (
<Menu as="div" className={clsx('relative z-40 flex-shrink-0', className)}> <Menu as="div" className={clsx('relative z-40 flex-shrink-0', className)}>
<div> <div>
<Menu.Button className="flex rounded-full"> <Menu.Button className="w-full rounded-full">
<span className="sr-only">Open user menu</span> <span className="sr-only">Open user menu</span>
{buttonContent} {buttonContent}
</Menu.Button> </Menu.Button>

View File

@ -28,7 +28,7 @@ export function getNavigationOptions(user?: User | null) {
export function ProfileSummary(props: { user: User | undefined }) { export function ProfileSummary(props: { user: User | undefined }) {
const { user } = props const { user } = props
return ( 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 /> <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
<div className="truncate text-left"> <div className="truncate text-left">

View File

@ -36,7 +36,7 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
className={clsx( className={clsx(
item.href == currentPage item.href == currentPage
? 'bg-gray-200 text-gray-900' ? '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' 'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
)} )}
aria-current={item.href == currentPage ? 'page' : undefined} aria-current={item.href == currentPage ? 'page' : undefined}
@ -58,7 +58,7 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
function MoreButton() { function MoreButton() {
return ( 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 <DotsHorizontalIcon
className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
aria-hidden="true" aria-hidden="true"
@ -128,7 +128,7 @@ export default function Sidebar() {
<a <a
key={fold.name} key={fold.name}
href={`/fold/${fold.slug}`} 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> <span className="truncate">&nbsp; {fold.name}</span>
</a> </a>