From 3d088e7f5f1c6349303ac4a546461e64113c076f Mon Sep 17 00:00:00 2001 From: Petr Vecera Date: Mon, 25 Mar 2024 18:46:36 +0100 Subject: [PATCH] Update to mantine v7 --- .github/renovate.json | 2 +- package.json | 9 +- postcss.config.cjs | 14 + src/Providers.tsx | 35 +-- src/WindowTitleBar.module.css | 64 +++++ src/WindowTitleBar.tsx | 108 ++------ src/components/Online-players.tsx | 4 +- src/components/PlayerCard.tsx | 23 +- src/components/PlayerLosses.tsx | 2 +- src/components/PlayerStreak.tsx | 2 +- src/components/PlayerWins.tsx | 2 +- src/components/other/helper-icon.tsx | 7 +- src/main.tsx | 2 + src/views/About.tsx | 18 +- src/views/Game.tsx | 16 +- src/views/Replays.tsx | 21 +- src/views/Settings.tsx | 10 +- yarn.lock | 383 +++++++++++++++------------ 18 files changed, 390 insertions(+), 332 deletions(-) create mode 100644 postcss.config.cjs create mode 100644 src/WindowTitleBar.module.css diff --git a/.github/renovate.json b/.github/renovate.json index d624e30..3f29392 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -21,5 +21,5 @@ "groupSlug": "actions-updates" } ], - "schedule": ["before 4am on Monday"] + "schedule": ["0 1 * * 1 "] } diff --git a/package.json b/package.json index 63415c0..28a0943 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..bfba0dd --- /dev/null +++ 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', + }, + }, + }, +}; diff --git a/src/Providers.tsx b/src/Providers.tsx index 504d1dc..0a9715a 100644 --- a/src/Providers.tsx +++ b/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 = ({ children }) => { - const [colorScheme, setColorScheme] = useLocalStorage({ + const colorSchemeManager = localStorageColorSchemeManager({ key: "mantine-color-scheme", - defaultValue: "dark", - getInitialValueInEffect: true, }) - const toggleColorScheme = (value?: ColorScheme) => - setColorScheme(value || (colorScheme === "dark" ? "light" : "dark")) return ( <> - - - - {children} - - + + {children} + ) } diff --git a/src/WindowTitleBar.module.css b/src/WindowTitleBar.module.css new file mode 100644 index 0000000..bc63c10 --- /dev/null +++ b/src/WindowTitleBar.module.css @@ -0,0 +1,64 @@ +.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) + ); +} diff --git a/src/WindowTitleBar.tsx b/src/WindowTitleBar.tsx index 4d77bf6..59d26e2 100644 --- a/src/WindowTitleBar.tsx +++ b/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 = ({ children }) => { - const { classes, cx } = useStyles() const location = useLocation() return ( {children} ) diff --git a/src/components/Online-players.tsx b/src/components/Online-players.tsx index 392689a..e7a1d92 100644 --- a/src/components/Online-players.tsx +++ b/src/components/Online-players.tsx @@ -67,11 +67,11 @@ export const OnlinePlayers: React.FC = () => { onlinePlayersData?.timeStampMs || "" ).toLocaleString()}`} multiline - width={250} + w={300} withArrow >
- + Players in game = ({ <> - + {faction} - - + + - + {!ai ? ( {country} ) : null} @@ -74,14 +71,14 @@ export const PlayerCard: React.FC = ({ size="h3" onClick={() => open(coh3statsPlayerProfile(relicID))} > - {name} {self ? <>(You) : null} + {name} {self ? <>(You) : null} - {/**/} + {/**/} - + @@ -91,7 +88,7 @@ export const PlayerCard: React.FC = ({ - + diff --git a/src/components/PlayerLosses.tsx b/src/components/PlayerLosses.tsx index e172b8d..f400448 100644 --- a/src/components/PlayerLosses.tsx +++ b/src/components/PlayerLosses.tsx @@ -18,7 +18,7 @@ export const PlayerLosses: React.FC = ({ losses }) => { return ( <> - {content} + {content} ) diff --git a/src/components/PlayerStreak.tsx b/src/components/PlayerStreak.tsx index 64ff461..e598ddd 100644 --- a/src/components/PlayerStreak.tsx +++ b/src/components/PlayerStreak.tsx @@ -24,7 +24,7 @@ export const PlayerStreak: React.FC = ({ streak }) => { return ( <> - {content} + {content} ) diff --git a/src/components/PlayerWins.tsx b/src/components/PlayerWins.tsx index f222f39..60aa3ba 100644 --- a/src/components/PlayerWins.tsx +++ b/src/components/PlayerWins.tsx @@ -18,7 +18,7 @@ export const PlayerWins: React.FC = ({ wins }) => { return ( <> - {content} + {content} ) diff --git a/src/components/other/helper-icon.tsx b/src/components/other/helper-icon.tsx index 3446ae1..ebe8600 100644 --- a/src/components/other/helper-icon.tsx +++ b/src/components/other/helper-icon.tsx @@ -1,7 +1,6 @@ import { IconInfoCircle } from "@tabler/icons-react" import React from "react" -import { ActionIcon, Tooltip } from "@mantine/core" -import { FloatingPosition } from "@mantine/core/lib/Floating" +import { ActionIcon, FloatingPosition, Tooltip } from "@mantine/core" const HelperIcon = ({ content, @@ -15,12 +14,12 @@ const HelperIcon = ({ position?: FloatingPosition }) => { return ( - + {content}
} withArrow multiline - width={toolTipWidth} + w={toolTipWidth} position={position} > diff --git a/src/main.tsx b/src/main.tsx index b9bd2b3..c5059a0 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -8,6 +8,7 @@ import { listen } from "@tauri-apps/api/event" import { info } from "tauri-plugin-log-api" import { UploadNotifications } from "./components/UploadNotifications" import * as Sentry from "@sentry/react" +import "@mantine/core/styles.css" info("Start frontend") @@ -16,6 +17,7 @@ Sentry.init({ integrations: [Sentry.browserTracingIntegration()], tracesSampleRate: 0.1, tracePropagationTargets: ["localhost"], + ignoreErrors: ["window.__TAURI_IPC__ is not a function"], beforeSend(event, hint) { // On macOS we do only development, we can ignore all development errors if (event.contexts?.os?.name === "macOS") { diff --git a/src/views/About.tsx b/src/views/About.tsx index aaf2844..fdbe1d9 100644 --- a/src/views/About.tsx +++ b/src/views/About.tsx @@ -1,11 +1,8 @@ import { getVersion } from "@tauri-apps/api/app" import { appDataDir } from "@tauri-apps/api/path" import { open } from "@tauri-apps/api/shell" -import { useState, useEffect } from "react" +import React, { useState, useEffect } from "react" import { - Navbar, - AppShell, - Stack, Title, Code, Text, @@ -13,9 +10,8 @@ import { Anchor, Divider, Button, - Space, - Box, Grid, + Space, } from "@mantine/core" import logoBig from "../assets/logo/Square310x310Logo.png" import events from "../mixpanel/mixpanel" @@ -41,8 +37,8 @@ export const About: React.FC = () => { Coh3Stats Logo - - Version + + Version {appVersion} @@ -72,7 +68,8 @@ export const About: React.FC = () => { join our discord and get involved! - Reporting a bug + + Reporting a bug In case of issues please, please try to report them in Discord sections bugs-and-questions with as much details as possible. @@ -91,8 +88,9 @@ export const About: React.FC = () => {
{pathToLogs}logs +