button and icon color fixes

This commit is contained in:
Novattz
2025-12-22 20:20:38 +01:00
parent 9397e1508f
commit cbf791a348
4 changed files with 20 additions and 13 deletions

View File

@@ -41,7 +41,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({ visible, onClose }) =>
<Dialog visible={visible} onClose={onClose} size="medium"> <Dialog visible={visible} onClose={onClose} size="medium">
<DialogHeader onClose={onClose} hideCloseButton={true}> <DialogHeader onClose={onClose} hideCloseButton={true}>
<div className="settings-header"> <div className="settings-header">
<Icon name={settings} variant="bold" size="md" /> <Icon name={settings} variant="solid" size="md" />
<h3>Settings</h3> <h3>Settings</h3>
</div> </div>
</DialogHeader> </DialogHeader>
@@ -55,7 +55,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({ visible, onClose }) =>
</p> </p>
<div className="settings-placeholder"> <div className="settings-placeholder">
<div className="placeholder-icon"> <Icon name={settings} variant="bold" size="xl" /> </div> <div className="placeholder-icon"> <Icon name={settings} variant="solid" size="xl" /> </div>
<div className="placeholder-text"> <div className="placeholder-text">
<h5>Settings Coming Soon</h5> <h5>Settings Coming Soon</h5>
<p> <p>

View File

@@ -152,9 +152,9 @@ const GameItem = ({ game, onAction, onEdit }: GameItemProps) => {
disabled={!game.cream_installed || !!game.installing} disabled={!game.cream_installed || !!game.installing}
title="Manage DLCs" title="Manage DLCs"
className="edit-button settings-icon-button" className="edit-button settings-icon-button"
> leftIcon={<Icon name="Settings" variant="solid" size="md" />}
<Icon name="Settings" size="md" /> iconOnly
</Button> />
)} )}
</div> </div>
</div> </div>

View File

@@ -16,7 +16,7 @@ const Header = ({ onRefresh, refreshDisabled = false, onSearch, searchQuery }: H
return ( return (
<header className="app-header"> <header className="app-header">
<div className="app-title"> <div className="app-title">
<Icon name={diamond} variant="bold" size="lg" className="app-logo-icon" /> <Icon name={diamond} variant="solid" size="lg" className="app-logo-icon" />
<h1>CreamLinux</h1> <h1>CreamLinux</h1>
</div> </div>
<div className="header-controls"> <div className="header-controls">
@@ -25,7 +25,7 @@ const Header = ({ onRefresh, refreshDisabled = false, onSearch, searchQuery }: H
onClick={onRefresh} onClick={onRefresh}
disabled={refreshDisabled} disabled={refreshDisabled}
className="refresh-button" className="refresh-button"
leftIcon={<Icon name={refresh} variant="bold" size="md" />} leftIcon={<Icon name={refresh} variant="solid" size="md" />}
> >
Refresh Refresh
</Button> </Button>
@@ -37,7 +37,7 @@ const Header = ({ onRefresh, refreshDisabled = false, onSearch, searchQuery }: H
value={searchQuery} value={searchQuery}
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
/> />
<Icon name={search} variant="bold" size="md" className="search-icon" /> <Icon name={search} variant="solid" size="md" className="search-icon" />
</div> </div>
</div> </div>
</header> </header>

View File

@@ -1,4 +1,5 @@
import { Icon, layers, linux, proton, settings } from '@/components/icons' import { Icon, layers, linux, proton, settings } from '@/components/icons'
import { Button } from '@/components/buttons'
interface SidebarProps { interface SidebarProps {
setFilter: (filter: string) => void setFilter: (filter: string) => void
@@ -21,7 +22,7 @@ type FilterItem = {
const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) => { const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) => {
// Available filter options with icons // Available filter options with icons
const filters: FilterItem[] = [ const filters: FilterItem[] = [
{ id: 'all', label: 'All Games', icon: layers, variant: 'bold' }, { id: 'all', label: 'All Games', icon: layers, variant: 'solid' },
{ id: 'native', label: 'Native', icon: linux, variant: 'brand' }, { id: 'native', label: 'Native', icon: linux, variant: 'brand' },
{ id: 'proton', label: 'Proton Required', icon: proton, variant: 'brand' }, { id: 'proton', label: 'Proton Required', icon: proton, variant: 'brand' },
] ]
@@ -47,10 +48,16 @@ const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) =>
))} ))}
</ul> </ul>
<div className="settings-button" onClick={onSettingsClick}> <Button
<Icon name={settings} variant="bold" size="md" className="settings-icon" /> variant="secondary"
<span>Settings</span> size="medium"
</div> onClick={onSettingsClick}
className="settings-button"
leftIcon={<Icon name={settings} variant="solid" size="md" className="settings-icon" />}
fullWidth
>
Settings
</Button>
</div> </div>
) )