deps: dependency upgrade for mantine (#16)

* setup: upgraded mantine

* deps: updated Privacy to M7

* deps: Footer to M7

* deps: Home to M7

* deps: Locators tab to M7

* setup: intellisense for postcss

* deps: ColorSchemeToggler to M7

* deps: Header to M7

* deps: ColorPickerElement to M7

* deps: RequiresInstallation to M7

* deps: TraitsBuilderTab to M7

* deps: UnusedDDSFinder to M7

* fix: fixed increased space in header

* test: validated light locators page

* fix: fixed other tools page links being small

* fix: fixed privacy page links being small

* test: validated trait builder page

* test: validated unused dds finder page

* test: trigger e2e visual test generation for linux

* test: added linux visual tests

.gitignore

@@ -16,6 +16,7 @@ dev-dist
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "vunguyentuan.vscode-css-variables",
+    "vunguyentuan.vscode-postcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "cssVariables.lookupFiles": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.sass",
+    "**/*.less",
+    "node_modules/@mantine/core/styles.css",
+    "node_modules/@mantine/notification/styles.css",
+    "node_modules/@mantine/dropzone/styles.css"
+  ]
+}

package.json

@@ -15,10 +15,10 @@
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",
-    "@mantine/core": "^6.0.0",
-    "@mantine/dropzone": "^6.0.0",
-    "@mantine/hooks": "^6.0.0",
-    "@mantine/notifications": "^6.0.0",
+    "@mantine/core": "^7.0.0",
+    "@mantine/dropzone": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@mantine/notifications": "^7.0.0",
     "@netlify/functions": "^1.0.0",
     "@sentry/browser": "^7.12.1",
     "@tabler/icons-react": "^3.5.0",
@@ -40,6 +40,9 @@
     "@types/react-dom": "^18.3.0",
     "@types/wicg-file-system-access": "^2023.10.5",
     "@vitejs/plugin-react": "^4.2.1",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vite-plugin-pwa": "^0.20.0",

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/App.tsx

