fixing desktop mode top bar
This commit is contained in:
28
src/App.tsx
28
src/App.tsx
@ -639,7 +639,7 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* Desktop header */}
|
||||
<div className="hidden lg:flex items-center gap-6">
|
||||
<div className="hidden lg:flex items-center gap-4">
|
||||
<h1
|
||||
onClick={() => setShowHelp(true)}
|
||||
className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity"
|
||||
@ -654,36 +654,36 @@ function App() {
|
||||
getMappedLFOs={getMappedLFOs}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4 flex-shrink-0">
|
||||
<div className="flex gap-3 flex-shrink-0">
|
||||
<button
|
||||
onClick={handleStop}
|
||||
disabled={!playing}
|
||||
className="px-2 lg:px-6 py-1 lg:py-2 bg-black text-white border-2 border-white font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1 lg:gap-2"
|
||||
className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
|
||||
>
|
||||
<Square size={12} strokeWidth={2} fill="currentColor" className="lg:w-[14px] lg:h-[14px]" />
|
||||
<span className="hidden sm:inline">STOP</span>
|
||||
<Square size={12} strokeWidth={2} fill="currentColor" />
|
||||
STOP
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRandom}
|
||||
className="px-2 lg:px-6 py-1 lg:py-2 bg-white text-black font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1 lg:gap-2"
|
||||
className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
|
||||
>
|
||||
<Dices size={12} strokeWidth={2} className="lg:w-[14px] lg:h-[14px]" />
|
||||
<span className="hidden sm:inline">RANDOM</span>
|
||||
<Dices size={12} strokeWidth={2} />
|
||||
RANDOM
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRandomizeAllParams}
|
||||
className="px-2 lg:px-6 py-1 lg:py-2 bg-white text-black font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1 lg:gap-2"
|
||||
className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
|
||||
>
|
||||
<Sparkles size={12} strokeWidth={2} className="lg:w-[14px] lg:h-[14px]" />
|
||||
<span className="hidden sm:inline">CHAOS</span>
|
||||
<Sparkles size={12} strokeWidth={2} />
|
||||
CHAOS
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownloadAll}
|
||||
disabled={downloading}
|
||||
className="px-2 lg:px-6 py-1 lg:py-2 bg-black text-white border-2 border-white font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1 lg:gap-2"
|
||||
className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
|
||||
>
|
||||
<Archive size={12} strokeWidth={2} className="lg:w-[14px] lg:h-[14px]" />
|
||||
<span className="hidden sm:inline">{downloading ? 'DOWNLOADING...' : 'PACK'}</span>
|
||||
<Archive size={12} strokeWidth={2} />
|
||||
{downloading ? 'DOWNLOADING...' : 'PACK'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user