Update to Mantine v7

.github/renovate.json

@@ -21,5 +21,5 @@
       "groupSlug": "actions-updates"
     }
   ],
-  "schedule": ["before 4am on Monday"]
+  "schedule": ["0 1 * * 1 "]
 }

package.json

@@ -20,7 +20,7 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js,ts,jsx,tsx,yml}": [
+    "*.{js,ts,jsx,tsx,yml,css}": [
       "prettier --log-level warn --write"
     ],
     "*.md": [
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@emotion/react": "11.11.4",
-    "@mantine/core": "6.0.21",
-    "@mantine/hooks": "6.0.21",
-    "@mantine/notifications": "6.0.21",
+    "@mantine/core": "7.6.2",
+    "@mantine/hooks": "7.6.2",
+    "@mantine/notifications": "7.6.2",
     "@sentry/react": "7.108.0",
     "@tabler/icons-react": "3.1.0",
     "@tauri-apps/api": "1.5.3",
@@ -55,6 +55,9 @@
     "@vitejs/plugin-react": "4.2.1",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.13.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "2.8.8",
     "typescript": "5.4.3",
     "vite": "5.2.4"

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',
+      },
+    },
+  },
+};

src/Providers.tsx

@@ -1,10 +1,4 @@
-import {
-  MantineProvider,
-  ColorScheme,
-  ColorSchemeProvider,
-} from "@mantine/core"
-import { useLocalStorage } from "@mantine/hooks"
-import { useState } from "react"
+import { MantineProvider, localStorageColorSchemeManager } from "@mantine/core"
 import { GameDataProvider } from "./game-data-provider/GameDataProvider"
 import { Notifications } from "@mantine/notifications"
 
@@ -13,29 +7,22 @@ interface ProvidersProps {
 }
 
 export const Providers: React.FC<ProvidersProps> = ({ children }) => {
-  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
+  const colorSchemeManager = localStorageColorSchemeManager({
     key: "mantine-color-scheme",
-    defaultValue: "dark",
-    getInitialValueInEffect: true,
   })
 
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"))
   return (
     <>
-      <ColorSchemeProvider
-        colorScheme={colorScheme}
-        toggleColorScheme={toggleColorScheme}
+      <MantineProvider
+        // theme={{ colorScheme }}
+        defaultColorScheme="dark"
+        colorSchemeManager={colorSchemeManager}
+        // withGlobalStyles
+        // withNormalizeCSS
       >
-        <MantineProvider
-          theme={{ colorScheme }}
-          withGlobalStyles
-          withNormalizeCSS
-        >
-          <Notifications />
-          <GameDataProvider>{children}</GameDataProvider>
-        </MantineProvider>
-      </ColorSchemeProvider>
+        <Notifications />
+        <GameDataProvider>{children}</GameDataProvider>
+      </MantineProvider>
     </>
   )
 }

src/WindowTitleBar.module.css

@@ -0,0 +1,61 @@
+.wrapper {
+  display: flex;
+  flex-flow: column;
+  height: 100vh;
+}
+
+.header {
+  background-color: light-dark(
+    lighten(var(--mantine-color-gray-3), 0.7),
+    darken(var(--mantine-color-blue-9), 0.9)
+  );
+  flex: 0 1 auto;
+}
+
+.children {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: 10px 8px;
+  border-radius: 0;
+  height: 35px;
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  user-select: none;
+  cursor: pointer;
+}
+
+.link:hover {
+  background-color: light-dark(
+    lighten(var(--mantine-color-blue-3), 0.7),
+    darken(var(--mantine-color-blue-9), 0.7)
+  );
+}
+
+.selectedLink {
+  background-color: light-dark(
+    lighten(var(--mantine-color-blue-3), 0.7),
+    darken(var(--mantine-color-blue-9), 0.7)
+  );
+}
+
+.windowButton {
+  padding: 10px 12px;
+}
+
+.closeButton {
+  padding: 10px 14px;
+}
+
+.closeButton:hover {
+  background-color: light-dark(
+    var(--mantine-color-red-7),
+    var(--mantine-color-red-8)
+  );
+}

src/WindowTitleBar.tsx

@@ -1,138 +1,80 @@
-import { Header, createStyles, Box, Group } from "@mantine/core"
+import { Box, Group } from "@mantine/core"
 import { appWindow } from "@tauri-apps/api/window"
 import { Link, useLocation } from "react-router-dom"
 import logo from "./assets/logo/32x32.png"
 import { Routes } from "./Router"
+import classes from "./WindowTitleBar.module.css"
+import React from "react"
 
 export interface WindowTitleBarProps {
   children?: React.ReactNode
 }
 
