feat: Update Mantine

apptension · Aug 28, 2024 · 3325fa1 · 3325fa1
1 parent 903829f
commit 3325fa1
Showing 43 changed files with 1,145 additions and 679 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,2 @@
+.next
+out
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,28 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "custom-property-pattern": null,
+    "selector-class-pattern": null,
+    "scss/no-duplicate-mixins": null,
+    "declaration-empty-line-before": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "alpha-value-notation": null,
+    "custom-property-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "color-function-notation": null,
+    "length-zero-no-unit": null,
+    "selector-not-notation": null,
+    "no-descending-specificity": null,
+    "comment-empty-line-before": null,
+    "scss/at-mixin-pattern": null,
+    "scss/at-rule-no-unknown": null,
+    "value-keyword-case": null,
+    "media-feature-range-notation": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}
diff --git a/apps/app/.eslintrc.json b/apps/app/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:react/recommended", "plugin:@next/next/recommended", "../../.eslintrc.json"],
+  "extends": ["mantine", "plugin:react/recommended", "plugin:@next/next/recommended", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*", "node_modules/**/*"],
   "plugins": ["react-hooks", "formatjs", "testing-library"],
   "rules": {
@@ -29,6 +29,10 @@
     },
     {
       "files": "*.{ts,tsx}",
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": "./tsconfig.base.json"
+      },
       "rules": {
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/ban-ts-comment": "off",

diff --git a/apps/app/.stylelintignore b/apps/app/.stylelintignore
@@ -0,0 +1,2 @@
+.next
+out
diff --git a/apps/app/.stylelintrc.json b/apps/app/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["../../.stylelintrc.json"]
+}
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
@@ -6,6 +6,7 @@ const nextConfig = {
   transpilePackages: ['@alp/graphql-api', '@alp/api-client', '@alp/core', 'ramda'],
   experimental: {
     serverComponentsExternalPackages: ['typeorm'],
+    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
   },
   webpack: (config, { isServer }) => {
     // fix for: Can't resolve 'pg-native' issue

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -6,7 +6,8 @@
     "dev": "pnpm nx serve:app",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint && npm run lint:stylelint",
+    "lint:stylelint": "stylelint '**/*.css' --cache",
     "extract-intl": "formatjs extract 'src/**/!(*.d).(js|jsx|ts|tsx)' '../../packages/core/src/**/!(*.d).(js|jsx|ts|tsx)' --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file ../../packages/core/src/translations/en.json --ignore src/tests/mocks/**",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -25,8 +26,8 @@
     "@emotion/server": "^11.11.0",
     "@formatjs/intl-localematcher": "^0.4.2",
     "@heroicons/react": "^2.0.17",
-    "@mantine/next": "^6.0.11",
-    "@mantine/notifications": "^6.0.19",
+    "@mantine/next": "^6.0.21",
+    "@mantine/notifications": "^7.10.1",
     "negotiator": "^0.6.3",
     "react-hook-form": "^7.43.9",
     "sharp": "^0.32.6"
@@ -36,6 +37,9 @@
     "@next/eslint-plugin-next": "^13.4.19",
     "@storybook/cli": "^7.4.5",
     "@types/negotiator": "^0.6.1",
-    "eslint-config-next": "13.4.19"
+    "eslint-config-next": "13.4.19",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1"
   }
 }
diff --git a/apps/app/postcss.config.cjs b/apps/app/postcss.config.cjs
@@ -0,0 +1,3 @@
+const main = require('../../postcss.config.cjs');
+
+module.exports = main;
diff --git a/apps/app/src/app/[lang]/app/dashboard.module.css b/apps/app/src/app/[lang]/app/dashboard.module.css
@@ -0,0 +1,3 @@
+.text {
+  color: var(--mantine-colors-gray-7);
+}
diff --git a/apps/app/src/app/[lang]/app/dashboard.styles.ts b/apps/app/src/app/[lang]/app/dashboard.styles.ts
diff --git a/apps/app/src/app/[lang]/app/dashboard.tsx b/apps/app/src/app/[lang]/app/dashboard.tsx
@@ -3,10 +3,9 @@
 import { Text } from '@mantine/core';
 import { FormattedMessage } from 'react-intl';
 
-import { useStyles } from './dashboard.styles';
+import classes from './dashboard.module.css';
 
 export function Dashboard() {
-  const { classes } = useStyles();
   return (
     <div>
       <Text className={classes.text}>

diff --git a/apps/app/src/app/[lang]/app/layout.tsx b/apps/app/src/app/[lang]/app/layout.tsx
@@ -1,23 +1,29 @@
 'use client';
 
-import { AppShell } from '@mantine/core';
+import { AppShell, rem } from '@mantine/core';
 import { ReactNode, useState } from 'react';
 
 import { Header, Navbar } from '@app/components';
 
+const HEADER_HEIGHT = rem(60);
+
 export default function AppLayout({ children }: { children: ReactNode }) {
   const [opened, setOpened] = useState(false);
 
   return (
     <AppShell
-      navbar={<Navbar opened={opened} />}
-      navbarOffsetBreakpoint="sm"
-      header={<Header opened={opened} toggleOpen={() => setOpened(!opened)} />}
-      styles={(theme) => ({
-        main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.white },
-      })}
+      header={{
+        height: HEADER_HEIGHT,
+      }}
+      navbar={{
+        width: 300,
+        breakpoint: 'sm',
+        collapsed: { mobile: !opened },
+      }}
     >
-      {children}
+      <Header opened={opened} toggleOpen={() => setOpened(!opened)} />
+      <Navbar opened={opened} />
+      <AppShell.Main>{children}</AppShell.Main>
     </AppShell>
   );
 }
diff --git a/apps/app/src/app/[lang]/layout.tsx b/apps/app/src/app/[lang]/layout.tsx
@@ -1,10 +1,10 @@
-import { ColorScheme } from '@mantine/core';
+import { ColorSchemeScript } from '@mantine/core';
+import '@mantine/core/styles.css';
 import { Metadata, Viewport } from 'next';
 import { getServerSession } from 'next-auth';
-import { cookies, headers } from 'next/headers';
+import { headers } from 'next/headers';
 
 import { Locale, i18n } from '@alp/core/config/i18n';
-import { COLOR_SCHEME_COOKIE_NAME } from '@alp/core/providers/mantineProvider/MantineProvider.const';
 
 import { authOptions } from '@app/config/auth';
 import { AppProviders } from '@app/providers/appProviders';
@@ -29,18 +29,19 @@ export default async function Root({ children, params }: { children: React.React
   const authHeaders = {
     COOKIE: headers().get('COOKIE') || '',
   };
-  const cookieStore = cookies();
-  const colorSchemeValue = cookieStore.get(COLOR_SCHEME_COOKIE_NAME);
   return (
     <html lang={params.lang}>
+      <head>
+        <ColorSchemeScript />
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
+      </head>
       <body>
         <AppProviders
           session={session}
           apolloClientOpts={{
             authHeaders,
           }}
           lang={params.lang}
-          defaultColorScheme={colorSchemeValue ? (colorSchemeValue.value as ColorScheme) : undefined}
         >
           {children}
         </AppProviders>

diff --git a/apps/app/src/components/header/header.component.tsx b/apps/app/src/components/header/header.component.tsx
@@ -1,12 +1,4 @@
-import {
-  Burger,
-  Flex,
-  Header as HeaderBase,
-  MediaQuery,
-  rem,
-  useMantineColorScheme,
-  useMantineTheme,
-} from '@mantine/core';
+import { AppShell, Burger, Flex, Image as MantineImage, useMantineTheme } from '@mantine/core';
 import Image from 'next/image';
 
 import { LanguageSwitch, ThemeToggler } from '@alp/core/components';
@@ -19,32 +11,29 @@ export interface MobileHeaderProps {
   toggleOpen: () => void;
 }
 
-export const HEADER_HEIGHT = rem(60);
-
 export function Header({ opened, toggleOpen }: MobileHeaderProps) {
   const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme();
   return (
-    <HeaderBase w="100%" height={HEADER_HEIGHT} p="md">
+    <AppShell.Header w="100%" p="md">
       <Flex align="center" h="100%" w="100%" justify="space-between">
         <>
-          <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-            <Burger
-              opened={opened}
-              onClick={toggleOpen}
-              size="sm"
-              color={theme.colors.gray[6]}
-              mr="xl"
-              data-testid="toggle-button"
-            />
-          </MediaQuery>
-          <Image src={colorScheme === 'dark' ? LogoDark : LogoLight} alt="Apptension" height={28} />
+          <Burger
+            hiddenFrom="sm"
+            opened={opened}
+            onClick={toggleOpen}
+            size="sm"
+            color={theme.colors.gray[6]}
+            mr="xl"
+            data-testid="toggle-button"
+          />
+          <MantineImage component={Image} src={LogoLight} alt="Apptension" height={28} darkHidden />
+          <MantineImage component={Image} src={LogoDark} alt="Apptension" height={28} lightHidden />
         </>
         <Flex align="center" h="100%" gap="md">
           <ThemeToggler />
           <LanguageSwitch />
         </Flex>
       </Flex>
-    </HeaderBase>
+    </AppShell.Header>
   );
 }
diff --git a/apps/app/src/components/homepage/features/features.component.tsx b/apps/app/src/components/homepage/features/features.component.tsx
@@ -3,7 +3,7 @@
 import { Container, SimpleGrid, Text, Title } from '@mantine/core';
 
 import { Feature, FeatureProps } from './feature.component';
-import { useStyles } from './features.styles';
+import classes from './features.module.css';
 
 export const FEATURES_ANCHOR_ID = 'features';
 
@@ -14,7 +14,6 @@ interface FeaturesGridProps {
 }
 
 export function Features({ title, description, data }: FeaturesGridProps) {
-  const { classes } = useStyles();
   const features = data.map((feature, index) => <Feature {...feature} key={index} />);
 
   return (

diff --git a/apps/app/src/components/homepage/features/features.module.css b/apps/app/src/components/homepage/features/features.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+  padding-top: calc(var(--mantine-spacing-xl) * 4);
+  padding-bottom: calc(var(--mantine-spacing-xl) * 4);
+}
+
+.title {
+    font-family: "Greycliff CF", var(--mantine-font-family);
+    font-weight: 900;
+    margin-bottom: var(--mantine-spacing-md);
+    text-align: center;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        font-size: rem(28px);
+        text-align: left;
+    }
+}
+
+
+.description {
+  font-family: "Greycliff CF", var(--mantine-font-family);
+  text-align: center;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        text-align: left;
+    }
+}
+
diff --git a/apps/app/src/components/homepage/features/features.styles.tsx b/apps/app/src/components/homepage/features/features.styles.tsx
diff --git a/apps/app/src/components/homepage/footer/footer.component.tsx b/apps/app/src/components/homepage/footer/footer.component.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 
 import LogoDark from '../../../../public/logo-dark.png';
 import LogoLight from '../../../../public/logo-light.png';
-import { useStyles } from './footer.styles';
+import classes from './footer.module.css';
 
 interface FooterLinksProps {
   data: {
@@ -16,7 +16,6 @@ interface FooterLinksProps {
 }
 
 export function Footer({ data }: FooterLinksProps) {
-  const { classes } = useStyles();
   const { colorScheme } = useMantineColorScheme();
 
   const groups = data.map((group) => {
@@ -50,17 +49,29 @@ export function Footer({ data }: FooterLinksProps) {
           © {new Date().getFullYear()} apptension.com. All rights reserved.
         </Text>
 
-        <Group spacing={0} className={classes.social} position="right" noWrap>
-          <ActionIcon size="lg" component="a" href="https://github.com/apptension/alpack" target="_blank">
+        <Group gap={0} className={classes.social} justify="flex-end" wrap="nowrap">
+          <ActionIcon
+            size="lg"
+            variant="subtle"
+            component="a"
+            href="https://github.com/apptension/alpack"
+            target="_blank"
+          >
             <IconBrandGithub size="1.05rem" stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" component="a" href="https://discord.apptension.com" target="_blank">
+          <ActionIcon size="lg" variant="subtle" component="a" href="https://discord.apptension.com" target="_blank">
             <IconBrandDiscord size="1.05rem" stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" component="a" href="https://twitter.com/apptension" target="_blank">
+          <ActionIcon size="lg" variant="subtle" component="a" href="https://twitter.com/apptension" target="_blank">
             <IconBrandX size="1.05rem" stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" component="a" href="https://www.instagram.com/apptension" target="_blank">
+          <ActionIcon
+            size="lg"
+            variant="subtle"
+            component="a"
+            href="https://www.instagram.com/apptension"
+            target="_blank"
+          >
             <IconBrandInstagram size="1.05rem" stroke={1.5} />
           </ActionIcon>
         </Group>

diff --git a/apps/app/src/components/homepage/footer/footer.module.css b/apps/app/src/components/homepage/footer/footer.module.css
@@ -0,0 +1,111 @@
+.footer {
+  margin-top: rem(5);
+  padding-top: calc(var(--mantine-spacing-xl) * 2);
+  padding-bottom: calc(var(--mantine-spacing-md));
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+  border-top: light-dark(
+    var(--mantine-color-gray-2),
+    var(--mantine-color-dark-5)
+  );
+}
+
+.logo {
+    max-width: rem(200);
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+
+.description {
+  margin-top: rem(5);
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        margin-top: var(--mantine-spacing-xs);
+        text-align: center;
+    }
+}
+
+
+.inner {
+  display: flex;
+  justify-content: space-between;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+    flex-direction: column;
+    align-items: center;
+    }
+}
+
+
+.groups {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (max-width: var(--mantine-breakpoint-sm)) {
+  .groups {
+    display: none;
+  }
+}
+
+.wrapper {
+  width: rem(160);
+}
+
+.link {
+  display: block;
+  color: light-dark(
+    var(--mantine-color-gray-6),
+    var(--mantine-color-dark-1)
+  );
+  font-size: var(--mantine-font-size-sm);
+  padding-top: rem(3);
+  padding-bottom: rem(3);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.title {
+  font-size: var(--mantine-font-size-lg);
+  font-weight: 700;
+  font-family: "Greycliff CF", var(--mantine-font-family);
+  margin-bottom: calc(var(--mantine-spacing-xs) / 2);
+  color: light-dark(
+    var(--mantine-color-black),
+    var(--mantine-color-white)
+  );
+}
+
+.afterFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--mantine-spacing-xl);
+  padding-top: var(--mantine-spacing-xl);
+  padding-bottom: var(--mantine-spacing-xl);
+  border-top: rem(1) solid light-dark(
+    var(--mantine-color-gray-2),
+    var(--mantine-color-dark-4)
+  );
+}
+
+@media (max-width: var(--mantine-breakpoint-sm)) {
+  .afterFooter {
+    flex-direction: column;
+  }
+}
+
+.social {
+  @media (max-width: var(--mantine-breakpoint-sm)) {
+    margin-top: var(--mantine-spacing-xs);
+  }
+}
diff --git a/apps/app/src/components/homepage/footer/footer.styles.tsx b/apps/app/src/components/homepage/footer/footer.styles.tsx
diff --git a/apps/app/src/components/homepage/header/header.component.tsx b/apps/app/src/components/homepage/header/header.component.tsx
@@ -1,23 +1,15 @@
 'use client';
 
-import {
-  Burger,
-  Container,
-  Divider,
-  Group,
-  Header as HeaderBase,
-  Paper,
-  Transition,
-  useMantineColorScheme,
-} from '@mantine/core';
+import { Burger, Container, Divider, Group, Paper, Transition, useMantineColorScheme } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import cx from 'clsx';
 import Image from 'next/image';
 import { useState } from 'react';
 
 import LogoDark from '../../../../public/logo-dark.png';
 import LogoLight from '../../../../public/logo-light.png';
 import { LoginState } from '../loginState';
-import { HEADER_HEIGHT, useStyles } from './header.styles';
+import classes from './header.module.css';
 
 interface HeaderResponsiveProps {
   links: { link: string; label: string }[];
@@ -26,7 +18,6 @@ interface HeaderResponsiveProps {
 export function Header({ links }: HeaderResponsiveProps) {
   const [opened, { toggle, close }] = useDisclosure(false);
   const [active, setActive] = useState(links[0].link);
-  const { classes, cx } = useStyles();
   const { colorScheme } = useMantineColorScheme();
 
   const items = links.map((link) => (
@@ -45,15 +36,15 @@ export function Header({ links }: HeaderResponsiveProps) {
   ));
 
   return (
-    <HeaderBase height={HEADER_HEIGHT} className={classes.root}>
-      <Container className={classes.header}>
+    <header className={classes.header}>
+      <Container className={classes.inner}>
         <Image src={colorScheme === 'dark' ? LogoDark : LogoLight} height={45} alt="Apptension" />
-        <Group spacing={5} className={classes.links}>
+        <Group gap={5} visibleFrom="xs">
           {items}
           <Divider orientation="vertical" mx={10} />
           <LoginState />
         </Group>
-        <Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" />
+        <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
         <Transition transition="pop-top-right" duration={200} mounted={opened}>
           {(styles) => (
             <Paper className={classes.dropdown} withBorder style={styles}>
@@ -62,6 +53,6 @@ export function Header({ links }: HeaderResponsiveProps) {
           )}
         </Transition>
       </Container>
-    </HeaderBase>
+    </header>
   );
 }
diff --git a/apps/app/src/components/homepage/header/header.module.css b/apps/app/src/components/homepage/header/header.module.css
@@ -0,0 +1,41 @@
+.dropdown {
+  position: absolute;
+  top: rem(56px);
+  left: 0;
+  right: 0;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.header {
+  height: rem(56px);
+  background-color: var(--mantine-color-body);
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.inner {
+  height: rem(56px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: rem(8px) rem(12px);
+  border-radius: var(--mantine-radius-sm);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-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));
+  }
+
+  [data-mantine-color-scheme] &[data-active] {
+    background-color: var(--mantine-color-blue-filled);
+    color: var(--mantine-color-white);
+  }
+}
diff --git a/apps/app/src/components/homepage/header/header.styles.tsx b/apps/app/src/components/homepage/header/header.styles.tsx
diff --git a/apps/app/src/components/homepage/hero/hero.component.tsx b/apps/app/src/components/homepage/hero/hero.component.tsx
@@ -3,11 +3,9 @@
 import { Container, Text, Title } from '@mantine/core';
 
 import { Dots } from './dots.component';
-import { useStyles } from './hero.styles';
+import classes from './hero.module.css';
 
 export function Hero() {
-  const { classes } = useStyles();
-
   return (
     <Container className={classes.wrapper} size={1400}>
       <Dots className={classes.dots} style={{ left: 0, top: 0 }} />

diff --git a/apps/app/src/components/homepage/hero/hero.module.css b/apps/app/src/components/homepage/hero/hero.module.css
@@ -0,0 +1,66 @@
+.wrapper {
+  position: relative;
+  padding-top: rem(120px);
+  padding-bottom: rem(20px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding-top: rem(80px);
+    padding-bottom: rem(60px);
+  }
+}
+
+.inner {
+  position: relative;
+  z-index: 1;
+}
+
+.dots {
+  position: absolute;
+  color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    display: none;
+  }
+}
+
+.dotsLeft {
+  top: 0;
+  left: 0;
+}
+
+.title {
+  text-align: center;
+  font-weight: 800;
+  font-size: rem(40px);
+  letter-spacing: -1px;
+  margin-bottom: 8px;
+  color: light-dark(
+    var(--mantine-color-black),
+    var(--mantine-color-white)
+  );
+
+  @media (max-width: $mantine-breakpoint-xs) {
+    font-size: rem(28px);
+    text-align: left;
+  }
+}
+
+.highlight {
+  color: light-dark(
+    var(--mantine-color-primary-4),
+    var(--mantine-color-primary-6)
+  );
+}
+
+.description {
+  text-align: center;
+
+  @media (max-width: $mantine-breakpoint-xs) {
+    text-align: left;
+    font-size: 16px;
+  }
+}
+
diff --git a/apps/app/src/components/homepage/hero/hero.styles.tsx b/apps/app/src/components/homepage/hero/hero.styles.tsx
diff --git a/apps/app/src/components/navbar/navbar.component.tsx b/apps/app/src/components/navbar/navbar.component.tsx
@@ -1,13 +1,14 @@
 'use client';
 
-import { Navbar as NavbarBase, ScrollArea } from '@mantine/core';
+import { AppShell, ScrollArea } from '@mantine/core';
 import { IconDashboard, IconLogout, IconStar, IconUser } from '@tabler/icons-react';
+import cx from 'clsx';
 import { signOut } from 'next-auth/react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { FormattedMessage } from 'react-intl';
 
-import { useStyles } from './navbar.styles';
+import classes from './navbar.module.css';
 
 const data = [
   { link: '/app', label: 'Dashboard', icon: IconDashboard },
@@ -20,7 +21,6 @@ export interface NavbarProps {
 }
 
 export function Navbar({ opened }: NavbarProps) {
-  const { classes, cx } = useStyles();
   const pathname = usePathname();
 
   const links = data.map((item) => (
@@ -35,12 +35,12 @@ export function Navbar({ opened }: NavbarProps) {
   ));
 
   return (
-    <NavbarBase width={{ sm: 300 }} p="md" hiddenBreakpoint="sm" hidden={!opened}>
-      <NavbarBase.Section grow component={ScrollArea}>
+    <AppShell.Navbar p="md" hidden={!opened}>
+      <AppShell.Section grow component={ScrollArea}>
         {links}
-      </NavbarBase.Section>
+      </AppShell.Section>
 
-      <NavbarBase.Section className={classes.footer}>
+      <AppShell.Section className={classes.footer}>
         <a href="/app/profile" className={classes.link}>
           <IconUser className={classes.linkIcon} stroke={1.5} />
           <span>
@@ -54,7 +54,7 @@ export function Navbar({ opened }: NavbarProps) {
             <FormattedMessage defaultMessage="Logout" id="Navbar / Logout" />
           </span>
         </a>
-      </NavbarBase.Section>
-    </NavbarBase>
+      </AppShell.Section>
+    </AppShell.Navbar>
   );
 }
diff --git a/apps/app/src/components/navbar/navbar.module.css b/apps/app/src/components/navbar/navbar.module.css
@@ -0,0 +1,43 @@
+.footer {
+  padding-top: var(--mantine-spacing-md);
+  margin-top: var(--mantine-spacing-md);
+  border-top: 1px solid light-dark(
+    var(--mantine-color-gray-2),
+    var(--mantine-color-dark-4)
+  );
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-sizes-sm);
+  color: light-dark(
+    var(--mantine-color-gray-7),
+    var(--mantine-color-dark-1)
+  );
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  font-weight: 500;
+}
+
+.link:hover {
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+  color: var(--mantine-black);
+}
+
+.linkIcon {
+  color: light-dark(
+    var(--mantine-color-gray-6),
+    var(--mantine-color-dark-2)
+  );
+  margin-right: var(--mantine-spacing-sm);
+}
+
+.linkActive {
+  background-color: var(--mantine-primary-color);
+  color: var(--mantine-primary-color);
+}
diff --git a/apps/app/src/providers/appProviders/appProviders.component.tsx b/apps/app/src/providers/appProviders/appProviders.component.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ColorScheme } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
@@ -9,22 +9,22 @@ import { ReactNode } from 'react';
 import { MakeClientOpts } from '@alp/api-client/client';
 import { ApolloProvider } from '@alp/api-client/providers';
 import { Locale } from '@alp/core/config/i18n';
-import { IntlProvider, LocalesProvider, MantineProvider } from '@alp/core/providers';
+import { IntlProvider, LocalesProvider } from '@alp/core/providers';
+
+import { theme } from '../../theme';
 
 interface AppProvidersProps {
   children: ReactNode;
   session?: Session | null;
   apolloClientOpts?: MakeClientOpts;
   lang: Locale;
-  defaultColorScheme?: ColorScheme;
 }
 
-export const AppProviders = ({ children, session, apolloClientOpts, lang, defaultColorScheme }: AppProvidersProps) => {
-  return (
+export const AppProviders = ({ children, session, apolloClientOpts, lang }: AppProvidersProps) => (
     <SessionProvider session={session}>
       <LocalesProvider>
         <IntlProvider lang={lang}>
-          <MantineProvider defaultColorScheme={defaultColorScheme}>
+          <MantineProvider theme={theme}>
             <ApolloProvider clientOpts={apolloClientOpts}>
               <Notifications />
               {children}
@@ -34,4 +34,3 @@ export const AppProviders = ({ children, session, apolloClientOpts, lang, defaul
       </LocalesProvider>
     </SessionProvider>
   );
-};
diff --git a/apps/app/src/theme/index.ts b/apps/app/src/theme/index.ts
@@ -0,0 +1,13 @@
+'use client';
+
+import { Button, createTheme } from '@mantine/core';
+
+import classes from './theme.module.css';
+
+export const theme = createTheme({
+  components: {
+    Button: Button.extend({
+      classNames: classes,
+    }),
+  },
+});
diff --git a/apps/app/src/theme/theme.module.css b/apps/app/src/theme/theme.module.css
@@ -0,0 +1,10 @@
+.root {
+    &[data-variant='danger'] {
+        background-color: var(--mantine-color-red-9);
+        color: var(--mantine-color-red-0);
+    }
+
+    &[data-variant='danger']:hover {
+        background-color: var(--mantine-color-red-7);
+    }
+}
diff --git a/package.json b/package.json
@@ -71,18 +71,22 @@
     "@apollo/experimental-nextjs-app-support": "^0.8.0",
     "@apollo/server": "^4.10.0",
     "@emotion/react": "^11.11.1",
-    "@mantine/core": "^6.0.11",
-    "@mantine/form": "^6.0.17",
-    "@mantine/hooks": "^6.0.11",
-    "@mantine/modals": "^6.0.17",
+    "@mantine/core": "^7.10.1",
+    "@mantine/form": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
+    "@mantine/modals": "^7.10.1",
     "@tabler/icons-react": "^2.30.0",
+    "clsx": "^2.1.1",
+    "eslint-config-mantine": "^3.2.0",
     "graphql": "^16.8.1",
     "next": "14.1.2",
     "next-auth": "^4.24.6",
     "ramda": "^0.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.6.2",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "typeorm": "^0.3.20",
     "zod": "^3.21.4"
   },

diff --git a/packages/core/src/components/genericError/genericError.component.tsx b/packages/core/src/components/genericError/genericError.component.tsx
@@ -4,25 +4,23 @@ import { Container, Group, Text, Title } from '@mantine/core';
 import { FormattedMessage } from 'react-intl';
 
 import { Link } from '../link';
-import { useStyles } from './genericError.styles';
+import classes from './genericError.module.css';
 
 export function GenericError() {
-  const { classes } = useStyles();
-
   return (
     <Container className={classes.root}>
       <div className={classes.inner}>
         <div className={classes.content}>
           <Title className={classes.title}>
             <FormattedMessage defaultMessage="Something went wrong" id="GenericError / Title" />
           </Title>
-          <Text color="dimmed" size="lg" align="center" className={classes.description}>
+          <Text color="dimmed" size="lg" ta="center" className={classes.description}>
             <FormattedMessage
               defaultMessage="On the page you are trying to open occured error"
               id="GenericError / Description"
             />
           </Text>
-          <Group position="center">
+          <Group justify="center">
             <Link href="/" size="md">
               <FormattedMessage defaultMessage="Take me back to home page" id="GenericError / Back Button" />
             </Link>

diff --git a/packages/core/src/components/genericError/genericError.module.css b/packages/core/src/components/genericError/genericError.module.css
@@ -0,0 +1,32 @@
+.root {
+  padding-top: var(--mantine-spacing-xl);
+  padding-bottom: var(--mantine-spacing-xl);
+}
+
+.inner {
+  position: relative;
+}
+
+.image {
+  opacity: 0.75;
+}
+
+.content {
+  padding-top: var(--mantine-spacing-xl);
+  position: relative;
+  z-index: 1;
+}
+
+.title {
+  font-family: "Greycliff CF", var(--mantine-font-family);
+  text-align: center;
+  font-weight: 900;
+  font-size: var(--mantine-font-sizes-xl);
+}
+
+.description {
+  max-width: var(--mantine-spacing-xl);
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(var(--mantine-spacing-xl) * 1.5);
+}
diff --git a/packages/core/src/components/themeToggler/themeToggler.component.tsx b/packages/core/src/components/themeToggler/themeToggler.component.tsx
@@ -1,18 +1,20 @@
 import { ActionIcon, useMantineColorScheme } from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
 
+import classes from './themeToggler.module.css';
+
 export const ThemeToggler = () => {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
+  const { toggleColorScheme } = useMantineColorScheme();
 
   return (
     <ActionIcon
       variant="outline"
-      color={dark ? 'yellow' : 'blue'}
       onClick={() => toggleColorScheme()}
       title="Toggle color scheme"
+      className={classes.root}
     >
-      {dark ? <IconSun data-testid="dark" size="1.1rem" /> : <IconMoonStars data-testid="light" size="1.1rem" />}
+      <IconMoonStars className={classes.iconLight} data-testid="light" size="1.1rem" />
+      <IconSun className={classes.iconDark} data-testid="dark" size="1.1rem" />
     </ActionIcon>
   );
 };
diff --git a/packages/core/src/components/themeToggler/themeToggler.module.css b/packages/core/src/components/themeToggler/themeToggler.module.css
@@ -0,0 +1,18 @@
+.root {
+    color: light-dark(
+            var(--mantine-color-blue-5),
+            var(--mantine-color-yellow-5)
+    );
+}
+
+.iconDark {
+    @mixin light {
+        display: none;
+    }
+}
+
+.iconLight {
+    @mixin dark {
+        display: none;
+    }
+}
diff --git a/packages/core/src/providers/index.ts b/packages/core/src/providers/index.ts
@@ -1,3 +1,2 @@
-export * from './mantineProvider';
 export * from './intlProvider';
 export * from './localesProvider';
diff --git a/packages/core/src/providers/mantineProvider/MantineProvider.component.tsx b/packages/core/src/providers/mantineProvider/MantineProvider.component.tsx
diff --git a/packages/core/src/providers/mantineProvider/MantineProvider.const.tsx b/packages/core/src/providers/mantineProvider/MantineProvider.const.tsx
diff --git a/packages/core/src/providers/mantineProvider/index.ts b/packages/core/src/providers/mantineProvider/index.ts
diff --git a/packages/core/src/tests/utils/rendering.tsx b/packages/core/src/tests/utils/rendering.tsx
@@ -1,11 +1,11 @@
+import { MantineProvider, MantineProviderProps } from '@mantine/core';
 import { Queries, queries } from '@testing-library/dom';
 import { RenderOptions, RenderResult, render, renderHook } from '@testing-library/react';
 import { ComponentClass, ComponentType, FC, PropsWithChildren, ReactElement } from 'react';
 import { IntlProvider } from 'react-intl';
 
 import { DEFAULT_LOCALE, Locale, TranslationMessages, translationMessages } from '../../config/i18n';
 import { LocalesProvider } from '../../providers/localesProvider';
-import { MantineProvider, MantineProviderProps } from '../../providers/mantineProvider';
 import { AppRouterContextProviderMock, AppRouterContextProviderMockProps } from '../providers';
 
 /**

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const main = require('../../postcss.config.cjs');

		module.exports = main;