fix(ui): folds primitives for RouteError + PiP fullscreen button (native-cinny audit 5/N)
CI / Build & Quality Checks (push) Successful in 10m33s
CI / Trigger Desktop Build (push) Successful in 21s

- RouteError: raw <div>/<h2>/<p>/<button> (sans-serif, raw px) -> folds
  Box/Text/Button with config tokens.
- CallEmbedProvider PiP fullscreen control: raw <button> with ⊡/⛶ glyphs ->
  folds IconButton reusing the exported FullscreenIcon/ExitFullscreenIcon SVGs
  from Controls (consistent with the main fullscreen button). The intentional
  dark over-video scrim is kept.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-28 22:32:19 -04:00
parent 24d6460e4c
commit 349194e7e5
3 changed files with 28 additions and 41 deletions
+17 -27
View File
@@ -1,5 +1,6 @@
import React from 'react';
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
import { Box, Button, config, Text, toRem } from 'folds';
export function RouteError() {
const error = useRouteError();
@@ -11,33 +12,22 @@ export function RouteError() {
: 'An unexpected error occurred.';
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100dvh',
gap: '16px',
padding: '32px',
fontFamily: 'sans-serif',
}}
<Box
direction="Column"
alignItems="Center"
justifyContent="Center"
gap="400"
style={{ height: '100dvh', padding: config.space.S700 }}
>
<h2 style={{ margin: 0, fontSize: '1.25rem' }}>Something went wrong</h2>
<p style={{ margin: 0, opacity: 0.7, textAlign: 'center' }}>{message}</p>
<button
type="button"
onClick={() => window.location.reload()}
style={{
padding: '8px 20px',
borderRadius: '8px',
border: 'none',
cursor: 'pointer',
fontWeight: 600,
}}
>
Reload
</button>
</div>
<Text size="H3">Something went wrong</Text>
<Text size="T300" priority="300" style={{ textAlign: 'center', maxWidth: toRem(400) }}>
{message}
</Text>
<Button variant="Primary" onClick={() => window.location.reload()}>
<Text as="span" size="B400">
Reload
</Text>
</Button>
</Box>
);
}