major mantine update

commafeed-client/src/components/ActionButtton.tsx

@@ -1,5 +1,6 @@
-import { ActionIcon, Button, ButtonVariant, useMantineTheme } from "@mantine/core"
-import { ActionIconVariant } from "@mantine/core/lib/ActionIcon/ActionIcon.styles"
+import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
+import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
+import { ButtonProps } from "@mantine/core/lib/Button/Button"
 import { useMediaQuery } from "@mantine/hooks"
 import { forwardRef, MouseEventHandler, ReactNode } from "react"
 
@@ -8,7 +9,7 @@ interface ActionButtonProps {
     icon?: ReactNode
     label?: ReactNode
     onClick?: MouseEventHandler
-    variant?: ActionIconVariant & ButtonVariant
+    variant?: ActionIconProps["variant"] & ButtonProps["variant"]
     showLabelOnMobile?: boolean
 }
 
@@ -18,7 +19,7 @@ interface ActionButtonProps {
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
     const theme = useMantineTheme()
     const variant = props.variant ?? "subtle"
-    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
     const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
     return iconOnly ? (
         <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>

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

@@ -1,4 +1,4 @@
-import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
+import { Box, createStyles, Divider, Paper } from "@mantine/core"
 import { MantineNumberSize } from "@mantine/styles"
 import { Constants } from "app/constants"
 import { markEntry } from "app/slices/entries"
@@ -25,7 +25,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
     if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
     else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
 
-    let marginY = theme.spacing.xs
+    let marginY = 10
     if (props.viewMode === "title") marginY = 2
     else if (props.viewMode === "cozy") marginY = 6
 
@@ -53,6 +53,10 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
                 },
             },
         },
+        headerLink: {
+            color: "inherit",
+            textDecoration: "none",
+        },
         body: {
             maxWidth: Constants.layout.entryMaxWidth,
         },
@@ -91,8 +95,8 @@ export function FeedEntry(props: FeedEntryProps) {
     const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
     return (
         <Paper withBorder radius={borderRadius} className={classes.paper}>
-            <Anchor
-                variant="text"
+            <a
+                className={classes.headerLink}
                 href={props.entry.url}
                 target="_blank"
                 rel="noreferrer"
@@ -104,7 +108,7 @@ export function FeedEntry(props: FeedEntryProps) {
                     {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
                     {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                 </Box>
-            </Anchor>
+            </a>
             {props.expanded && (
                 <Box px={paddingX} pb={paddingY}>
                     <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>

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

@@ -20,7 +20,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
     const [scrollPosition, setScrollPosition] = useState(0)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const tags = useAppSelector(state => state.user.tags)
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
     const dispatch = useAppDispatch()
 
     const showSharingButtons = sharingSettings && Object.values(sharingSettings).some(v => v)
@@ -74,7 +74,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 {tags && (
                     <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
                         <Popover.Target>
-                            <Indicator label={props.entry.tags.length} showZero={false} dot={false} inline size={16}>
+                            <Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
                                 <ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
                             </Indicator>
                         </Popover.Target>