administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Make buttons consistent and have hover state

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-16 06:49:45 -06:00
parent d7ae0eedf8
commit 5c5834c93b
4 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/navigation/NavItem.tsx
View File

@ -11,8 +11,8 @@ import { IconType } from "react-icons";
const variants = { const variants = {
primary: { primary: {
active: "font-bold text-white bg-selected", active: "font-bold text-white bg-selected hover:bg-selected/80",
inactive: "text-secondary-foreground bg-secondary", inactive: "text-secondary-foreground bg-secondary hover:bg-muted",
}, },
secondary: { secondary: {
active: "font-bold text-selected", active: "font-bold text-selected",

2
web/src/components/navigation/Sidebar.tsx
View File

@ -32,7 +32,7 @@ function Sidebar() {
); );
})} })}
</div> </div>
<div className="flex flex-col items-center mb-8"> <div className="flex flex-col items-center gap-4 mb-8">
<GeneralSettings /> <GeneralSettings />
<AccountSettings /> <AccountSettings />
</div> </div>

10
web/src/components/settings/AccountSettings.tsx
View File

@ -3,16 +3,18 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { isDesktop } from "react-device-detect";
import { VscAccount } from "react-icons/vsc"; import { VscAccount } from "react-icons/vsc";
import { Button } from "../ui/button";
export default function AccountSettings() { export default function AccountSettings() {
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button size="icon" variant="ghost"> <div
<VscAccount /> className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
</Button> >
<VscAccount className="size-5 md:m-[6px]" />
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="right"> <TooltipContent side="right">
<p>Account</p> <p>Account</p>

8
web/src/components/settings/GeneralSettings.tsx
View File

@ -118,9 +118,11 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<a href="#"> <a href="#">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button size="icon" variant="ghost"> <div
<LuSettings /> className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
</Button> >
<LuSettings className="size-5 md:m-[6px]" />
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="right"> <TooltipContent side="right">
<p>Settings</p> <p>Settings</p>