style upgrades

src/features/core/components/header.tsx

@@ -1,19 +1,29 @@
-import { Title, AppShell, Flex, Box, Paper } from "@mantine/core";
+import { Title, AppShell, Flex } from "@mantine/core";
 import { HeaderConfig } from "../types/header-config";
 import BackButton from "./back-button";
 
-interface HeaderProps extends HeaderConfig {}
+interface HeaderProps extends HeaderConfig {
+  elevated?: boolean;
+}
 
-const Header = ({ collapsed, title, withBackButton }: HeaderProps) => {
+const Header = ({ collapsed, title, withBackButton, elevated }: HeaderProps) => {
   return (
     <AppShell.Header
       id='app-header'
       display={collapsed ? 'none' : 'flex'}
-      style={{ alignItems: 'center', justifyContent: 'center' }}
+      withBorder={false}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderBottom: `1px solid ${elevated ? 'var(--app-shell-border-color, var(--mantine-color-default-border))' : 'transparent'}`,
+        transition: 'border-color 200ms ease-out',
+      }}
     >
       { withBackButton && <BackButton /> }
       <Flex justify='center' px='md' mt={8}>
-        <Title order={1}>{title?.toLocaleUpperCase()}</Title>
+        <Title order={1} lts='0.08em' style={{ userSelect: 'none' }}>
+          {title?.toLocaleUpperCase()}
+        </Title>
       </Flex>
     </AppShell.Header>
   );