From 01781554a204cebf2bd808e608f14ab1e8e6e826 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 13 May 2026 22:52:33 -0400 Subject: [PATCH] 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 --- src/app/features/lotus/chatBackground.ts | 18 +++----- src/app/pages/client/WelcomePage.tsx | 4 +- src/lotus-boot.ts | 15 ++++--- src/lotus-terminal.css.ts | 55 ++++++++++++++++++++++++ 4 files changed, 71 insertions(+), 21 deletions(-) diff --git a/src/app/features/lotus/chatBackground.ts b/src/app/features/lotus/chatBackground.ts index 498d8bad9..3a0552c9b 100644 --- a/src/app/features/lotus/chatBackground.ts +++ b/src/app/features/lotus/chatBackground.ts @@ -141,15 +141,11 @@ const DARK: Record = { 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 = { 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', }, }; diff --git a/src/app/pages/client/WelcomePage.tsx b/src/app/pages/client/WelcomePage.tsx index 9ab0c5e10..2bd373069 100644 --- a/src/app/pages/client/WelcomePage.tsx +++ b/src/app/pages/client/WelcomePage.tsx @@ -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() { > } + icon={Lotus Chat} title="Welcome to Lotus Chat" subTitle={ diff --git a/src/lotus-boot.ts b/src/lotus-boot.ts index a5729478d..421a59901 100644 --- a/src/lotus-boot.ts +++ b/src/lotus-boot.ts @@ -1,20 +1,23 @@ const BOOT_MESSAGES = [ '╔════════════════════════════════════════════════════╗', '║ LOTUS CHAT — LOTUSGUILD PLATFORM ║', - '║ SECURE MATRIX CLIENT — TERMINAL MODE ACTIVE ║', + '║ SECURE MATRIX CLIENT — TERMINAL MODE ACTIVE ║', '╚════════════════════════════════════════════════════╝', '', '[ OK ] Kernel modules loaded', - '[ OK ] Filesystem mounted read-write', '[ OK ] Network interfaces configured', - '[ OK ] Matrix homeserver connection established', - '[ OK ] End-to-end encryption initialized', - '[ OK ] Authentication service started', - '[ OK ] Security headers applied', + '[ OK ] DNS resolution active', + '[ OK ] TLS certificate verified — matrix.lotusguild.org', + '[ OK ] Matrix homeserver connected', + '[ OK ] E2EE Olm/Megolm keys loaded', + '[ OK ] Cross-signing keys verified', '[ OK ] Room state synchronized', + '[ OK ] Media proxy available', + '[ OK ] Notification service active', '[ OK ] Terminal interface rendered', '', '> ALL SYSTEMS NOMINAL — LOTUS CHAT', + '> TYPE /help FOR COMMANDS', '', ]; diff --git a/src/lotus-terminal.css.ts b/src/lotus-terminal.css.ts index bfdb125da..47d4ce87f 100644 --- a/src/lotus-terminal.css.ts +++ b/src/lotus-terminal.css.ts @@ -297,3 +297,58 @@ globalStyle(`body.${lotusTerminalBodyClass} ul li::marker`, { globalStyle(`body.${lotusTerminalBodyClass} ol li::marker`, { color: '#FF6B00', }); + +// ── Structural elements — scoped TDS layout chrome ──────────────────────── + +// Sidebar/nav: subtle cyan right border +globalStyle(`body.${lotusTerminalBodyClass} nav`, { + borderRight: '1px solid rgba(0,212,255,0.10)', +}); + +// Page headers / toolbars: subtle bottom border glow +globalStyle(`body.${lotusTerminalBodyClass} header`, { + borderBottom: '1px solid rgba(0,212,255,0.14)', + boxShadow: '0 4px 24px rgba(0,0,0,0.55)', +}); + +// kbd — TDS terminal key style +globalStyle(`body.${lotusTerminalBodyClass} kbd`, { + fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', monospace", + fontSize: '0.75em', + background: '#0d1520', + border: '1px solid rgba(0,212,255,0.35)', + borderBottom: '2px solid rgba(0,212,255,0.50)', + borderRadius: '3px', + padding: '0.1em 0.45em', + color: '#00D4FF', + textShadow: '0 0 4px rgba(0,212,255,0.4)', + boxShadow: '0 1px 3px rgba(0,0,0,0.6)', +}); + +// Tooltip / title popups: if browser renders them, style if possible +globalStyle(`body.${lotusTerminalBodyClass} [title]`, { + textDecoration: 'underline dotted rgba(0,212,255,0.35)', + cursor: 'help', +}); + +// abbr +globalStyle(`body.${lotusTerminalBodyClass} abbr[title]`, { + textDecoration: 'underline dotted #00D4FF', +}); + +// time elements — amber muted +globalStyle(`body.${lotusTerminalBodyClass} time`, { + color: '#7fa3bf', + fontSize: '0.78em', +}); + +// Images: cyan border on hover +globalStyle(`body.${lotusTerminalBodyClass} img:hover`, { + outline: '1px solid rgba(0,212,255,0.35)', + boxShadow: '0 0 12px rgba(0,212,255,0.12)', +}); + +// Ensure body text color is correct regardless of vanilla-extract theme loading order +globalStyle(`body.${lotusTerminalBodyClass}`, { + color: '#c4d9ee', +});