diff --git a/commafeed-client/.eslintrc b/commafeed-client/.eslintrc index a805766c..61e6130f 100644 --- a/commafeed-client/.eslintrc +++ b/commafeed-client/.eslintrc @@ -70,8 +70,6 @@ "groups": [ "useLocation", "useParams", - "useStyles", - "useMantineTheme", "useState", "useAppSelector", "useAppDispatch", diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx index c1561dd2..90e64601 100644 --- a/commafeed-client/src/components/content/FeedEntry.tsx +++ b/commafeed-client/src/components/content/FeedEntry.tsx @@ -17,19 +17,25 @@ interface FeedEntryProps { onHeaderClick: (e: React.MouseEvent) => void } -const useStyles = createStyles((theme, props: FeedEntryProps) => { +const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolean }) => { let backgroundColor 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 + if (props.compact) marginY = 6 + + let mobileMarginY = 6 + if (props.compact) mobileMarginY = 4 + const styles = { paper: { backgroundColor, - marginTop: theme.spacing.xs, - marginBottom: theme.spacing.xs, + marginTop: marginY, + marginBottom: marginY, [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: { - marginTop: "6px", - marginBottom: "6px", + marginTop: mobileMarginY, + marginBottom: mobileMarginY, }, }, body: { @@ -45,18 +51,23 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => { }) export function FeedEntry(props: FeedEntryProps) { - const { classes } = useStyles(props) const viewMode = useAppSelector(state => state.user.settings?.viewMode) - const dispatch = useAppDispatch() + const compact = viewMode === "title" + const compactHeader = compact && !props.expanded - const compactHeader = viewMode === "title" && !props.expanded + const { classes } = useStyles({ ...props, compact }) + + const dispatch = useAppDispatch() const swipeHandlers = useSwipeable({ onSwipedRight: () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read })), }) + const spacing = compact ? 8 : "xs" + const borderRadius = compact ? "xs" : "sm" + return ( - + - + {compactHeader && } {!compactHeader && } {props.expanded && ( - + - + )}