Update to Mantine v7 (#512)

* Make the mantine v7 build in dev mode at least PS: I hate mantine * Fix the tables and additional fixes * Add note about the hook * Fix twitch panel && info cards hover css * Fix news section * Fix the footer * Finish the homepage redesigns * Fix menus * Fix the news * Fix icon size * Migrate players to mantine v7 * Finish redesign * Fix challenges * Fix unit page table * Unit stats fix * Battlegroup fixes in designs * Fix the dps chart redesign * Fix the about * Fix small things and button on the home page * Fix the build * Run prettier * Update packages
cohstats · Aug 22, 2024 · 692a72f · 692a72f
1 parent 7afcfda
commit 692a72f
Show file tree

Hide file tree

Showing 117 changed files with 2,597 additions and 2,517 deletions.
diff --git a/__tests__/src/players/export.test.ts b/__tests__/src/players/export.test.ts
@@ -13,6 +13,7 @@ describe("generateCSVObject", () => {
     COH3PlayTime: null,
     standings: {
       german: {
+        // @ts-ignore
         "1v1": {
           statgroup_id: 1,
           leaderboard_id: 1,
@@ -35,6 +36,7 @@ describe("generateCSVObject", () => {
       },
       american: {
         "1v1": null,
+        // @ts-ignore
         "2v2": {
           statgroup_id: 2,
           leaderboard_id: 2,

diff --git a/__tests__/src/utils.test.ts b/__tests__/src/utils.test.ts
@@ -11,6 +11,7 @@ import {
   generateExpireTimeStamps,
   calculateWinRate,
   convertWeekDayToFullName,
+  getPatchVersionAsMantineV7Groups,
 } from "../../src/utils";
 
 describe("getIconsPathOnCDN", () => {
@@ -306,3 +307,17 @@ describe("convertWeekDayToFullName", () => {
     expect(convertWeekDayToFullName("T")).toBe("Invalid day abbreviation");
   });
 });
+
+describe("getPatchVersionAsMantineV7Groups", () => {
+  test("Test correct conversion", () => {
+    expect(
+      JSON.stringify(
+        getPatchVersionAsMantineV7Groups().includes({
+          group: "Brass Leopard",
+          items: [{ value: "1.1.5", label: "1.1.5" }],
+        }),
+      ),
+    ).toBeTruthy();
+    // console.log(JSON.stringify(getPatchVersionAsMantineV7Groups()));
+  });
+});
diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css
@@ -0,0 +1,10 @@
+.footer {
+  margin-top: var(--mantine-spacing-xl);
+  padding-top: var(--mantine-spacing-xl);
+  padding-bottom: var(--mantine-spacing-xl);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  border-top: light-dark(
+    1px solid var(--mantine-color-gray-2),
+    1px solid var(--mantine-color-dark-5)
+  );
+}
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -1,39 +1,29 @@
-import { Container, createStyles, Group, Space, Text, Anchor, Tooltip } from "@mantine/core";
+import { Container, Group, Space, Text, Anchor, Tooltip } from "@mantine/core";
+
 import React from "react";
 import { Discord } from "../icon/discord";
 import { Donate } from "../icon/donate";
 import { Github } from "../icon/github";
 import Link from "next/link";
 import config from "../../config";
 
-const useStyles = createStyles((theme) => ({
-  footer: {
-    // position: "fixed",
-    // bottom: 0,
-    marginTop: theme.spacing.xl,
-    paddingTop: `calc(${theme.spacing.xl} * 2)`,
-    paddingBottom: `calc(${theme.spacing.xl} * 2)`,
-    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
-    borderTop: `1px solid ${
-      theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]
-    }`,
-  },
-  social: {},
-}));
+import classes from "./Footer.module.css";
 
 export const Footer: React.FC = () => {
-  const { classes } = useStyles();
+  // We can't use useColorScheme in NextJS
+  // https://mantine.dev/theming/color-schemes/#color-scheme-value-caveats
+  // const colorScheme = useColorScheme();
 
   return (
     <>
       <footer className={classes.footer}>
         <Container size={"lg"}>
-          <Group position="apart">
-            <Text color="dimmed" size="sm">
+          <Group justify="space-between">
+            <Text c="dimmed" size="sm">
               © 2024 COH3stats.com,{" "}
               <Tooltip
                 multiline
-                width={200}
+                w={200}
                 withArrow
                 label={`Data displayed on the site are from game patch ${
                   config.latestPatch
@@ -44,21 +34,24 @@ export const Footer: React.FC = () => {
               <br />
               This is an unofficial fan-made site for Company&nbsp;Of&nbsp;Heroes&nbsp;3.
             </Text>
-            <Group spacing={5} className={classes.social} position="right" noWrap>
-              <Text color="dimmed" size="sm"></Text>
+            <Group gap={5} justify="right" wrap="nowrap">
+              <Text c="dimmed" size="sm"></Text>
               <Discord />
               <Github />
               <Donate />
             </Group>
           </Group>
           <br />
         </Container>
-        <Text color="dimmed" size="xs" style={{ textAlign: "center" }}>
+        <Text c="dimmed" size="xs" style={{ textAlign: "center" }}>
           The Company of Heroes is a registered trademark of SEGA&nbsp;Holdings Co.
           <br />
           The COH Images and other assets are owned by
           Relic&nbsp;Entertainment&nbsp;and/or&nbsp;SEGA
-          <Space h="xs" />
+        </Text>
+        {/*Looks like we can't have Space inside Text element?! Hydration failure*/}
+        <Space h="md" />
+        <Text c="dimmed" size="xs" style={{ textAlign: "center" }}>
           Visit{" "}
           <Anchor component={Link} href={"https://coh2stats.com"} target={"_blank"}>
             coh2stats.com{" "}

diff --git a/components/Header/Header.module.css b/components/Header/Header.module.css
@@ -0,0 +1,103 @@
+/* header.module.css */
+.headerRoot {
+  /* marginBottom: theme.spacing.xl; */
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  height: 60px;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  border-bottom: light-dark(
+    1px solid var(--mantine-color-gray-2),
+    1px solid var(--mantine-color-dark-5)
+  );
+}
+
+@media (min-width: 64em) and (max-width: 90em) {
+  /* Add your styles for medium screens here */
+  .headerRoot {
+    /* Example style */
+    height: 100px;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+  padding-top: var(--mantine-spacing-xs);
+  padding-bottom: var(--mantine-spacing-xs);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
+  border-radius: var(--mantine-radius-md);
+}
+
+.link {
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-red-0), var(--mantine-color-dark-6));
+    text-decoration: none;
+  }
+}
+
+.disabledLink {
+  color: var(--mantine-color-gray-6);
+}
+
+.subLink {
+  width: 100%;
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  border-radius: var(--mantine-radius-md);
+}
+
+.subLink {
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  }
+}
+
+.subLink:active {
+  /* Define active styles */
+}
+
+.dropdown {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top-width: 0;
+  overflow: hidden;
+}
+
+/* Media Queries */
+@media (min-width: 64em) {
+  .burger,
+  .dropdown,
+  .hiddenDesktop {
+    display: none;
+  }
+}
+
+@media (max-width: 64em) {
+  .hiddenMobile {
+    display: none;
+  }
+
+  .link {
+    height: 42px;
+    width: 100%;
+  }
+}