From b6107c3330f13f8a6d20093a87940139c5965af9 Mon Sep 17 00:00:00 2001 From: Athou Date: Mon, 12 Feb 2024 07:37:28 +0100 Subject: [PATCH] pass theme and colorscheme in tss context to avoid repetitions (#1241) --- .../ImageWithPlaceholderWhileLoading.tsx | 9 +-- .../src/components/content/FeedEntry.tsx | 9 +-- .../content/FeedEntryCompactHeader.tsx | 4 -- .../content/FeedEntryContextMenu.tsx | 31 ++++------ .../components/content/FeedEntryHeader.tsx | 4 -- .../src/components/content/ShareButtons.tsx | 9 +-- .../src/components/sidebar/TreeNode.tsx | 9 +-- commafeed-client/src/pages/ErrorPage.tsx | 57 +++++++++---------- commafeed-client/src/tss.ts | 11 ++-- 9 files changed, 48 insertions(+), 95 deletions(-) diff --git a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx index cf012a5e..bc68fd9c 100644 --- a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx +++ b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx @@ -1,5 +1,4 @@ -import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core" -import { useColorScheme } from "hooks/useColorScheme" +import { Box, Center } from "@mantine/core" import { useState } from "react" import { TbPhoto } from "react-icons/tb" import { tss } from "tss" @@ -18,8 +17,6 @@ interface ImageWithPlaceholderWhileLoadingProps { const useStyles = tss .withParams<{ - theme: MantineTheme - colorScheme: "light" | "dark" placeholderWidth?: number placeholderHeight?: number placeholderBackgroundColor?: string @@ -46,11 +43,7 @@ export function ImageWithPlaceholderWhileLoading({ title, width, }: ImageWithPlaceholderWhileLoadingProps) { - const theme = useMantineTheme() - const colorScheme = useColorScheme() const { classes } = useStyles({ - theme, - colorScheme, placeholderWidth, placeholderHeight, placeholderBackgroundColor, diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx index 9483b4b7..99fea342 100644 --- a/commafeed-client/src/components/content/FeedEntry.tsx +++ b/commafeed-client/src/components/content/FeedEntry.tsx @@ -1,7 +1,6 @@ -import { Box, Divider, type MantineRadius, type MantineSpacing, type MantineTheme, Paper, useMantineTheme } from "@mantine/core" +import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core" import { Constants } from "app/constants" import { type Entry, type ViewMode } from "app/types" -import { useColorScheme } from "hooks/useColorScheme" import { useViewMode } from "hooks/useViewMode" import React from "react" import { useSwipeable } from "react-swipeable" @@ -26,8 +25,6 @@ interface FeedEntryProps { const useStyles = tss .withParams<{ - theme: MantineTheme - colorScheme: "light" | "dark" read: boolean expanded: boolean viewMode: ViewMode @@ -96,12 +93,8 @@ const useStyles = tss }) export function FeedEntry(props: FeedEntryProps) { - const theme = useMantineTheme() - const colorScheme = useColorScheme() const { viewMode } = useViewMode() const { classes, cx } = useStyles({ - theme, - colorScheme, read: props.entry.read, expanded: props.expanded, viewMode, diff --git a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx index 4be95c1c..e91b69d7 100644 --- a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx +++ b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx @@ -2,7 +2,6 @@ import { Box, Text } from "@mantine/core" import { type Entry } from "app/types" import { RelativeDate } from "components/RelativeDate" import { OnDesktop } from "components/responsive/OnDesktop" -import { useColorScheme } from "hooks/useColorScheme" import { tss } from "tss" import { FeedEntryTitle } from "./FeedEntryTitle" import { FeedFavicon } from "./FeedFavicon" @@ -13,7 +12,6 @@ export interface FeedEntryHeaderProps { const useStyles = tss .withParams<{ - colorScheme: "light" | "dark" read: boolean }>() .create(({ colorScheme, read }) => ({ @@ -42,9 +40,7 @@ const useStyles = tss })) export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) { - const colorScheme = useColorScheme() const { classes } = useStyles({ - colorScheme, read: props.entry.read, }) return ( diff --git a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx index 8f2951b9..c698a251 100644 --- a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx +++ b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx @@ -1,5 +1,5 @@ import { Trans } from "@lingui/macro" -import { Group, type MantineTheme, useMantineTheme } from "@mantine/core" +import { Group } from "@mantine/core" import { Constants } from "app/constants" import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks" import { redirectToFeed } from "app/redirect/thunks" @@ -17,28 +17,19 @@ interface FeedEntryContextMenuProps { } const iconSize = 16 -const useStyles = tss - .withParams<{ - theme: MantineTheme - colorScheme: "light" | "dark" - }>() - .create(({ theme, colorScheme }) => ({ - menu: { - // apply mantine theme from MenuItem.styles.ts - fontSize: theme.fontSizes.sm, - "--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, - "--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, - "--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`, - }, - })) +const useStyles = tss.create(({ theme, colorScheme }) => ({ + menu: { + // apply mantine theme from MenuItem.styles.ts + fontSize: theme.fontSizes.sm, + "--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, + "--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, + "--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`, + }, +})) export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) { - const theme = useMantineTheme() const colorScheme = useColorScheme() - const { classes } = useStyles({ - theme, - colorScheme, - }) + const { classes } = useStyles() const sourceType = useAppSelector(state => state.entries.source.type) const dispatch = useAppDispatch() const { openLinkInBackgroundTab } = useBrowserExtension() diff --git a/commafeed-client/src/components/content/FeedEntryHeader.tsx b/commafeed-client/src/components/content/FeedEntryHeader.tsx index 4142a9c0..96e5b1f8 100644 --- a/commafeed-client/src/components/content/FeedEntryHeader.tsx +++ b/commafeed-client/src/components/content/FeedEntryHeader.tsx @@ -1,7 +1,6 @@ import { Box, Space, Text } from "@mantine/core" import { type Entry } from "app/types" import { RelativeDate } from "components/RelativeDate" -import { useColorScheme } from "hooks/useColorScheme" import { tss } from "tss" import { FeedEntryTitle } from "./FeedEntryTitle" import { FeedFavicon } from "./FeedFavicon" @@ -13,7 +12,6 @@ export interface FeedEntryHeaderProps { const useStyles = tss .withParams<{ - colorScheme: "light" | "dark" read: boolean }>() .create(({ colorScheme, read }) => ({ @@ -28,9 +26,7 @@ const useStyles = tss })) export function FeedEntryHeader(props: FeedEntryHeaderProps) { - const colorScheme = useColorScheme() const { classes } = useStyles({ - colorScheme, read: props.entry.read, }) return ( diff --git a/commafeed-client/src/components/content/ShareButtons.tsx b/commafeed-client/src/components/content/ShareButtons.tsx index 6ab90ebc..684caae9 100644 --- a/commafeed-client/src/components/content/ShareButtons.tsx +++ b/commafeed-client/src/components/content/ShareButtons.tsx @@ -1,8 +1,7 @@ -import { ActionIcon, Box, type MantineTheme, SimpleGrid, useMantineTheme } from "@mantine/core" +import { ActionIcon, Box, SimpleGrid } from "@mantine/core" import { Constants } from "app/constants" import { useAppSelector } from "app/store" import { type SharingSettings } from "app/types" -import { useColorScheme } from "hooks/useColorScheme" import { type IconType } from "react-icons" import { tss } from "tss" @@ -10,8 +9,6 @@ type Color = `#${string}` const useStyles = tss .withParams<{ - theme: MantineTheme - colorScheme: "light" | "dark" color: Color }>() .create(({ theme, colorScheme, color }) => ({ @@ -23,11 +20,7 @@ const useStyles = tss })) function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) { - const theme = useMantineTheme() - const colorScheme = useColorScheme() const { classes } = useStyles({ - theme, - colorScheme, color, }) diff --git a/commafeed-client/src/components/sidebar/TreeNode.tsx b/commafeed-client/src/components/sidebar/TreeNode.tsx index afd17900..bb20eb69 100644 --- a/commafeed-client/src/components/sidebar/TreeNode.tsx +++ b/commafeed-client/src/components/sidebar/TreeNode.tsx @@ -1,6 +1,5 @@ -import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core" +import { Box, Center } from "@mantine/core" import { FeedFavicon } from "components/content/FeedFavicon" -import { useColorScheme } from "hooks/useColorScheme" import React, { type ReactNode } from "react" import { tss } from "tss" import { UnreadCount } from "./UnreadCount" @@ -20,8 +19,6 @@ interface TreeNodeProps { const useStyles = tss .withParams<{ - theme: MantineTheme - colorScheme: "dark" | "light" selected: boolean hasError: boolean hasUnread: boolean @@ -60,11 +57,7 @@ const useStyles = tss }) export function TreeNode(props: TreeNodeProps) { - const theme = useMantineTheme() - const colorScheme = useColorScheme() const { classes } = useStyles({ - theme, - colorScheme, selected: props.selected, hasError: props.hasError, hasUnread: props.unread > 0, diff --git a/commafeed-client/src/pages/ErrorPage.tsx b/commafeed-client/src/pages/ErrorPage.tsx index 51795949..36c67bb1 100644 --- a/commafeed-client/src/pages/ErrorPage.tsx +++ b/commafeed-client/src/pages/ErrorPage.tsx @@ -1,44 +1,39 @@ import { Trans } from "@lingui/macro" -import { Box, Button, Container, Group, type MantineTheme, Text, Title, useMantineTheme } from "@mantine/core" +import { Box, Button, Container, Group, Text, Title } from "@mantine/core" import { TbRefresh } from "react-icons/tb" import { tss } from "tss" import { PageTitle } from "./PageTitle" -const useStyles = tss - .withParams<{ - theme: MantineTheme - }>() - .create(({ theme }) => ({ - root: { - paddingTop: 80, - }, +const useStyles = tss.create(({ theme }) => ({ + root: { + paddingTop: 80, + }, - label: { - textAlign: "center", - fontWeight: "bold", - fontSize: 120, - lineHeight: 1, - marginBottom: `calc(${theme.spacing.xl} * 1.5)`, - color: theme.colors[theme.primaryColor][3], - }, + label: { + textAlign: "center", + fontWeight: "bold", + fontSize: 120, + lineHeight: 1, + marginBottom: `calc(${theme.spacing.xl} * 1.5)`, + color: theme.colors[theme.primaryColor][3], + }, - title: { - textAlign: "center", - fontWeight: "bold", - fontSize: 32, - }, + title: { + textAlign: "center", + fontWeight: "bold", + fontSize: 32, + }, - description: { - maxWidth: 540, - margin: "auto", - marginTop: theme.spacing.xl, - marginBottom: `calc(${theme.spacing.xl} * 1.5)`, - }, - })) + description: { + maxWidth: 540, + margin: "auto", + marginTop: theme.spacing.xl, + marginBottom: `calc(${theme.spacing.xl} * 1.5)`, + }, +})) export function ErrorPage(props: { error: Error }) { - const theme = useMantineTheme() - const { classes } = useStyles({ theme }) + const { classes } = useStyles() return (
diff --git a/commafeed-client/src/tss.ts b/commafeed-client/src/tss.ts index 2b6cfbe0..2c6809a9 100644 --- a/commafeed-client/src/tss.ts +++ b/commafeed-client/src/tss.ts @@ -1,11 +1,14 @@ +import { useMantineTheme } from "@mantine/core" +import { useColorScheme } from "hooks/useColorScheme" import { createTss } from "tss-react" const useContext = () => { // return anything here that will be accessible in tss.create() - // we don't need anything right now - return {} + + const theme = useMantineTheme() + const colorScheme = useColorScheme() + + return { theme, colorScheme } } export const { tss } = createTss({ useContext }) - -export const useStyles = tss.create({})