add more css classes based on feedback

This commit is contained in:
Athou
2025-05-06 19:24:30 +02:00
parent d417655a86
commit b5c197f499
7 changed files with 9 additions and 9 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -68,7 +68,7 @@ export function TreeNode(props: TreeNodeProps) {
<Box <Box
py={1} py={1}
pl={props.level * 20} 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)} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}
data-id={props.id} data-id={props.id}
data-type={props.type} data-type={props.type}

View File

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

View File

@@ -88,7 +88,7 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
return ( 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 // 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}> <Box mb={viewport.height * 0.7}>
<Group gap="xl"> <Group gap="xl" className="cf-entries-title">
{sourceWebsiteUrl && ( {sourceWebsiteUrl && (
<a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}> <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
<Title order={3}>{title}</Title> <Title order={3}>{title}</Title>