ui changes tweaks and flings. new quickstart overlay to replace help overlay.

This commit is contained in:
legop3
2026-05-10 19:41:24 -04:00
parent e58e5503e8
commit 7148e41828
11 changed files with 229 additions and 40 deletions
@@ -6,14 +6,14 @@ export default function FullscreenPrompt({ visible, mode, onEnterFullscreen, onD
const isIOSMode = mode === 'pwa-hint';
return (
<div className="fixed inset-0 z-40 flex items-end justify-center p-2 pointer-events-none sm:items-center">
<div className="pointer-events-auto w-full max-w-sm rounded-lg border border-cyan-500/40 bg-zinc-950/95 shadow-xl">
<div className="space-y-0.5 p-4 text-sm text-slate-100">
<h2 className="text-base font-semibold text-white">Better in fullscreen</h2>
<div className="fixed inset-0 z-40 flex items-center justify-center p-1 pointer-events-none bg-black/20">
<div className="pointer-events-auto w-full max-w-sm surface center">
<div className="space-y-0.5 p-1 text-sm text-slate-100">
<h2 className="text-base font-semibold text-white border-b border-slate-700">Better in fullscreen!</h2>
{isIOSMode ? (
<p className="text-slate-300">
For fullscreen on iOS, open Safari&apos;s share menu and pick <strong>Add to Home Screen</strong>. Launching from
the home screen removes the browser chrome.
For fullscreen on iOS, open Safari's share menu and pick <strong>Add to Home Screen</strong>. Launching from
the home screen then makes it fullscreen.
</p>
) : (
<p className="text-slate-300">
@@ -21,6 +21,8 @@ export default function FullscreenPrompt({ visible, mode, onEnterFullscreen, onD
via the system back or home gesture.
</p>
)}
<p className="text-xs border-t border-b border-slate-700 p-0.5 text-blue-300 text-center">This will only show once just to let you know. There is a fullscreen button in the bottom right for later use.</p>
<div className="flex justify-end gap-0.5 pt-1 text-sm">
<button type="button" className="rounded border border-slate-600 px-3 py-1 text-slate-200" onClick={onDismiss}>
{isIOSMode ? 'Got it' : 'Not now'}