Update HeaderSimple and HeroTitle components: modify styles for header background and borders, streamline imports, and enhance color scheme for improved visual consistency.

This commit is contained in:
Craig
2025-04-15 15:52:26 +01:00
parent 1e47e4d892
commit 9fa0d047eb
3 changed files with 7 additions and 8 deletions

View File

@@ -1,7 +1,7 @@
.header {
height: 56px;
background-color: var(--mantine-color-body);
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
background-color: var(--mantine-other-headerBgColor);
border-bottom: 1px solid var(--mantine-other-headerBorderColor);
}
.inner {
@@ -17,16 +17,16 @@
padding: 8px 12px;
border-radius: var(--mantine-radius-sm);
text-decoration: none;
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
color: light-dark(var(--mantine-color-brand-gray-7), var(--mantine-color-brand-gray-0));
font-size: var(--mantine-font-size-sm);
font-weight: 500;
@mixin hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
background-color: light-dark(var(--mantine-color-brand-gray-1), var(--mantine-color-brand-gray-8));
}
[data-mantine-color-scheme] &[data-active] {
background-color: var(--mantine-color-blue-filled);
background-color: var(--mantine-other-navigationActiveColor);
color: var(--mantine-color-white);
}
}

View File

@@ -1,5 +1,4 @@
import { useState } from 'react';
import { Burger, Container, Group, Anchor } from '@mantine/core';
import { Anchor, Burger, Container, Group } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { MantineLogo } from '@mantinex/mantine-logo';
import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';

View File

@@ -1,4 +1,4 @@
import { Container, Group, Text } from '@mantine/core';
import { Container, Text } from '@mantine/core';
// import { GithubIcon } from '@mantinex/dev-icons';
import classes from './HeroTitle.module.css';