diff --git a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx index 4bc79e91..cf012a5e 100644 --- a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx +++ b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx @@ -14,7 +14,6 @@ interface ImageWithPlaceholderWhileLoadingProps { placeholderHeight?: number placeholderBackgroundColor?: string placeholderIconSize?: number - placeholderIconColor?: string } const useStyles = tss @@ -24,20 +23,12 @@ const useStyles = tss placeholderWidth?: number placeholderHeight?: number placeholderBackgroundColor?: string - placeholderIconColor?: string }>() .create(props => ({ placeholder: { width: props.placeholderWidth ?? 400, height: props.placeholderHeight ?? 600, maxWidth: "100%", - color: - props.placeholderIconColor ?? - props.theme.variantColorResolver({ - theme: props.theme, - color: props.theme.primaryColor, - variant: "subtle", - }).color, backgroundColor: props.placeholderBackgroundColor ?? (props.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]), @@ -49,7 +40,6 @@ export function ImageWithPlaceholderWhileLoading({ height, placeholderBackgroundColor, placeholderHeight, - placeholderIconColor, placeholderIconSize, placeholderWidth, src, @@ -64,7 +54,6 @@ export function ImageWithPlaceholderWhileLoading({ placeholderWidth, placeholderHeight, placeholderBackgroundColor, - placeholderIconColor, }) const [loading, setLoading] = useState(true) diff --git a/commafeed-client/src/components/content/Content.tsx b/commafeed-client/src/components/content/Content.tsx index cc6218e7..e6d3b67d 100644 --- a/commafeed-client/src/components/content/Content.tsx +++ b/commafeed-client/src/components/content/Content.tsx @@ -1,4 +1,4 @@ -import { Box, type MantineTheme, Mark, useMantineTheme } from "@mantine/core" +import { Box, Mark } from "@mantine/core" import { Constants } from "app/constants" import { calculatePlaceholderSize } from "app/utils" import { BasicHtmlStyles } from "components/content/BasicHtmlStyles" @@ -13,29 +13,22 @@ export interface ContentProps { highlight?: string } -const useStyles = tss - .withParams<{ - theme: MantineTheme - }>() - .create(({ theme }) => ({ - content: { - // break long links or long words - overflowWrap: "anywhere", - "& a": { - color: theme.variantColorResolver({ - theme, - color: theme.primaryColor, - variant: "subtle", - }).color, - }, - "& iframe": { - maxWidth: "100%", - }, - "& pre, & code": { - whiteSpace: "pre-wrap", - }, +const useStyles = tss.create(() => ({ + content: { + // break long links or long words + overflowWrap: "anywhere", + "& a": { + color: "inherit", + textDecoration: "underline", }, - })) + "& iframe": { + maxWidth: "100%", + }, + "& pre, & code": { + whiteSpace: "pre-wrap", + }, + }, +})) const transform: TransformCallback = node => { if (node.tagName === "IMG") { @@ -94,10 +87,7 @@ class HighlightMatcher extends Matcher { // memoize component because Interweave is costly const Content = React.memo((props: ContentProps) => { - const theme = useMantineTheme() - const { classes } = useStyles({ - theme, - }) + const { classes } = useStyles() const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : [] return ( diff --git a/commafeed-client/src/components/content/FeedFavicon.tsx b/commafeed-client/src/components/content/FeedFavicon.tsx index ae5e4ca4..54504590 100644 --- a/commafeed-client/src/components/content/FeedFavicon.tsx +++ b/commafeed-client/src/components/content/FeedFavicon.tsx @@ -16,7 +16,6 @@ export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) { placeholderHeight={size} placeholderBackgroundColor="inherit" placeholderIconSize={size} - placeholderIconColor="inherit" /> ) }