add more css classes based on feedback

commafeed-client/src/components/ActionButton.tsx

@@ -29,7 +29,7 @@ export const ActionButton = forwardRef<HTMLDivElement, ActionButtonProps>((props
     const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
 
     return (
-        <Box ref={ref}>
+        <Box ref={ref} className="cf-action-button">
             {iconOnly && (
                 <Tooltip label={label} openDelay={Constants.tooltip.delay}>
                     <ActionIcon

commafeed-client/src/components/content/FeedEntries.tsx

@@ -288,7 +288,7 @@ export function FeedEntries() {
     return (
         <InfiniteScroll
             id="entries"
-            className={`view-mode-${viewMode}`}
+            className={`cf-entries cf-view-mode-${viewMode}`}
             initialLoad={false}
             loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}
             hasMore={hasMore}

commafeed-client/src/components/content/FeedEntry.tsx

@@ -184,7 +184,7 @@ export function FeedEntry(props: FeedEntryProps) {
             </a>
             {props.expanded && (
                 <Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
-                    <Box className={classes.body}>
+                    <Box className={`${classes.body} cf-content`}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>
                     <Divider variant="dashed" my={paddingY} className="cf-footer-divider" />

commafeed-client/src/components/sidebar/Tree.tsx

@@ -182,7 +182,7 @@ export function Tree() {
             <OnDesktop>
                 <TreeSearch feeds={feeds} />
             </OnDesktop>
-            <Box>
+            <Box className="cf-tree">
                 {allCategoryNode()}
                 {starredCategoryNode()}
                 {root.children.map(c => recursiveCategoryNode(c))}

commafeed-client/src/components/sidebar/TreeNode.tsx

@@ -68,7 +68,7 @@ export function TreeNode(props: TreeNodeProps) {
         <Box
             py={1}
             pl={props.level * 20}
-            className={`${classes.node} cf-treenode`}
+            className={`${classes.node} cf-treenode cf-treenode-${props.type}`}
             onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}
             data-id={props.id}
             data-type={props.type}

commafeed-client/src/components/sidebar/TreeSearch.tsx

@@ -1,7 +1,7 @@
 import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Trans } from "@lingui/react/macro"
-import { TextInput } from "@mantine/core"
+import { Box, TextInput } from "@mantine/core"
 import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
 import { redirectToFeed } from "app/redirect/thunks"
 import { useAppDispatch } from "app/store"
@@ -33,7 +33,7 @@ export function TreeSearch(props: TreeSearchProps) {
     useMousetrap("g u", () => spotlight.open())
 
     return (
-        <>
+        <Box className="cf-treesearch">
             <TextInput
                 placeholder={_(msg`Search`)}
                 leftSection={searchIcon}
@@ -58,6 +58,6 @@ export function TreeSearch(props: TreeSearchProps) {
                 }}
                 nothingFound={<Trans>Nothing found</Trans>}
             />
-        </>
+        </Box>
     )
 }

commafeed-client/src/pages/app/FeedEntriesPage.tsx

@@ -88,7 +88,7 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
     return (
         // add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding
         <Box mb={viewport.height * 0.7}>
-            <Group gap="xl">
+            <Group gap="xl" className="cf-entries-title">
                 {sourceWebsiteUrl && (
                     <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
                         <Title order={3}>{title}</Title>