Skip to content

Commit 80470d7

Browse files
rohithandiquerohithandique
committed
added geist font & changed bg color
1 parent 56e9113 commit 80470d7

7 files changed

Lines changed: 342 additions & 307 deletions

File tree

‎package-lock.json‎

Lines changed: 285 additions & 152 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,41 @@
1111
"test": "vitest run --coverage"
1212
},
1313
"dependencies": {
14+
"@fontsource/geist": "^5.2.8",
15+
"@fontsource/geist-mono": "^5.2.7",
1416
"@mantine/core": "^8.3.10",
1517
"@mantine/hooks": "^8.3.10",
16-
"@tanstack/react-router": "^1.141.6",
17-
"@tanstack/react-router-devtools": "^1.141.6",
18+
"@tanstack/react-router": "^1.143.3",
19+
"@tanstack/react-router-devtools": "^1.143.3",
1820
"react": "^19.2.3",
1921
"react-dom": "^19.2.3"
2022
},
2123
"devDependencies": {
2224
"@eslint/js": "^9.39.2",
23-
"@tanstack/router-plugin": "^1.141.7",
25+
"@tanstack/router-plugin": "^1.143.3",
2426
"@testing-library/jest-dom": "^6.9.1",
2527
"@testing-library/react": "^16.3.1",
2628
"@types/node": "^25.0.3",
2729
"@types/react": "^19.2.7",
2830
"@types/react-dom": "^19.2.3",
2931
"@vitejs/plugin-react": "^5.1.2",
30-
"@vitest/coverage-v8": "^4.0.15",
32+
"@vitest/coverage-v8": "^4.0.16",
3133
"eslint": "^9.39.2",
3234
"eslint-config-prettier": "^10.1.8",
3335
"eslint-plugin-react-hooks": "^7.0.1",
34-
"eslint-plugin-react-refresh": "^0.4.25",
36+
"eslint-plugin-react-refresh": "^0.4.26",
3537
"globals": "^16.5.0",
3638
"jsdom": "^27.3.0",
3739
"postcss": "^8.5.6",
40+
"postcss-import": "^16.1.1",
3841
"postcss-preset-mantine": "^1.18.0",
3942
"postcss-simple-vars": "^7.0.1",
4043
"prettier": "3.7.4",
4144
"sonarqube-scanner": "^4.3.2",
4245
"typescript": "~5.9.3",
43-
"typescript-eslint": "^8.50.0",
46+
"typescript-eslint": "^8.50.1",
4447
"vite": "^7.3.0",
4548
"vite-plugin-svgr": "^4.5.0",
46-
"vitest": "^4.0.15"
49+
"vitest": "^4.0.16"
4750
}
4851
}

