feat: redesign master mute button to match track style

Changed master mute button from Button component to match track style:
- Native button element with rounded-md styling
- Blue background when muted (bg-blue-500) with shadow
- Card background when unmuted with hover state
- Text-based "M" label instead of icons
- Larger size (h-8, text-[11px]) compared to track (h-5, text-[9px])
- Removed unused Volume2/VolumeX icon imports

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-19 01:22:03 +01:00
parent 418c79d961
commit 797d64b1d3

View File

@@ -1,8 +1,6 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import { Volume2, VolumeX } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { CircularKnob } from '@/components/ui/CircularKnob'; import { CircularKnob } from '@/components/ui/CircularKnob';
import { MasterFader } from './MasterFader'; import { MasterFader } from './MasterFader';
import { cn } from '@/lib/utils/cn'; import { cn } from '@/lib/utils/cn';
@@ -71,22 +69,18 @@ export function MasterControls({
/> />
{/* Mute Button */} {/* Mute Button */}
<Button <button
variant={isMuted ? 'default' : 'outline'}
size="sm"
onClick={onMuteToggle} onClick={onMuteToggle}
title={isMuted ? 'Unmute' : 'Mute'}
className={cn( className={cn(
'w-full h-8', 'h-8 w-full rounded-md flex items-center justify-center transition-all text-[11px] font-bold',
isMuted && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50' isMuted
? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)} )}
title={isMuted ? 'Unmute' : 'Mute'}
> >
{isMuted ? ( M
<VolumeX className="h-4 w-4" /> </button>
) : (
<Volume2 className="h-4 w-4" />
)}
</Button>
</div> </div>
); );
} }