Fix the iOS install sheet: exact Safari flow, chips, iOS blue, layout
Steps - iOS now uses the exact flow: Safari users get 4 steps (⋯ → Share/More → Add to Home Screen → Add); non-Safari (CriOS/FxiOS/EdgiOS/in-app) get a first 'Open this page in Safari' step and 5 total. The vague 'in some browsers it's under…' wording is gone. Chips and icons - The ⋯ chip renders a single three-dot icon (icon-only pill) instead of the icon plus an '⋯' character (which showed two sets of dots). - The More chip uses a chevron-down icon instead of the rounded-square. - The accent pill uses real iOS blue: #0A84FF dark / #007AFF light, still the only coloured element. - Steps and chips share one 16px type scale; chip labels are medium weight. Typography and layout - Numbers are small muted circles in a fixed 24px column, aligned with the first text line via matching line-height. - Removed trailing periods after chips; steps tightened. - Bottom padding is calc(24px + env(safe-area-inset-bottom)) and a secondary 'Maybe later' button sits below the steps. - max-height 90dvh with inner scrolling; 36×4px low-contrast handle with real swipe-down-to-close (momentum off, spring back). - App card shows the hostname only (no port), truncated. Themes - Dark (default): layered surfaces #1c1c1e sheet / #2c2c2e card / #3a3a3c chips with 8% white borders; subtle logo tile instead of solid white; backdrop is 50% black with 4px blur. - Light only when the app theme was explicitly set to light, ignoring the system preference; borders #e0e0e0, chip fills #f2f2f2. Also fixes a crash the test pressure exposed: a 429 (rate-limited) /api/health response crashed Settings at health.vision.available. fetchHealth now rejects non-OK/malformed responses so the dialog shows its error banner instead of the app error screen. Install-sheet suite now 64 checks; pwa/final-ux/security/contrast green.
This commit is contained in:
parent
26e36bc0c0
commit
f98795436d
4 changed files with 85 additions and 39 deletions
|
|
@ -5,11 +5,11 @@ import { useCallback, useEffect, useState } from "react";
|
|||
|
||||
import {
|
||||
AddToHomeIcon,
|
||||
ChevronDownIcon,
|
||||
ChromeIcon,
|
||||
CompassIcon,
|
||||
DownloadIcon,
|
||||
EllipsisIcon,
|
||||
MoreIcon,
|
||||
PlusIcon,
|
||||
ShareIcon,
|
||||
SnowflakeIcon,
|
||||
|
|
@ -53,7 +53,7 @@ export function InstallSheet() {
|
|||
const [installing, setInstalling] = useState(false);
|
||||
const dragControls = useDragControls();
|
||||
const reduceMotion = useReducedMotion();
|
||||
const domain = typeof window === "undefined" ? "" : window.location.host;
|
||||
const domain = typeof window === "undefined" ? "" : window.location.hostname;
|
||||
|
||||
/** Everything needed to render the sheet, or null if it shouldn't appear. */
|
||||
const prepare = useCallback((): SheetInfo | null => {
|
||||
|
|
@ -143,59 +143,61 @@ export function InstallSheet() {
|
|||
setInstalling(false);
|
||||
};
|
||||
|
||||
// The exact iOS flow: Safari users skip the "open in Safari" step entirely.
|
||||
const steps: React.ReactNode[] = [];
|
||||
if (info?.platform === "ios") {
|
||||
if (info.browser !== "safari") {
|
||||
steps.push(
|
||||
<>
|
||||
Open this page in <Chip icon={<CompassIcon className="size-3.5" />}>Safari</Chip>.
|
||||
Open this page in <Chip icon={<CompassIcon className="size-4" />}>Safari</Chip>
|
||||
</>,
|
||||
);
|
||||
}
|
||||
steps.push(
|
||||
<>
|
||||
Tap <Chip icon={<ShareIcon className="size-3.5" />}>Share</Chip> in the browser bar — in
|
||||
some browsers it’s under <Chip icon={<EllipsisIcon className="size-3.5" />}>⋯</Chip>.
|
||||
Tap <IconChip icon={<EllipsisIcon className="size-4" />} label="More options" /> in the
|
||||
browser bar
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <Chip icon={<MoreIcon className="size-3.5" />}>More</Chip> in the share sheet.
|
||||
Tap <Chip icon={<ShareIcon className="size-4" />}>Share</Chip>, then{" "}
|
||||
<Chip icon={<ChevronDownIcon className="size-4" />}>More</Chip>
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Choose <Chip icon={<AddToHomeIcon className="size-3.5" />}>Add to Home Screen</Chip>.
|
||||
Choose <Chip icon={<AddToHomeIcon className="size-4" />}>Add to Home Screen</Chip>
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <AccentPill icon={<PlusIcon className="size-3.5" />}>Add</AccentPill> to confirm.
|
||||
Tap <AccentPill icon={<PlusIcon className="size-4" />}>Add</AccentPill> to confirm
|
||||
</>,
|
||||
);
|
||||
} else if (info?.platform === "android") {
|
||||
if (info.browser !== "chrome") {
|
||||
steps.push(
|
||||
<>
|
||||
Open this page in <Chip icon={<ChromeIcon className="size-3.5" />}>Chrome</Chip>.
|
||||
Open this page in <Chip icon={<ChromeIcon className="size-4" />}>Chrome</Chip>
|
||||
</>,
|
||||
);
|
||||
}
|
||||
steps.push(
|
||||
<>
|
||||
Tap <Chip icon={<EllipsisIcon className="size-3.5" />}>⋯</Chip> in the top right of the
|
||||
browser.
|
||||
Tap <IconChip icon={<EllipsisIcon className="size-4" />} label="More options" /> in the top
|
||||
right of the browser
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Choose <Chip icon={<DownloadIcon className="size-3.5" />}>Install app</Chip> or{" "}
|
||||
<Chip icon={<AddToHomeIcon className="size-3.5" />}>Add to Home screen</Chip>.
|
||||
Choose <Chip icon={<DownloadIcon className="size-4" />}>Install app</Chip> or{" "}
|
||||
<Chip icon={<AddToHomeIcon className="size-4" />}>Add to Home screen</Chip>
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <AccentPill icon={<DownloadIcon className="size-3.5" />}>Install</AccentPill> to confirm.
|
||||
Tap <AccentPill icon={<DownloadIcon className="size-4" />}>Install</AccentPill> to confirm
|
||||
</>,
|
||||
);
|
||||
}
|
||||
|
|
@ -216,7 +218,7 @@ export function InstallSheet() {
|
|||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="absolute inset-0 bg-black/45 backdrop-blur-[2px]"
|
||||
className="absolute inset-0 bg-black/50 backdrop-blur-[4px]"
|
||||
/>
|
||||
<motion.div
|
||||
role="dialog"
|
||||
|
|
@ -225,6 +227,7 @@ export function InstallSheet() {
|
|||
drag="y"
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
dragMomentum={false}
|
||||
dragConstraints={{ top: 0, bottom: 0 }}
|
||||
dragElastic={{ top: 0, bottom: 0.55 }}
|
||||
onDragEnd={(_, gesture) => {
|
||||
|
|
@ -234,15 +237,15 @@ export function InstallSheet() {
|
|||
animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
|
||||
exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
||||
transition={{ duration: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="absolute inset-x-0 bottom-0 mx-auto w-full rounded-t-[28px] border border-b-0 border-[var(--hairline)] bg-[var(--surface)] shadow-[0_-20px_60px_-28px_rgb(0_0_0/0.5)] sm:max-w-xl"
|
||||
className="absolute inset-x-0 bottom-0 mx-auto w-full rounded-t-[28px] border border-b-0 border-[var(--install-border)] bg-[var(--install-sheet)] shadow-[0_-20px_60px_-28px_rgb(0_0_0/0.5)] sm:max-w-xl"
|
||||
>
|
||||
<div className="thin-scroll max-h-[88dvh] overflow-y-auto px-5 pb-safe pt-2">
|
||||
<div className="thin-scroll max-h-[90dvh] overflow-y-auto px-5 pt-2 pb-[calc(24px+env(safe-area-inset-bottom))]">
|
||||
<div
|
||||
aria-hidden
|
||||
onPointerDown={(event) => dragControls.start(event)}
|
||||
className="mx-auto flex h-6 w-full cursor-grab touch-none items-center justify-center active:cursor-grabbing"
|
||||
>
|
||||
<span className="h-1.5 w-10 rounded-full bg-[var(--text-subtle)] opacity-40" />
|
||||
<span className="h-1 w-9 rounded-full bg-[var(--text-subtle)] opacity-40" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
|
|
@ -265,10 +268,10 @@ export function InstallSheet() {
|
|||
</div>
|
||||
|
||||
{/* app card */}
|
||||
<div className="mt-1 flex items-center gap-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
|
||||
<div className="mt-1 flex items-center gap-3 rounded-2xl border border-[var(--install-border)] bg-[var(--install-card)] p-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className="grid size-11 shrink-0 place-items-center rounded-xl bg-[var(--text)] text-[var(--page)]"
|
||||
className="grid size-11 shrink-0 place-items-center rounded-xl bg-[var(--text)] text-[var(--page)] dark:border dark:border-[var(--install-border)] dark:bg-[var(--install-chip)] dark:text-[var(--text)]"
|
||||
>
|
||||
<SnowflakeIcon className="size-5" />
|
||||
</span>
|
||||
|
|
@ -276,7 +279,7 @@ export function InstallSheet() {
|
|||
<span className="block text-[15px] font-semibold leading-tight text-[var(--text)]">
|
||||
Freezmo
|
||||
</span>
|
||||
<span className="block truncate text-[12.5px] text-[var(--text-subtle)]">
|
||||
<span className="block truncate text-[13px] text-[var(--text-subtle)]">
|
||||
{domain}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -302,22 +305,32 @@ export function InstallSheet() {
|
|||
) : null}
|
||||
|
||||
{showNativePrompt ? (
|
||||
<p className="mt-4 text-center text-[11.5px] text-[var(--text-subtle)]">
|
||||
<p className="mt-4 text-center text-[12px] text-[var(--text-subtle)]">
|
||||
Or install manually:
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<ol className={cn("space-y-3", showNativePrompt ? "mt-3" : "mt-4")}>
|
||||
<ol className={cn("space-y-4", showNativePrompt ? "mt-3" : "mt-5")}>
|
||||
{steps.map((step, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-start gap-2.5 text-[13.5px] leading-relaxed text-[var(--text-muted)]"
|
||||
>
|
||||
<span className="font-bold tabular-nums text-[var(--text)]">{index + 1}.</span>
|
||||
<span className="min-w-0 flex-1">{step}</span>
|
||||
<li key={index} className="grid grid-cols-[24px_1fr] items-start gap-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className="grid size-6 place-items-center rounded-full border border-[var(--install-border)] text-[11.5px] font-medium tabular-nums text-[var(--text-subtle)]"
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-[16px] leading-6 text-[var(--text-muted)]">{step}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={close}
|
||||
className="mt-6 w-full rounded-[14px] py-3 text-center text-[15px] font-medium text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
Maybe later
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
|
@ -330,17 +343,30 @@ export function InstallSheet() {
|
|||
/** Small pill for a UI element the user has to tap. */
|
||||
function Chip({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
||||
return (
|
||||
<span className="mx-0.5 inline-flex translate-y-[1px] items-center gap-1 rounded-full border border-[var(--field-border)] bg-[var(--field)] px-2 py-[3px] text-[12px] font-semibold leading-none text-[var(--text)]">
|
||||
<span className="mx-0.5 inline-flex items-center gap-1.5 rounded-full border border-[var(--install-border)] bg-[var(--install-chip)] px-2.5 py-1 align-middle text-[16px] font-medium leading-none text-[var(--text)]">
|
||||
<span aria-hidden>{icon}</span>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** The one coloured element: the final confirmation button. */
|
||||
/** Icon-only pill, for buttons that are just a glyph (the ⋯ menu). */
|
||||
function IconChip({ icon, label }: { icon: React.ReactNode; label: string }) {
|
||||
return (
|
||||
<span
|
||||
role="img"
|
||||
aria-label={label}
|
||||
className="mx-0.5 inline-flex items-center rounded-full border border-[var(--install-border)] bg-[var(--install-chip)] px-2.5 py-1 align-middle text-[var(--text)]"
|
||||
>
|
||||
<span aria-hidden>{icon}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** The one coloured element: the final confirmation button (iOS blue). */
|
||||
function AccentPill({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
||||
return (
|
||||
<span className="mx-0.5 inline-flex translate-y-[1px] items-center gap-1 rounded-full bg-accent-600 px-2.5 py-[3px] text-[12px] font-semibold leading-none text-white">
|
||||
<span className="mx-0.5 inline-flex items-center gap-1.5 rounded-full bg-[#007AFF] px-3 py-1 align-middle text-[16px] font-medium leading-none text-white dark:bg-[#0A84FF]">
|
||||
<span aria-hidden>{icon}</span>
|
||||
{children}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -307,13 +307,10 @@ export function EllipsisIcon({ className }: IconProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export function MoreIcon({ className }: IconProps) {
|
||||
export function ChevronDownIcon({ className }: IconProps) {
|
||||
return (
|
||||
<Svg className={className}>
|
||||
<rect x="3.5" y="3.5" width="17" height="17" rx="5" />
|
||||
<circle cx="8.4" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="15.6" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
<path d="m6 9.5 6 6 6-6" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue