remove usage of createStyles from mantine that is removed in v7

commafeed-client/src/components/content/FeedEntryCompactHeader.tsx

@@ -1,7 +1,8 @@
-import { Box, createStyles, Text } from "@mantine/core"
+import { Box, type MantineTheme, Text, useMantineTheme } from "@mantine/core"
 import { type Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
+import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 import { FeedFavicon } from "./FeedFavicon"
 
@@ -9,32 +10,42 @@ export interface FeedEntryHeaderProps {
     entry: Entry
 }
 
-const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({
-    wrapper: {
-        display: "flex",
-        alignItems: "center",
-        columnGap: "10px",
-    },
-    title: {
-        flexGrow: 1,
-        fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    feedName: {
-        width: "145px",
-        minWidth: "145px",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    date: {
-        whiteSpace: "nowrap",
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+        read: boolean
+    }>()
+    .create(({ read, theme }) => ({
+        wrapper: {
+            display: "flex",
+            alignItems: "center",
+            columnGap: "10px",
+        },
+        title: {
+            flexGrow: 1,
+            fontWeight: theme.colorScheme === "light" && !read ? "bold" : "inherit",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        feedName: {
+            width: "145px",
+            minWidth: "145px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        date: {
+            whiteSpace: "nowrap",
+        },
+    }))
+
 export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles(props)
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+        read: props.entry.read,
+    })
     return (
         <Box className={classes.wrapper}>
             <Box>