From 412fc52f1cc442ca6047c9ae0982a8fe9da24811 Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Sun, 28 May 2023 12:57:28 +0200
Subject: [PATCH] add css classes to help with custom css rules (#1061)

---
 .../src/components/content/FeedEntries.tsx        |  1 +
 .../src/components/content/FeedEntry.tsx          | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx
index 29a6f243..51a0c7ac 100644
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -263,6 +263,7 @@ export function FeedEntries() {
                     <FeedEntry
                         entry={entry}
                         expanded={!!entry.expanded || viewMode === "expanded"}
+                        selected={entry.id === selectedEntryId}
                         showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
                         onHeaderClick={event => headerClicked(entry, event)}
                     />
diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx
index 99dd8b85..84515b90 100644
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -16,6 +16,7 @@ import { FeedEntryHeader } from "./FeedEntryHeader"
 interface FeedEntryProps {
     entry: Entry
     expanded: boolean
+    selected: boolean
     showSelectionIndicator: boolean
     onHeaderClick: (e: React.MouseEvent) => void
 }
@@ -72,7 +73,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
 
 export function FeedEntry(props: FeedEntryProps) {
     const { viewMode } = useViewMode()
-    const { classes } = useStyles({ ...props, viewMode })
+    const { classes, cx } = useStyles({ ...props, viewMode })
 
     const dispatch = useAppDispatch()
 
@@ -95,7 +96,17 @@ export function FeedEntry(props: FeedEntryProps) {
 
     const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
     return (
-        <Paper withBorder radius={borderRadius} className={classes.paper}>
+        <Paper
+            withBorder
+            radius={borderRadius}
+            className={cx(classes.paper, {
+                read: props.entry.read,
+                unread: !props.entry.read,
+                expanded: props.expanded,
+                selected: props.selected,
+                "show-selection-indicator": props.showSelectionIndicator,
+            })}
+        >
             <a
                 className={classes.headerLink}
                 href={props.entry.url}