Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove usage of createStyles from mantine that is removed in v7

Browse Source
This commit is contained in:
Athou
2023-12-29 21:53:41 +01:00
parent dade873420
commit 2742b7fff6
16 changed files with 415 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
commafeed-client/src/components/content/FeedEntryContextMenu.tsx
View File

@@ -1,5 +1,5 @@
import { Trans } from "@lingui/macro"
import { createStyles, Group } from "@mantine/core"
import { Group, type MantineTheme, useMantineTheme } from "@mantine/core"
import { Constants } from "app/constants"
import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
import { redirectToFeed } from "app/redirect/thunks"
@@ -9,26 +9,34 @@ import { truncate } from "app/utils"
import { useBrowserExtension } from "hooks/useBrowserExtension"
import { Item, Menu, Separator } from "react-contexify"
import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
import { tss } from "tss"
interface FeedEntryContextMenuProps {
entry: Entry
}
const iconSize = 16
const useStyles = createStyles(theme => ({
menu: {
// apply mantine theme from MenuItem.styles.ts
fontSize: theme.fontSizes.sm,
"--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-bgColor": `${
theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
} !important`,
},
}))
const useStyles = tss
.withParams<{
theme: MantineTheme
}>()
.create(({ theme }) => ({
menu: {
// apply mantine theme from MenuItem.styles.ts
fontSize: theme.fontSizes.sm,
"--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-bgColor": `${
theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
} !important`,
},
}))
export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
const { classes, theme } = useStyles()
const theme = useMantineTheme()
const { classes } = useStyles({
theme,
})
const sourceType = useAppSelector(state => state.entries.source.type)
const dispatch = useAppDispatch()
const { openLinkInBackgroundTab } = useBrowserExtension()