craig/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.module.css
View File

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

3
frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx
View File

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

2
frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx
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 { GithubIcon } from '@mantinex/dev-icons';
import classes from './HeroTitle.module.css'; import classes from './HeroTitle.module.css';