Skip to content

fix(ui): improve hover contrast for ghost buttons and the settings menu #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
cashcon57 wants to merge 1 commit into from
Closed

fix(ui): improve hover contrast for ghost buttons and the settings menu #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web-app/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const buttonVariants = cva(
secondary:
"bg-secondary rounded-full text-secondary-foreground hover:bg-secondary/80",
ghost:
"hover:bg-accent rounded-full hover:text-accent-foreground dark:hover:bg-accent/50",
"hover:bg-foreground/10 rounded-full hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
Expand Down
10 changes: 5 additions & 5 deletions web-app/src/containers/SettingsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ const SettingsMenu = () => {
matching the sidebar's selected treatment. */}
<Link
to={menu.route}
className="block px-2 gap-1.5 cursor-pointer hover:dark:bg-secondary/60 hover:bg-secondary py-1 w-full rounded-sm [&.active]:bg-foreground/20"
className="block px-2 gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm [&.active]:bg-foreground/20"
>
<div className="flex items-center justify-between">
<span>{t(menu.title)}</span>
Expand Down Expand Up @@ -207,7 +207,7 @@ const SettingsMenu = () => {
<div key={provider.provider}>
<div
className={cn(
'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-secondary/60 py-1 w-full rounded-sm text-foreground',
'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm text-foreground',
isActive && 'bg-foreground/20',
// hidden for llama.cpp provider for setup remote provider
provider.provider === 'llama.cpp' &&
Expand Down Expand Up @@ -266,7 +266,7 @@ const SettingsMenu = () => {
<div
key={provider.provider}
className={cn(
'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-secondary/60 py-1 w-full rounded-sm text-foreground',
'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm text-foreground',
isRouteActive && 'bg-foreground/20',
provider.provider === 'llama.cpp' &&
stepSetupRemoteProvider &&
Expand All @@ -293,7 +293,7 @@ const SettingsMenu = () => {
{hiddenProviders.length > 0 && (
<>
<button
className="flex items-center justify-between px-2 py-1 w-full rounded-sm text-muted-foreground hover:bg-secondary/60"
className="flex items-center justify-between px-2 py-1 w-full rounded-sm text-muted-foreground hover:bg-foreground/10"
onClick={() => setExpandedProviders(!expandedProviders)}
>
<span className="text-sm">
Expand All @@ -320,7 +320,7 @@ const SettingsMenu = () => {
<div
key={provider.provider}
className={cn(
'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-secondary/60 py-1 w-full rounded-sm text-muted-foreground',
'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm text-muted-foreground',
isRouteActive && 'bg-foreground/20'
)}
onClick={() =>
Expand Down