mirror of
https://github.com/abusoww/tuxmate.git
synced 2026-04-18 00:03:23 +02:00
Refine UI: Aesthetic overhaul, mobile improvements
This commit is contained in:
N1C4T
@@ -8,87 +8,59 @@ interface AurDrawerSettingsProps {
|
||||
setSelectedHelper: (helper: 'yay' | 'paru') => void;
|
||||
}
|
||||
|
||||
// AUR settings inside the command drawer
|
||||
// AUR settings configuration panel
|
||||
export function AurDrawerSettings({
|
||||
aurAppNames,
|
||||
hasYayInstalled,
|
||||
setHasYayInstalled,
|
||||
selectedHelper,
|
||||
setSelectedHelper,
|
||||
}: AurDrawerSettingsProps) {
|
||||
distroColor,
|
||||
}: AurDrawerSettingsProps & { distroColor: string }) {
|
||||
return (
|
||||
<div className="mb-4 rounded-xl bg-[var(--bg-tertiary)] border border-[var(--border-primary)]/40 overflow-hidden">
|
||||
{/* Header with all apps listed */}
|
||||
<div className="px-4 py-3 border-b border-[var(--border-primary)]/30">
|
||||
<p className="text-xs text-[var(--text-muted)] leading-relaxed">
|
||||
<span className="font-medium text-[var(--text-primary)]">AUR packages: </span>
|
||||
{aurAppNames.join(', ')}
|
||||
</p>
|
||||
<div className="mb-4 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-[var(--border-primary)]/50 flex">
|
||||
<span className="text-xs font-medium text-[var(--text-secondary)] whitespace-nowrap mr-2">AUR Packages:</span>
|
||||
<span className="text-xs text-[var(--text-muted)] truncate">{aurAppNames.join(', ')}</span>
|
||||
</div>
|
||||
|
||||
{/* Controls with animated buttons */}
|
||||
<div className="px-4 py-3 flex flex-col sm:flex-row sm:items-center gap-4 text-xs">
|
||||
{/* Helper selection */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[var(--text-secondary)] font-medium">AUR helper:</span>
|
||||
<div className="flex bg-[var(--bg-secondary)] rounded-lg p-1 border border-[var(--border-primary)]/30">
|
||||
<div className="p-4 grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-[var(--text-secondary)] font-medium">AUR Helper</span>
|
||||
<div className="flex w-full bg-[var(--bg-primary)] rounded-md border border-[var(--border-primary)] p-1 h-10">
|
||||
<button
|
||||
onClick={() => setSelectedHelper('yay')}
|
||||
className={`relative px-3 py-1.5 rounded-md font-medium transition-[background-color,color,transform] duration-200 ease-out ${selectedHelper === 'yay'
|
||||
? 'bg-[var(--text-primary)] text-[var(--bg-primary)] shadow-sm'
|
||||
: 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
|
||||
}`}
|
||||
style={{
|
||||
transform: selectedHelper === 'yay' ? 'scale(1)' : 'scale(0.98)',
|
||||
}}
|
||||
className={`flex-1 rounded-sm font-medium transition-all ${selectedHelper === 'yay' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'}`}
|
||||
style={{ backgroundColor: selectedHelper === 'yay' ? distroColor : 'transparent', color: selectedHelper === 'yay' ? '#000' : undefined }}
|
||||
>
|
||||
yay <span className="opacity-60 font-normal">(Go)</span>
|
||||
yay
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedHelper('paru')}
|
||||
className={`relative px-3 py-1.5 rounded-md font-medium transition-[background-color,color,transform] duration-200 ease-out ${selectedHelper === 'paru'
|
||||
? 'bg-[var(--text-primary)] text-[var(--bg-primary)] shadow-sm'
|
||||
: 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
|
||||
}`}
|
||||
style={{
|
||||
transform: selectedHelper === 'paru' ? 'scale(1)' : 'scale(0.98)',
|
||||
}}
|
||||
className={`flex-1 rounded-sm font-medium transition-all ${selectedHelper === 'paru' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'}`}
|
||||
style={{ backgroundColor: selectedHelper === 'paru' ? distroColor : 'transparent', color: selectedHelper === 'paru' ? '#000' : undefined }}
|
||||
>
|
||||
paru <span className="opacity-60 font-normal">(Rust)</span>
|
||||
paru
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-px h-5 bg-[var(--border-primary)]/40 hidden sm:block" />
|
||||
|
||||
{/* Installation mode */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[var(--text-secondary)] font-medium">Already installed?</span>
|
||||
<div className="flex bg-[var(--bg-secondary)] rounded-lg p-1 border border-[var(--border-primary)]/30">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-[var(--text-secondary)] font-medium">Install helper?</span>
|
||||
<div className="flex w-full bg-[var(--bg-primary)] rounded-md border border-[var(--border-primary)] p-1 h-10">
|
||||
<button
|
||||
onClick={() => setHasYayInstalled(true)}
|
||||
className={`relative px-3 py-1.5 rounded-md font-medium transition-[background-color,color,transform] duration-200 ease-out ${hasYayInstalled
|
||||
? 'bg-[var(--text-primary)] text-[var(--bg-primary)] shadow-sm'
|
||||
: 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
|
||||
}`}
|
||||
style={{
|
||||
transform: hasYayInstalled ? 'scale(1)' : 'scale(0.98)',
|
||||
}}
|
||||
className={`flex-1 rounded-sm font-medium transition-all ${hasYayInstalled ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'}`}
|
||||
style={{ backgroundColor: hasYayInstalled ? distroColor : 'transparent', color: hasYayInstalled ? '#000' : undefined }}
|
||||
>
|
||||
Yes, use it
|
||||
No
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setHasYayInstalled(false)}
|
||||
className={`relative px-3 py-1.5 rounded-md font-medium transition-[background-color,color,transform] duration-200 ease-out ${!hasYayInstalled
|
||||
? 'bg-[var(--text-primary)] text-[var(--bg-primary)] shadow-sm'
|
||||
: 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
|
||||
}`}
|
||||
style={{
|
||||
transform: !hasYayInstalled ? 'scale(1)' : 'scale(0.98)',
|
||||
}}
|
||||
className={`flex-1 rounded-sm font-medium transition-all ${!hasYayInstalled ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'}`}
|
||||
style={{ backgroundColor: !hasYayInstalled ? distroColor : 'transparent', color: !hasYayInstalled ? '#000' : undefined }}
|
||||
>
|
||||
No, install it
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user