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>
|
</div>
|
||||||
|
|
||||||
{/* Desktop header */}
|
{/* Desktop header */}
|
||||||
<div className="hidden lg:flex items-center gap-6">
|
<div className="hidden lg:flex items-center gap-4">
|
||||||
<h1
|
<h1
|
||||||
onClick={() => setShowHelp(true)}
|
onClick={() => setShowHelp(true)}
|
||||||
className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity"
|
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}
|
getMappedLFOs={getMappedLFOs}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-4 flex-shrink-0">
|
<div className="flex gap-3 flex-shrink-0">
|
||||||
<button
|
<button
|
||||||
onClick={handleStop}
|
onClick={handleStop}
|
||||||
disabled={!playing}
|
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]" />
|
<Square size={12} strokeWidth={2} fill="currentColor" />
|
||||||
<span className="hidden sm:inline">STOP</span>
|
STOP
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleRandom}
|
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]" />
|
<Dices size={12} strokeWidth={2} />
|
||||||
<span className="hidden sm:inline">RANDOM</span>
|
RANDOM
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleRandomizeAllParams}
|
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]" />
|
<Sparkles size={12} strokeWidth={2} />
|
||||||
<span className="hidden sm:inline">CHAOS</span>
|
CHAOS
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleDownloadAll}
|
onClick={handleDownloadAll}
|
||||||
disabled={downloading}
|
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]" />
|
<Archive size={12} strokeWidth={2} />
|
||||||
<span className="hidden sm:inline">{downloading ? 'DOWNLOADING...' : 'PACK'}</span>
|
{downloading ? 'DOWNLOADING...' : 'PACK'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user