mirror of
https://github.com/Novattz/creamlinux-installer.git
synced 2026-01-31 07:42:52 -05:00
button and icon color fixes
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user