diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index d96c9df02..dc95ecb28 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -59,22 +59,72 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => { const CHAT_BG: Record = { none: {}, - dots: { - backgroundImage: 'radial-gradient(circle, rgba(152,0,0,0.18) 1px, transparent 1px)', - backgroundSize: '22px 22px', + + // Dark navy with light-blue grid lines — technical/clean + blueprint: { + backgroundColor: '#0a1628', + backgroundImage: [ + 'linear-gradient(rgba(100,149,237,0.14) 1px, transparent 1px)', + 'linear-gradient(90deg, rgba(100,149,237,0.14) 1px, transparent 1px)', + 'linear-gradient(rgba(100,149,237,0.05) 1px, transparent 1px)', + 'linear-gradient(90deg, rgba(100,149,237,0.05) 1px, transparent 1px)', + ].join(','), + backgroundSize: '80px 80px, 80px 80px, 16px 16px, 16px 16px', }, - grid: { - backgroundImage: - 'linear-gradient(rgba(152,0,0,0.09) 1px, transparent 1px),' + - 'linear-gradient(90deg, rgba(152,0,0,0.09) 1px, transparent 1px)', - backgroundSize: '28px 28px', + + // Near-black diagonal weave — carbon fiber look + carbon: { + backgroundColor: '#0e0e0e', + backgroundImage: [ + 'repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 0, transparent 50%)', + 'repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 0, transparent 50%)', + ].join(','), + backgroundSize: '8px 8px', }, - diagonal: { - backgroundImage: - 'repeating-linear-gradient(45deg, rgba(152,0,0,0.07) 0px, rgba(152,0,0,0.07) 1px, transparent 1px, transparent 16px)', + + // Deep space with three offset star layers + stars: { + backgroundColor: '#050510', + backgroundImage: [ + 'radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)', + 'radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px)', + 'radial-gradient(circle, rgba(200,200,255,0.3) 1px, transparent 1px)', + ].join(','), + backgroundSize: '130px 130px, 190px 190px, 260px 260px', + backgroundPosition: '0 0, 65px 32px, 32px 97px', + }, + + // Concentric rings from three focal points — map contour effect + topographic: { + backgroundColor: '#0f0f17', + backgroundImage: [ + 'repeating-radial-gradient(circle at 20% 20%, transparent 0, transparent 30px, rgba(152,0,0,0.07) 31px, transparent 32px)', + 'repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 25px, rgba(100,100,200,0.06) 26px, transparent 27px)', + 'repeating-radial-gradient(circle at 50% 10%, transparent 0, transparent 45px, rgba(152,0,0,0.04) 46px, transparent 47px)', + ].join(','), + }, + + // 60°/120° diagonal stripe pair — classic herringbone weave + herringbone: { + backgroundColor: '#111118', + backgroundImage: [ + 'repeating-linear-gradient(60deg, rgba(180,160,210,0.07) 0, rgba(180,160,210,0.07) 1px, transparent 0, transparent 50%)', + 'repeating-linear-gradient(120deg, rgba(180,160,210,0.07) 0, rgba(180,160,210,0.07) 1px, transparent 0, transparent 50%)', + ].join(','), + backgroundSize: '20px 36px', + }, + + // Fine white grid with larger subdivision — graph paper + crosshatch: { + backgroundColor: '#0f0f0f', + backgroundImage: [ + 'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)', + 'linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)', + 'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px)', + 'linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)', + ].join(','), + backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px', }, - 'solid-navy': { backgroundColor: '#0a0e1a' }, - 'solid-void': { backgroundColor: '#070709' }, }; export function RoomView({ eventId }: { eventId?: string }) { diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx index 1cda4b1e5..52c8c0265 100644 --- a/src/app/features/settings/general/General.tsx +++ b/src/app/features/settings/general/General.tsx @@ -761,11 +761,12 @@ function Editor() { const BG_OPTIONS: { value: ChatBackground; label: string }[] = [ { value: 'none', label: 'None' }, - { value: 'dots', label: 'Dots' }, - { value: 'grid', label: 'Grid' }, - { value: 'diagonal', label: 'Diagonal' }, - { value: 'solid-navy', label: 'Navy' }, - { value: 'solid-void', label: 'Void' }, + { value: 'blueprint', label: 'Blueprint' }, + { value: 'carbon', label: 'Carbon' }, + { value: 'stars', label: 'Stars' }, + { value: 'topographic', label: 'Topographic' }, + { value: 'herringbone', label: 'Herringbone' }, + { value: 'crosshatch', label: 'Crosshatch' }, ]; function SelectChatBackground() { diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index a15d5ba8a..1ce83bae1 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -3,7 +3,7 @@ import { atom } from 'jotai'; const STORAGE_KEY = 'settings'; export type DateFormat = 'D MMM YYYY' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD' | ''; export type MessageSpacing = '0' | '100' | '200' | '300' | '400' | '500'; -export type ChatBackground = 'none' | 'dots' | 'grid' | 'diagonal' | 'solid-navy' | 'solid-void'; +export type ChatBackground = 'none' | 'blueprint' | 'carbon' | 'stars' | 'topographic' | 'herringbone' | 'crosshatch'; export enum MessageLayout { Modern = 0, Compact = 1,