@@ -1,7 +1,6 @@
+import { lazy, Suspense, useEffect } from "react";
 import {
   Center,
-  ColorScheme,
-  ColorSchemeProvider,
   Container,
   Loader,
   MantineProvider,
@@ -10,10 +9,14 @@ import {
 import { Notifications } from "@mantine/notifications";
 import Header from "./components/Header/Header";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import "@mantine/dropzone/styles.css";
+
 import { ROUTES } from "./constants";
 import Home from "./components/Home";
 import LightLocatorsGeneratorTab from "./components/LightLocatorsGeneratorTab";
-import { lazy, Suspense, useEffect, useState } from "react";
 import Footer from "./components/Footer";
 import Privacy from "./static_pages/Privacy";
 import { isDNTEnabled } from "./utils/general";
@@ -28,9 +31,6 @@ const UnusedDDSFinderTab = lazy(() => import("./components/UnusedDDSFinder"));
 
 export default function App() {
   const beforeInstallPromptContextValue = useBeforeInstallPrompt();
-  const [colorScheme, setColorScheme] = useState<ColorScheme>("dark");
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
 
   // Analytics script for prod
   useEffect(() => {
@@ -56,78 +56,69 @@ export default function App() {
     <BeforeInstallPromptContext.Provider
       value={beforeInstallPromptContextValue}
     >
-      <ColorSchemeProvider
-        colorScheme={colorScheme}
-        toggleColorScheme={toggleColorScheme}
-      >
-        <MantineProvider
-          theme={{ colorScheme }}
-          withGlobalStyles
-          withNormalizeCSS
-        >
-          <Notifications />
-          <BrowserRouter>
-            <Stack
-              sx={{
-                minHeight: "100vh",
+      <MantineProvider defaultColorScheme="dark">
+        <Notifications />
+        <BrowserRouter>
+          <Stack
+            style={{
+              minHeight: "100vh",
+            }}
+          >
+            <Header />
+            <Container
+              fluid
+              mt="md"
+              p="sm"
+              style={{
+                maxWidth: "1200px",
+                width: "100%",
               }}
             >
-              <Header />
-              <Container
-                fluid
-                mt="md"
-                p="sm"
-                sx={{
-                  maxWidth: "1200px",
-                  width: "100%",
-                }}
-              >
-                <Routes>
-                  <Route path={ROUTES.HOME.path} element={<Home />} />
-                  <Route
-                    path={ROUTES.LIGHT_LOCATORS_GENERATOR.path}
-                    element={<LightLocatorsGeneratorTab />}
-                  />
-                  <Route
-                    path={ROUTES.TRAITS_BUILDER.path}
-                    element={
-                      <Suspense
-                        fallback={
-                          <Center style={{ height: "300px" }}>
-                            <Loader size="xl" variant="bars" />
-                          </Center>
-                        }
-                      >
-                        <TraitsBuilderTab />
-                      </Suspense>
-                    }
-                  />
-                  <Route
-                    path={ROUTES.UNUSED_DDS_FINDER.path}
-                    element={
-                      <Suspense
-                        fallback={
-                          <Center style={{ height: "300px" }}>
-                            <Loader size="xl" variant="bars" />
-                          </Center>
-                        }
-                      >
-                        <UnusedDDSFinderTab />
-                      </Suspense>
-                    }
-                  />
-                  <Route path={ROUTES.PRIVACY.path} element={<Privacy />} />
-                  <Route
-                    path={ROUTES.OTHER_TOOLS.path}
-                    element={<OtherTools />}
-                  />
-                </Routes>
-              </Container>
-              <Footer />
-            </Stack>
-          </BrowserRouter>
-        </MantineProvider>
-      </ColorSchemeProvider>
+              <Routes>
+                <Route path={ROUTES.HOME.path} element={<Home />} />
+                <Route
+                  path={ROUTES.LIGHT_LOCATORS_GENERATOR.path}
+                  element={<LightLocatorsGeneratorTab />}
+                />
+                <Route
+                  path={ROUTES.TRAITS_BUILDER.path}
+                  element={
+                    <Suspense
+                      fallback={
+                        <Center style={{ height: "300px" }}>
+                          <Loader size="xl" variant="bars" />
+                        </Center>
+                      }
+                    >
+                      <TraitsBuilderTab />
+                    </Suspense>
+                  }
+                />
+                <Route
+                  path={ROUTES.UNUSED_DDS_FINDER.path}
+                  element={
+                    <Suspense
+                      fallback={
+                        <Center style={{ height: "300px" }}>
+                          <Loader size="xl" variant="bars" />
+                        </Center>
+                      }
+                    >
+                      <UnusedDDSFinderTab />
+                    </Suspense>
+                  }
+                />
+                <Route path={ROUTES.PRIVACY.path} element={<Privacy />} />
+                <Route
+                  path={ROUTES.OTHER_TOOLS.path}
+                  element={<OtherTools />}
+                />
+              </Routes>
+            </Container>
+            <Footer />
+          </Stack>
+        </BrowserRouter>
+      </MantineProvider>
     </BeforeInstallPromptContext.Provider>
   );
 }

src/components/Footer.module.css

@@ -0,0 +1,3 @@
+.link {
+  color: light-dark(var(--mantine-color-dark-5), var(--mantine-color-dark-0));
+}

src/components/Footer.tsx

@@ -1,34 +1,36 @@
-import { Anchor, CSSObject, Group, MantineTheme, Text } from "@mantine/core";
+import { Anchor, Group, Text } from "@mantine/core";
 import { Link } from "react-router-dom";
+
 import { ROUTES } from "../constants";
 
-const footerLinkStyles = (theme: MantineTheme): CSSObject => ({
-  color:
-    theme.colorScheme === "light" ? theme.colors.dark[5] : theme.colors.dark[0],
-});
+import classes from "./Footer.module.css";
 
 export default function Footer() {
   return (
-    <Group position="apart" mt="auto" p="sm">
+    <Group justify="space-between" mt="auto" p="sm">
       <Group>
-        <Text size="sm" color="dimmed">
+        <Text size="sm" c="dimmed">
           &copy; {new Date().getFullYear()} Renegades Modding Group
         </Text>
         &bull;
-        <Anchor sx={footerLinkStyles} component={Link} to={ROUTES.PRIVACY.path}>
+        <Anchor
+          className={classes.link}
+          component={Link}
+          to={ROUTES.PRIVACY.path}
+        >
           {ROUTES.PRIVACY.name}
         </Anchor>
         &bull;
         <Anchor
-          sx={footerLinkStyles}
+          className={classes.link}
           href="https://steamcommunity.com/workshop/filedetails/?id=2469745470"
           target="_blank"
         >
           RMG's mods collection
         </Anchor>
         &bull;
         <Anchor
-          sx={footerLinkStyles}
+          className={classes.link}
           href="https://discord.gg/4xfQ78sPpm"
           target="_blank"
         >
@@ -37,7 +39,7 @@ export default function Footer() {
       </Group>
       <Anchor
         size="sm"
-        color={"dimmed"}
+        c="dimmed"
         href={`https://github.com/The24thDS/rmg-utils/releases/tag/v${APP_VERSION}`}
         target="_blank"
         rel="noopener noreferrer"

src/components/Header/ColorSchemeToggle.module.css

@@ -0,0 +1,9 @@
+.icon {
+  background-color: var(--mantine-color-gray-0);
+  color: var(--mantine-color-blue-6);
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-6);
+    color: var(--mantine-color-yellow-4);
+  }
+}

src/components/Header/ColorSchemeToggle.tsx

@@ -1,24 +1,17 @@
 import { useMantineColorScheme, ActionIcon, Group } from "@mantine/core";
 import { IconSun, IconMoonStars } from "@tabler/icons-react";
 
+import classes from "./ColorSchemeToggle.module.css";
+
 export default function ColorSchemeTogle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <Group position="center" my="xl">
+    <Group justify="center" my="24px">
       <ActionIcon
         onClick={() => toggleColorScheme()}
         size="lg"
-        sx={(theme) => ({
-          backgroundColor:
-            theme.colorScheme === "dark"
-              ? theme.colors.dark[6]
-              : theme.colors.gray[0],
-          color:
-            theme.colorScheme === "dark"
-              ? theme.colors.yellow[4]
-              : theme.colors.blue[6],
-        })}
+        className={classes.icon}
       >
         {colorScheme === "dark" ? (
           <IconSun size={18} />

src/components/Header/Header.module.css

@@ -0,0 +1,11 @@
+.header {
+  padding-top: var(--mantine-spacing-sm);
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+  box-shadow: 0 -2px light-dark(
+      var(--mantine-color-gray-3),
+      var(--mantine-color-dark-4)
+    ) inset;
+}