Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: trocar cores da topbar de primary-foreground para foreground

Browse Source 
Links, triggers, ícones e ações passam a usar text-foreground
e hover:bg-foreground/10, removendo o override de CSS vars.
Logo text usa dark:invert ao invés de invert sempre.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-22 21:23:29 +00:00
parent 32b7f7b687
commit 417d608b77
3 changed files with 12 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/topbar/app-topbar.tsx
View File

@@ -29,7 +29,7 @@ export function AppTopbar({
notificationsSnapshot,
}: AppTopbarProps) {
return (
<header className="fixed top-0 left-0 right-0 z-50 bg-primary shadow-md h-14 shrink-0 flex items-center">
<header className="fixed top-0 left-0 right-0 z-50 bg-primary h-14 shrink-0 flex items-center shadow-md">
<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-3 h-full">
{/* Logo */}
<Link
@@ -49,7 +49,7 @@ export function AppTopbar({
alt="OpenMonetis"
width={90}
height={28}
className="object-contain invert hidden sm:block"
className="object-contain dark:invert hidden sm:block"
priority
/>
</Link>
@@ -57,22 +57,8 @@ export function AppTopbar({
{/* Navigation */}
<TopNavMenu preLancamentosCount={preLancamentosCount} />
{/* Right-side actions — CSS vars overridden so icons render light on primary bg */}
<div
className="ml-auto flex items-center gap-1"
style={
{
"--foreground": "var(--primary-foreground)",
"--muted-foreground":
"color-mix(in oklch, var(--primary-foreground) 70%, transparent)",
"--accent":
"color-mix(in oklch, var(--primary-foreground) 15%, transparent)",
"--accent-foreground": "var(--primary-foreground)",
"--border":
"color-mix(in oklch, var(--primary-foreground) 30%, transparent)",
} as React.CSSProperties
}
>
{/* Right-side actions */}
<div className="ml-auto flex items-center gap-1">
<NotificationBell
notifications={notificationsSnapshot.notifications}
totalCount={notificationsSnapshot.totalCount}
@@ -83,12 +69,12 @@ export function AppTopbar({
<AnimatedThemeToggler />
<span
aria-hidden
className="h-5 w-px bg-primary-foreground/30 mx-1 hidden sm:block"
className="h-5 w-px bg-foreground/20 mx-1 hidden sm:block"
/>
<FeedbackDialog />
</div>
{/* User avatar — outside the var-override div so dropdown stays normal */}
{/* User avatar */}
<TopbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
</div>
</header>

10
components/topbar/top-nav-menu.tsx
View File

@@ -41,7 +41,7 @@ type TopNavMenuProps = {
};
const triggerClass =
"!bg-transparent !text-primary-foreground/90 hover:!bg-primary-foreground/15 hover:!text-primary-foreground focus:!bg-primary-foreground/15 focus:!text-primary-foreground data-[state=open]:!bg-primary-foreground/20 data-[state=open]:!text-primary-foreground";
"!bg-transparent !text-foreground/80 hover:!bg-foreground/10 hover:!text-foreground focus:!bg-foreground/10 focus:!text-foreground data-[state=open]:!bg-foreground/10 data-[state=open]:!text-foreground";
function SimpleNavLink({
href,
@@ -61,8 +61,8 @@ function SimpleNavLink({
href={href}
className={cn(
"inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
"text-primary-foreground/90 hover:text-primary-foreground hover:bg-primary-foreground/15",
isActive && "bg-primary-foreground/20 text-primary-foreground",
"text-foreground/80 hover:text-foreground hover:bg-foreground/10",
isActive && "bg-foreground/10 text-foreground",
)}
>
{children}
@@ -128,7 +128,7 @@ function MobileNavLink({
onClick={onClick}
className={cn(
"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
"text-foreground hover:bg-accent",
"text-card-foreground hover:bg-accent",
isActive && "bg-accent font-medium",
)}
>
@@ -268,7 +268,7 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
<Button
variant="ghost"
size="icon"
className="md:hidden text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"
className="md:hidden text-foreground hover:bg-foreground/10 hover:text-foreground"
>
<RiMenuLine className="size-5" />
<span className="sr-only">Abrir menu</span>

2
components/topbar/topbar-user.tsx
View File

@@ -36,7 +36,7 @@ export function TopbarUser({ user, pagadorAvatarUrl }: TopbarUserProps) {
<DropdownMenuTrigger asChild>
<button
type="button"
className="flex items-center rounded-full ring-2 ring-primary-foreground/40 hover:ring-primary-foreground/80 transition-all focus-visible:outline-none focus-visible:ring-primary-foreground"
className="flex items-center rounded-full ring-2 ring-foreground/30 hover:ring-foreground/60 transition-all focus-visible:outline-none focus-visible:ring-foreground"
>
<Image
src={avatarSrc}