Albert
64d5d5d8c0
Integrate Mantine UI library and configure grayscale dark theme: - Created postcss.config.mjs with Mantine preset and breakpoints - Created app/theme.ts with custom 10-shade grayscale palette - Configured dark mode enforcement (forceColorScheme) - Set default component props for consistent styling: - Buttons: filled variant, gray color, xl radius - Paper: border, shadow, md radius, gray background - TextInput/Textarea: filled variant, rounded radius - Updated app/globals.css to import Mantine core styles - Updated app/layout.tsx with MantineProvider and ColorSchemeScript - Updated app/page.tsx to use Mantine components (Center, Paper, Stack, Title, Button) Theme achieves the "minimal, grayscale, unstyled" aesthetic with: - 10-shade custom gray palette (ponderGray) - Dark mode enforced via forceColorScheme - Darkest gray background (#181a1d) - Lightest gray text (#e9ecef) - Consistent rounded corners and spacing Tests: Verified Mantine theme applied correctly with rounded button corners and Paper component with border Status: ✓ 2 tests passed (8.4s, 7.1s) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
22 lines
731 B
TypeScript
22 lines
731 B
TypeScript
import { test } from 'magnitude-test';
|
|
|
|
test('Mantine theme is applied correctly', async (agent) => {
|
|
// Act: Navigate to the homepage
|
|
await agent.act('Navigate to the homepage');
|
|
|
|
// Check: Verify the Mantine components are rendered
|
|
await agent.check('The text "Ponderants" is visible as a title');
|
|
await agent.check('A "Test Button" is visible on the screen');
|
|
|
|
// Check: Verify the theme is applied.
|
|
// We check that the button has rounded corners as defined in our theme
|
|
await agent.check(
|
|
'The "Test Button" has rounded corners'
|
|
);
|
|
|
|
// Check: Verify the Paper component is rendered with its themed styles
|
|
await agent.check(
|
|
'The page content is inside a "Paper" component with a border'
|
|
);
|
|
});
|