-const useStyles = createStyles((theme) => ({
-  wrapper: {
-    display: "flex",
-    flexFlow: "column",
-    height: "100vh",
-  },
-  header: {
-    backgroundColor:
-      theme.colorScheme === "dark"
-        ? theme.fn.darken(theme.colors.blue[9], 0.9)
-        : theme.fn.lighten(theme.colors.gray[3], 0.7),
-    flex: "0 1 auto",
-  },
-  children: {
-    flex: "1 1 auto",
-    overflowY: "auto",
-  },
-  link: {
-    display: "block",
-    lineHeight: 1,
-    padding: "10px 8px",
-    borderRadius: 0,
-    height: 35,
-    textDecoration: "none",
-    color: theme.colorScheme === "dark" ? theme.white : theme.black,
-    fontSize: theme.fontSizes.sm,
-    fontWeight: 500,
-    userSelect: "none",
-    cursor: "pointer",
-
-    "&:hover": {
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.fn.darken(theme.colors.blue[9], 0.7)
-          : theme.fn.lighten(theme.colors.gray[5], 0.7),
-    },
-  },
-  selectedLink: {
-    backgroundColor:
-      theme.colorScheme === "dark"
-        ? theme.fn.darken(theme.colors.blue[9], 0.7)
-        : theme.fn.lighten(theme.colors.blue[3], 0.7),
-  },
-  windowButton: {
-    padding: "10px 12px",
-  },
-  closeButton: {
-    padding: "10px 14px",
-    "&:hover": {
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors.red[8]
-          : theme.colors.red[7],
-    },
-  },
-}))
-
 export const WindowTitleBar: React.FC<WindowTitleBarProps> = ({ children }) => {
-  const { classes, cx } = useStyles()
   const location = useLocation()
   return (
     <div className={classes.wrapper}>
-      <Header height={35} className={classes.header} data-tauri-drag-region>
-        <Group data-tauri-drag-region position="apart" pl="xs">
-          <Group data-tauri-drag-region spacing={4}>
+      <div className={classes.header} data-tauri-drag-region>
+        <Group data-tauri-drag-region justify="space-between" pl="xs">
+          <Group data-tauri-drag-region gap={4}>
             <img data-tauri-drag-region src={logo} width={20} />
             <Link
               to={Routes.GAME}
-              className={cx(classes.link, {
-                [classes.selectedLink]: location.pathname === Routes.GAME,
-              })}
+              className={`${classes.link} ${
+                location.pathname === Routes.GAME ? classes.selectedLink : ""
+              }`}
             >
               Game
             </Link>
             <Link
               to={Routes.SETTINGS}
-              className={cx(classes.link, {
-                [classes.selectedLink]: location.pathname === Routes.SETTINGS,
-              })}
+              className={`${classes.link} ${
+                location.pathname === Routes.SETTINGS
+                  ? classes.selectedLink
+                  : ""
+              }`}
             >
               Settings
             </Link>
             <Link
               to={Routes.REPLAYS}
-              className={cx(classes.link, {
-                [classes.selectedLink]: location.pathname === Routes.REPLAYS,
-              })}
+              className={`${classes.link} ${
+                location.pathname === Routes.REPLAYS ? classes.selectedLink : ""
+              }`}
             >
               Replays
             </Link>
             <Link
               to={Routes.ABOUT}
-              className={cx(classes.link, {
-                [classes.selectedLink]: location.pathname === Routes.ABOUT,
-              })}
+              className={`${classes.link} ${
+                location.pathname === Routes.ABOUT ? classes.selectedLink : ""
+              }`}
             >
               About
             </Link>
           </Group>
-          <Group data-tauri-drag-region spacing={0}>
+          <Group data-tauri-drag-region gap={0}>
             <a
               onClick={() => appWindow.minimize()}
-              className={cx(classes.link, classes.windowButton)}
+              className={`${classes.link} ${classes.windowButton}`}
             >
               ─
             </a>
             <a
               onClick={() => appWindow.toggleMaximize()}
-              className={cx(classes.link, classes.windowButton)}
+              className={`${classes.link} ${classes.windowButton}`}
             >
               ☐
             </a>
             <a
               onClick={() => appWindow.close()}
-              className={cx(
-                classes.link,
-                classes.windowButton,
-                classes.closeButton
-              )}
+              className={`${classes.link} ${classes.closeButton} ${classes.windowButton}`}
             >
               X
             </a>
           </Group>
         </Group>
-      </Header>
+      </div>
       <Box className={classes.children}>{children}</Box>
     </div>
   )

src/components/Online-players.tsx

@@ -67,11 +67,11 @@ export const OnlinePlayers: React.FC = () => {
         onlinePlayersData?.timeStampMs || ""
       ).toLocaleString()}`}
       multiline
-      width={250}
+      w={300}
       withArrow
     >
       <div>
-        <Group spacing={6}>
+        <Group gap={6}>
           <SteamIcon size={20} />
           Players in game
           <Badge