Albert
d7f5988a4f
Replaced all hardcoded colors and JS template literal styling with Mantine's canonical approach using CSS modules and CSS variables. This ensures colors transition programmatically without JS interpolation. - Updated globals.css to use data-mantine-color-scheme selectors - Created CSS modules for all navigation components and chat page - Removed useComputedColorScheme/useMantineTheme hooks where not needed - Fixed body background to properly adapt to light/dark mode - All borders, backgrounds, and colors now use CSS variables - Maintained full theme support across all components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
35 lines
702 B
TypeScript
35 lines
702 B
TypeScript
'use client';
|
|
|
|
/**
|
|
* Mobile Header
|
|
*
|
|
* Fixed header for mobile devices showing the Ponderants logo.
|
|
*/
|
|
|
|
import { Group, Title, Paper } from '@mantine/core';
|
|
import styles from './MobileHeader.module.css';
|
|
|
|
export function MobileHeader() {
|
|
return (
|
|
<Paper
|
|
withBorder
|
|
p="sm"
|
|
radius={0}
|
|
className={styles.header}
|
|
>
|
|
<Group gap="md" align="center" wrap="nowrap">
|
|
<img
|
|
src="/logo.svg"
|
|
alt="Ponderants logo"
|
|
width={32}
|
|
height={32}
|
|
style={{ flexShrink: 0, display: 'block' }}
|
|
/>
|
|
<Title order={3} style={{ margin: 0 }}>
|
|
Ponderants
|
|
</Title>
|
|
</Group>
|
|
</Paper>
|
|
);
|
|
}
|