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