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:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user