Add Lotus Terminal Mode + fix all remaining Cinny branding

- New: Lotus Terminal Mode toggle in Appearance settings
  - Red phosphor color scheme (bg #0a0000, primary #ff3300, accent #00dd66)
  - Monospace font override (JetBrains Mono / Fira Code / Cascadia Code)
  - Retro CRT scanline overlay via CSS pseudo-element
  - Wired into ThemeManager with dedicated lotusTerminalBodyClass
- Branding: replace all user-visible Cinny references with Lotus Chat
  - WelcomePage, AuthLayout, SplashScreen, index.html meta tags
  - Device display names in login/register/token flows
  - System notification brand field
  - (Preserved internal Matrix protocol CinnySpaces event type)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-05-13 22:22:06 -04:00
parent 5f0aa5c887
commit f3ec49fe88
14 changed files with 165 additions and 19 deletions
@@ -21,7 +21,7 @@ export function SplashScreen({ children }: SplashScreenProps) {
justifyContent="Center"
>
<Text size="H2" align="Center">
Cinny
Lotus Chat
</Text>
</Box>
</Box>
@@ -310,6 +310,7 @@ function Appearance() {
const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
const [perMessageProfiles, setPerMessageProfiles] = useSetting(settingsAtom, 'perMessageProfiles');
const [lotusTerminal, setLotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
return (
<Box direction="Column" gap="100">
@@ -371,6 +372,13 @@ function Appearance() {
after={<Switch variant="Primary" value={perMessageProfiles} onChange={setPerMessageProfiles} />}
/>
</SequenceCard>
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
<SettingTile
title="Lotus Terminal Mode"
description="Red phosphor color scheme, monospace font, and retro CRT scanlines. A full visual overhaul."
after={<Switch variant="Primary" value={lotusTerminal} onChange={setLotusTerminal} />}
/>
</SequenceCard>
</Box>
);
}
@@ -27,7 +27,7 @@ function EmailNotification() {
device_display_name: email,
lang: 'en',
data: {
brand: 'Cinny',
brand: 'Lotus Chat',
},
append: true,
});
+6 -1
View File
@@ -1,7 +1,7 @@
import { lightTheme } from 'folds';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
import { butterTheme, darkTheme, lotusTerminalTheme, silverTheme } from '../../colors.css';
import { settingsAtom } from '../state/settings';
import { useSetting } from '../state/hooks/settings';
@@ -37,6 +37,11 @@ export const ButterTheme: Theme = {
kind: ThemeKind.Dark,
classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
};
export const LotusTerminalTheme: Theme = {
id: 'lotus-terminal-theme',
kind: ThemeKind.Dark,
classNames: ['lotus-terminal-theme', lotusTerminalTheme, onDarkFontWeight, 'prism-dark'],
};
export const useThemes = (): Theme[] => {
const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+12 -6
View File
@@ -3,11 +3,13 @@ import { configClass, varsClass } from 'folds';
import {
DarkTheme,
LightTheme,
LotusTerminalTheme,
ThemeContextProvider,
ThemeKind,
useActiveTheme,
useSystemThemeKind,
} from '../hooks/useTheme';
import { lotusTerminalBodyClass } from '../../lotus-terminal.css';
import { useSetting } from '../state/hooks/settings';
import { settingsAtom } from '../state/settings';
@@ -31,19 +33,23 @@ export function UnAuthRouteThemeManager() {
export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
const activeTheme = useActiveTheme();
const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
const effectiveTheme = lotusTerminal ? LotusTerminalTheme : activeTheme;
useEffect(() => {
document.body.className = '';
document.body.classList.add(configClass, varsClass);
document.body.classList.add(...activeTheme.classNames);
if (monochromeMode) {
document.body.classList.add(...effectiveTheme.classNames);
if (lotusTerminal) {
document.body.classList.add(lotusTerminalBodyClass);
}
if (monochromeMode && !lotusTerminal) {
document.body.style.filter = 'grayscale(1)';
} else {
document.body.style.filter = '';
}
}, [activeTheme, monochromeMode]);
}, [effectiveTheme, monochromeMode, lotusTerminal]);
return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
return <ThemeContextProvider value={effectiveTheme}>{children}</ThemeContextProvider>;
}
+1 -1
View File
@@ -135,7 +135,7 @@ export function AuthLayout() {
<Header className={css.AuthHeader} size="600" variant="Surface">
<Box grow="Yes" direction="Row" gap="300" alignItems="Center">
<img className={css.AuthLogo} src={LotusLogo} alt="Lotus Chat Logo" />
<Text size="H3">Cinny</Text>
<Text size="H3">Lotus Chat</Text>
</Box>
</Header>
<Box className={css.AuthCardContent} direction="Column">
@@ -133,7 +133,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
user: username,
},
password,
initial_device_display_name: 'Cinny Web',
initial_device_display_name: 'Lotus Chat Web',
});
};
@@ -151,7 +151,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
user: mxIdUsername,
},
password,
initial_device_display_name: 'Cinny Web',
initial_device_display_name: 'Lotus Chat Web',
});
};
const handleEmailLogin = (email: string, password: string) => {
@@ -163,7 +163,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
address: email,
},
password,
initial_device_display_name: 'Cinny Web',
initial_device_display_name: 'Lotus Chat Web',
});
};
+1 -1
View File
@@ -57,7 +57,7 @@ export function TokenLogin({ token }: TokenLoginProps) {
startLogin(baseUrl, {
type: 'm.login.token',
token,
initial_device_display_name: 'Cinny Web',
initial_device_display_name: 'Lotus Chat Web',
});
}, [baseUrl, token, startLogin]);
@@ -109,7 +109,7 @@ function RegisterUIAFlow({
auth: authDict,
password,
username,
initial_device_display_name: 'Cinny Web',
initial_device_display_name: 'Lotus Chat Web',
});
},
[onRegister, formData]
@@ -250,7 +250,7 @@ export function PasswordRegisterForm({
auth: {
session: authData.session,
},
initial_device_display_name: 'Cinny Web',
initial_device_display_name: 'Lotus Chat Web',
});
};
+1 -1
View File
@@ -15,7 +15,7 @@ export function WelcomePage() {
<PageHeroSection>
<PageHero
icon={<img width="70" height="70" src={CinnySVG} alt="Lotus Chat Logo" />}
title="Welcome to Cinny"
title="Welcome to Lotus Chat"
subTitle={
<span>
Yet another matrix client.{' '}
+2
View File
@@ -42,6 +42,7 @@ export interface Settings {
dateFormatString: string;
developerTools: boolean;
lotusTerminal: boolean;
chatBackground: ChatBackground;
perMessageProfiles: boolean;
@@ -79,6 +80,7 @@ const defaultSettings: Settings = {
dateFormatString: 'D MMM YYYY',
developerTools: false,
lotusTerminal: false,
chatBackground: 'none',
perMessageProfiles: false,