display links and image placeholders in entries in the same color as the text so that they are not mistaken for commafeed actions

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)
 

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
+const useStyles = tss.create(() => ({
-    .withParams<{
+    content: {
-        theme: MantineTheme
+        // break long links or long words
-    }>()
+        overflowWrap: "anywhere",
-    .create(({ theme }) => ({
+        "& a": {
-        content: {
+            color: "inherit",
-            // break long links or long words
+            textDecoration: "underline",
-            overflowWrap: "anywhere",
-            "& a": {
-                color: theme.variantColorResolver({
-                    theme,
-                    color: theme.primaryColor,
-                    variant: "subtle",
-                }).color,
-            },
-            "& iframe": {
-                maxWidth: "100%",
-            },
-            "& pre, & code": {
-                whiteSpace: "pre-wrap",
-            },
         },
-    }))
+        "& 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()
-    const { classes } = useStyles({
-        theme,
-    })
     const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
 
     return (

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"
         />
     )
 }