heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ai-chat): give the privacy consent line a gold frame matching the WhatsApp bridge

Browse source
This commit is contained in:
heaven 2026-06-02 13:35:24 +03:00
parent d92f6dc1ca
commit 5f940af9f7
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app/features/bots/AiChatPrivacy.css.ts
View file

@ -1,6 +1,11 @@
import { style } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds'; import { color, config, toRem } from 'folds';
// DAWN `--amber` (stream-v2-dawn.jsx) — the "gold" accent the bridge widgets use for risk/notice
// callouts. folds has no amber token, and apps/widget-*/styles.css hardcode this same literal, so
// we match it here for the consent callout's gold frame.
const VOJO_GOLD = '#d4b88a';
// Centered privacy dialog — a fully self-styled card (NOT a folds modal recipe, whose fixed-rem // Centered privacy dialog — a fully self-styled card (NOT a folds modal recipe, whose fixed-rem
// sizing didn't give these caps and clipped the body in an earlier attempt). Owns its own surface, // sizing didn't give these caps and clipped the body in an earlier attempt). Owns its own surface,
// radius, border and shadow so the body fills the full width on every platform. Width caps at 520px // radius, border and shadow so the body fills the full width on every platform. Width caps at 520px
@ -94,17 +99,18 @@ export const SectionBody = style({
color: color.SurfaceVariant.OnContainer, color: color.SurfaceVariant.OnContainer,
}); });
// "Using it = OK with this" — the consent line gets a soft fleet-tinted card with a fleet rule so // "Using it = OK with this" — the consent line is the one binding sentence, so it gets the gold
// it reads as the one binding sentence without shouting. Matches the DAWN raised-surface vocabulary. // callout treatment the WhatsApp bridge uses for its ToS-risk notice (apps/widget-whatsapp
// `.section-warn-banner`): a full amber frame + faint amber wash + amber text.
export const Consent = style({ export const Consent = style({
margin: 0, margin: 0,
padding: config.space.S300, padding: `${toRem(12)} ${toRem(14)}`,
borderRadius: config.radii.R400, borderRadius: toRem(10),
backgroundColor: color.Surface.ContainerActive, border: `1px solid ${VOJO_GOLD}`,
borderLeft: `${toRem(3)} solid ${color.Primary.Main}`, backgroundColor: 'rgba(212, 184, 138, 0.1)',
fontSize: toRem(13), fontSize: toRem(13),
lineHeight: toRem(19), lineHeight: toRem(18),
color: color.Surface.OnContainer, color: VOJO_GOLD,
}); });
export const Links = style({ export const Links = style({