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:
@@ -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,
|
||||
});
|
||||
|
||||
@@ -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], []);
|
||||
|
||||
@@ -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>;
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -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',
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -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.{' '}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user