pass theme and colorscheme in tss context to avoid repetitions (#1241)

commafeed-client/src/pages/ErrorPage.tsx

@@ -1,44 +1,39 @@
 import { Trans } from "@lingui/macro"
-import { Box, Button, Container, Group, type MantineTheme, Text, Title, useMantineTheme } from "@mantine/core"
+import { Box, Button, Container, Group, Text, Title } from "@mantine/core"
 import { TbRefresh } from "react-icons/tb"
 import { tss } from "tss"
 import { PageTitle } from "./PageTitle"
 
-const useStyles = tss
-    .withParams<{
-        theme: MantineTheme
-    }>()
-    .create(({ theme }) => ({
-        root: {
-            paddingTop: 80,
-        },
+const useStyles = tss.create(({ theme }) => ({
+    root: {
+        paddingTop: 80,
+    },
 
-        label: {
-            textAlign: "center",
-            fontWeight: "bold",
-            fontSize: 120,
-            lineHeight: 1,
-            marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
-            color: theme.colors[theme.primaryColor][3],
-        },
+    label: {
+        textAlign: "center",
+        fontWeight: "bold",
+        fontSize: 120,
+        lineHeight: 1,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
+        color: theme.colors[theme.primaryColor][3],
+    },
 
-        title: {
-            textAlign: "center",
-            fontWeight: "bold",
-            fontSize: 32,
-        },
+    title: {
+        textAlign: "center",
+        fontWeight: "bold",
+        fontSize: 32,
+    },
 
-        description: {
-            maxWidth: 540,
-            margin: "auto",
-            marginTop: theme.spacing.xl,
-            marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
-        },
-    }))
+    description: {
+        maxWidth: 540,
+        margin: "auto",
+        marginTop: theme.spacing.xl,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
+    },
+}))
 
 export function ErrorPage(props: { error: Error }) {
-    const theme = useMantineTheme()
-    const { classes } = useStyles({ theme })
+    const { classes } = useStyles()
 
     return (
         <div className={classes.root}>