‎postcss.config.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
plugins: {
3+
'postcss-import': {},
34
'postcss-preset-mantine': {},
45
'postcss-simple-vars': {
56
variables: {

‎src/app/providers/with-mantine.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
1-
// src/app/providers/with-mantine.tsx
2-
import { MantineProvider } from '@mantine/core';
1+
import { createTheme, MantineProvider } from '@mantine/core';
32
import { ComponentType } from 'react';
3+
4+
import '@fontsource/geist';
5+
import '@fontsource/geist/600.css';
6+
import '@fontsource/geist-mono';
7+
48
import '@mantine/core/styles.css';
9+
import '@app/styles/index.css';
10+
11+
const theme = createTheme({
12+
fontFamily:
13+
'Geist, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
14+
fontFamilyMonospace: '"Geist Mono", Monaco, Courier, monospace',
15+
headings: {
16+
fontFamily: 'Geist, sans-serif',
17+
fontWeight: '600',
18+
},
19+
});
520

621
export const withMantine = (Component: ComponentType) => {
722
return (props: any) => (
8-
<MantineProvider defaultColorScheme="auto">
23+
<MantineProvider defaultColorScheme="dark" theme={theme}>
924
<Component {...props} />
1025
</MantineProvider>
1126
);

‎src/app/styles/index.css‎

Lines changed: 7 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,13 @@
11
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
2+
@mixin light-root {
3+
--mantine-color-body: #070707;
4+
}
155

16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
6+
@mixin dark-root {
7+
--mantine-color-body: #070707;
8+
}
239
}
2410

2511
body {
26-
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
31-
}
32-
33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
36-
}
37-
38-
button {
39-
border-radius: 8px;
40-
border: 1px solid transparent;
41-
padding: 0.6em 1.2em;
42-
font-size: 1em;
43-
font-weight: 500;
44-
font-family: inherit;
45-
background-color: #1a1a1a;
46-
cursor: pointer;
47-
transition: border-color 0.25s;
48-
}
49-
button:hover {
50-
border-color: #646cff;
51-
}
52-
button:focus,
53-
button:focus-visible {
54-
outline: 4px auto -webkit-focus-ring-color;
55-
}
56-
57-
@media (prefers-color-scheme: light) {
58-
:root {
59-
color: #213547;
60-
background-color: #ffffff;
61-
}
62-
a:hover {
63-
color: #747bff;
64-
}
65-
button {
66-
background-color: #f9f9f9;
67-
}
12+
background-color: var(--mantine-color-body);
6813
}

‎src/vite-env.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
/// <reference types="vite/client" />
22
/// <reference types="vite-plugin-svgr/client" />
3+
declare module '@fontsource/geist';
4+
declare module '@fontsource/geist/600.css';
5+
declare module '@fontsource/geist-mono';

‎src/widgets/header/ui/Header.tsx‎

Lines changed: 18 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,38 @@
1-
import {
2-
Box,
3-
Burger,
4-
Button,
5-
Divider,
6-
Drawer,
7-
Group,
8-
ScrollArea,
9-
rem,
10-
useMantineTheme,
11-
} from '@mantine/core';
12-
import { useDisclosure } from '@mantine/hooks';
1+
import { Box, Button, Flex, Group, rem, Text } from '@mantine/core';
132
import ReactLogo from '@/shared/assets/react.svg?react';
143

154
export function Header() {
16-
const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] =
17-
useDisclosure(false);
18-
const theme = useMantineTheme();
19-
20-
// Shared link styles to avoid repetition
21-
const linkStyles = {
22-
display: 'flex',
23-
alignItems: 'center',
24-
height: '100%',
25-
paddingLeft: theme.spacing.md,
26-
paddingRight: theme.spacing.md,
27-
textDecoration: 'none',
28-
fontWeight: 500,
29-
fontSize: theme.fontSizes.sm,
30-
color: 'light-dark(var(--mantine-color-black), var(--mantine-color-white))',
31-
borderRadius: theme.radius.sm,
32-
transition: 'background-color 100ms ease',
33-
};
34-
355
return (
366
<Box>
377
<header
388
style={{
399
height: rem(60),
4010
paddingLeft: 'var(--mantine-spacing-md)',
4111
paddingRight: 'var(--mantine-spacing-md)',
42-
borderBottom: `${rem(1)} solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))`,
12+
borderBottom: `${rem(1)} solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-3))`,
4313
}}
4414
>
4515
<Group justify="space-between" h="100%">
46-
<ReactLogo width={30} height={30} />
47-
48-
{/* Desktop Navigation */}
49-
<Group h="100%" gap={0} visibleFrom="sm">
50-
<Box component="a" href="#" style={linkStyles}>
51-
Home
52-
</Box>
53-
</Group>
54-
16+
<Flex
17+
mih={50}
18+
gap="md"
19+
justify="center"
20+
align="center"
21+
direction="row"
22+
wrap="wrap"
23+
>
24+
<ReactLogo
25+
width={25}
26+
height={25}
27+
style={{ filter: 'grayscale(1) brightness(0) invert(1)' }}
28+
/>
29+
<Text size="lg">Generic</Text>
30+
</Flex>
5531
<Group visibleFrom="sm">
56-
<Button variant="default">Log in</Button>
57-
<Button>Sign up</Button>
32+
<Button variant="default">Sign In</Button>
5833
</Group>
59-
60-
<Burger
61-
opened={drawerOpened}
62-
onClick={toggleDrawer}
63-
hiddenFrom="sm"
64-
/>
6534
</Group>
6635
</header>
67-
68-
<Drawer
69-
opened={drawerOpened}
70-
onClose={closeDrawer}
71-
size="100%"
72-
padding="md"
73-
title="Menu"
74-
hiddenFrom="sm"
75-
zIndex={1000000}
76-
>
77-
<ScrollArea h={`calc(100vh - ${rem(80)})`} mx="-md">
78-
<Divider my="sm" />
79-
80-
{/* Mobile Navigation */}
81-
<Box
82-
component="a"
83-
href="#"
84-
style={{
85-
...linkStyles,
86-
height: rem(42),
87-
width: '100%',
88-
}}
89-
>
90-
Home
91-
</Box>
92-
93-
<Divider my="sm" />
94-
95-
<Group justify="center" grow pb="xl" px="md">
96-
<Button variant="default">Log in</Button>
97-
<Button>Sign up</Button>
98-
</Group>
99-
</ScrollArea>
100-
</Drawer>
10136
</Box>
10237
);
10338
}

0 commit comments

Comments
 (0)