major mantine update

commafeed-client/src/pages/app/FeedEntriesPage.tsx

@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/macro"
-import { ActionIcon, Anchor, Box, Center, Divider, Group, Title, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Box, Center, createStyles, Divider, Group, Title, useMantineTheme } from "@mantine/core"
 import { useViewportSize } from "@mantine/hooks"
 import { Constants } from "app/constants"
 import { EntrySourceType, loadEntries } from "app/slices/entries"
@@ -27,7 +27,15 @@ interface FeedEntriesPageProps {
     sourceType: EntrySourceType
 }
 
+const useStyles = createStyles(() => ({
+    sourceWebsiteLink: {
+        color: "inherit",
+        textDecoration: "none",
+    },
+}))
+
 export function FeedEntriesPage(props: FeedEntriesPageProps) {
+    const { classes } = useStyles()
     const location = useLocation()
     const { id = Constants.categories.all.id } = useParams()
     const viewport = useViewportSize()
@@ -63,9 +71,9 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
         <Box mb={viewport.height - Constants.layout.headerHeight - 210}>
             <Group spacing="xl">
                 {sourceWebsiteUrl && (
-                    <Anchor href={sourceWebsiteUrl} target="_blank" rel="noreferrer" variant="text">
+                    <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
                         <Title order={3}>{sourceLabel}</Title>
-                    </Anchor>
+                    </a>
                 )}
                 {!sourceWebsiteUrl && <Title order={3}>{sourceLabel}</Title>}
                 {sourceLabel && (

commafeed-client/src/pages/app/Layout.tsx

@@ -1,6 +1,5 @@
 import {
     ActionIcon,
-    Anchor,
     AppShell,
     Box,
     Burger,
@@ -37,13 +36,13 @@ interface LayoutProps {
 }
 
 const sidebarPadding = DEFAULT_THEME.spacing.xs
-const sidebarRightBorderWidth = 1
+const sidebarRightBorderWidth = "1px"
 
 const useStyles = createStyles(theme => ({
     sidebarContent: {
-        maxWidth: Constants.layout.sidebarWidth - sidebarPadding * 2 - sidebarRightBorderWidth,
+        maxWidth: `calc(${Constants.layout.sidebarWidth} - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`,
         [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
-            maxWidth: `calc(100vw - ${sidebarPadding * 2 + sidebarRightBorderWidth}px)`,
+            maxWidth: `calc(100vw - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`,
         },
     },
     mainContentWrapper: {
@@ -68,14 +67,12 @@ const useStyles = createStyles(theme => ({
 function LogoAndTitle() {
     const dispatch = useAppDispatch()
     return (
-        <Anchor onClick={() => dispatch(redirectToRootCategory())} variant="text">
-            <Center inline>
-                <Logo size={24} />
-                <Title order={3} pl="md">
-                    CommaFeed
-                </Title>
-            </Center>
-        </Anchor>
+        <Center inline onClick={() => dispatch(redirectToRootCategory())} style={{ cursor: "pointer" }}>
+            <Logo size={24} />
+            <Title order={3} pl="md">
+                CommaFeed
+            </Title>
+        </Center>
     )
 }