arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Match TopBar dark mode background to navbar color

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-02-21 17:10:17 +01:00
parent 20bee5a661
commit 26459459b4
No known key found for this signature in database
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/main/src/components/TopBar.tsx
View file

@ -170,7 +170,7 @@ function NotificationDropdown() {
<Button
variant="ghost"
size="icon"
className="relative w-10 h-10 border border-[#EAECF0] rounded-[8px] text-[#0C111D] hover:bg-gray-100"
className="relative w-10 h-10 border border-[#EAECF0] dark:border-gray-700 rounded-[8px] text-[#0C111D] dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
aria-label="Notifications"
>
<BellIcon className="w-5 h-5" />
@ -252,7 +252,7 @@ function ProfileDropdown() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
className="flex items-center gap-2 p-1 hover:bg-gray-100 rounded-[8px]"
className="flex items-center gap-2 p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-[8px]"
aria-label="Profile menu"
>
<Avatar className="w-10 h-10">
@ -341,16 +341,16 @@ export function TopBar() {
};
return (
<header className="h-[75px] flex items-center justify-between px-6 gap-4 border-b border-[#EAECF0] bg-white shrink-0">
<header className="h-[75px] flex items-center justify-between px-6 gap-4 border-b border-[#EAECF0] dark:border-gray-700 bg-white dark:bg-navbar-background shrink-0">
<div className="relative flex-1 max-w-sm">
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none" />
<input
type="text"
placeholder="Search..."
value={isSearchRoute ? searchQuery : ""}
onChange={isSearchRoute ? handleSearchChange : undefined}
readOnly={!isSearchRoute}
className="w-full pl-9 pr-4 py-2 bg-transparent border border-[#EAECF0] rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
className="w-full pl-9 pr-4 py-2 bg-transparent border border-[#EAECF0] dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-800/50"
/>
</div>
<div className="flex items-center gap-3">