Fix welcome logo, real hex grid, Matrix boot messages, deeper TDS coverage

- WelcomePage: use official Lotus.png instead of generated SVG
- Hex Grid background: proper pointy-top hexagons via SVG data URI (was
  just triangles from linear-gradient trick)
- Boot sequence: Matrix-specific messages (TLS cert, E2EE Olm/Megolm,
  cross-signing, media proxy, /help hint)
- Terminal mode CSS: nav right border, header bottom glow, kbd TDS key
  style, abbr cyan underline, time amber color, img hover cyan outline,
  explicit body color anchor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-05-13 22:52:33 -04:00
parent 893aa92b38
commit e8415e60b0
4 changed files with 71 additions and 21 deletions
+5 -13
View File
@@ -141,15 +141,11 @@ const DARK: Record<ChatBackground, CSSProperties> = {
backgroundPosition: '0 0, 0 0, 20px 20px',
},
// Isometric hex grid — cyan outlines
// True pointy-top hexagonal grid via SVG data URI
hexgrid: {
backgroundColor: '#060c14',
backgroundImage: [
'linear-gradient(60deg, rgba(0,212,255,0.07) 25%, transparent 25%, transparent 75%, rgba(0,212,255,0.07) 75%)',
'linear-gradient(120deg, rgba(0,212,255,0.07) 25%, transparent 25%, transparent 75%, rgba(0,212,255,0.07) 75%)',
].join(','),
backgroundSize: '30px 52px',
backgroundPosition: '0 0, 15px 26px',
backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C212%2C255%2C0.13%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
backgroundSize: '29px 50px',
},
};
@@ -273,12 +269,8 @@ const LIGHT: Record<ChatBackground, CSSProperties> = {
hexgrid: {
backgroundColor: '#f4f8ff',
backgroundImage: [
'linear-gradient(60deg, rgba(50,100,220,0.08) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.08) 75%)',
'linear-gradient(120deg, rgba(50,100,220,0.08) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.08) 75%)',
].join(','),
backgroundSize: '30px 52px',
backgroundPosition: '0 0, 15px 26px',
backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%2850%2C100%2C220%2C0.11%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
backgroundSize: '29px 50px',
},
};
+2 -2
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
import { Page, PageHero, PageHeroSection } from '../../components/page';
import CinnySVG from '../../../../public/res/svg/cinny.svg';
import LotusLogo from '../../../../public/res/Lotus.png';
export function WelcomePage() {
return (
@@ -14,7 +14,7 @@ export function WelcomePage() {
>
<PageHeroSection>
<PageHero
icon={<img width="70" height="70" src={CinnySVG} alt="Lotus Chat Logo" />}
icon={<img width="70" height="70" src={LotusLogo} alt="Lotus Chat" style={{ objectFit: "contain" }} />}
title="Welcome to Lotus Chat"
subTitle={
<span>