reduce button spacing on desktop to be able to reduce breakpoint (#1106)

commafeed-client/src/app/constants.ts

@@ -89,7 +89,6 @@ export const Constants = {
         mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
         headerHeight: 60,
         entryMaxWidth: 650,
-        buttonSpacing: 14,
         isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
         isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
     },

commafeed-client/src/components/ActionButton.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core"
 import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
 import { ButtonProps } from "@mantine/core/lib/Button/Button"
-import { useMobile } from "hooks/useMobile"
+import { useActionButton } from "hooks/useActionButton"
 import { forwardRef, MouseEventHandler, ReactNode } from "react"
 
 interface ActionButtonProps {
@@ -18,9 +18,9 @@ interface ActionButtonProps {
  * Switches between Button with label (desktop) and ActionIcon (mobile)
  */
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
+    const { mobile } = useActionButton()
     const theme = useMantineTheme()
     const variant = props.variant ?? "subtle"
-    const mobile = useMobile("1600px")
     const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
     return iconOnly ? (
         <Tooltip label={props.label} openDelay={500}>

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

@@ -1,10 +1,10 @@
 import { t, Trans } from "@lingui/macro"
 import { Group, Indicator, MultiSelect, Popover } from "@mantine/core"
-import { Constants } from "app/constants"
 import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButton"
+import { useActionButton } from "hooks/useActionButton"
 import { useMobile } from "hooks/useMobile"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
 import { ShareButtons } from "./ShareButtons"
@@ -17,6 +17,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const tags = useAppSelector(state => state.user.tags)
     const mobile = useMobile()
+    const { spacing } = useActionButton()
     const dispatch = useAppDispatch()
 
     const showSharingButtons = sharingSettings && Object.values(sharingSettings).some(v => v)
@@ -32,7 +33,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
 
     return (
         <Group position="apart">
-            <Group spacing={Constants.layout.buttonSpacing}>
+            <Group spacing={spacing}>
                 {props.entry.markable && (
                     <ActionButton
                         icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}

commafeed-client/src/components/header/Header.tsx

@@ -1,12 +1,12 @@
 import { t, Trans } from "@lingui/macro"
 import { ActionIcon, Box, Center, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { Constants } from "app/constants"
 import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/slices/entries"
 import { changeReadingMode, changeReadingOrder } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ActionButton } from "components/ActionButton"
 import { Loader } from "components/Loader"
+import { useActionButton } from "hooks/useActionButton"
 import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useMobile } from "hooks/useMobile"
 import { useEffect } from "react"
@@ -32,6 +32,7 @@ function HeaderDivider() {
 }
 
 function HeaderToolbar(props: { children: React.ReactNode }) {
+    const { spacing } = useActionButton()
     const mobile = useMobile("480px")
     return mobile ? (
         // on mobile use all available width
@@ -45,7 +46,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
             {props.children}
         </Box>
     ) : (
-        <Group spacing={Constants.layout.buttonSpacing}>{props.children}</Group>
+        <Group spacing={spacing}>{props.children}</Group>
     )
 }
 

commafeed-client/src/hooks/useActionButton.ts

@@ -0,0 +1,9 @@
+import { useMantineTheme } from "@mantine/core"
+import { useMobile } from "hooks/useMobile"
+
+export const useActionButton = () => {
+    const theme = useMantineTheme()
+    const mobile = useMobile(theme.breakpoints.xl)
+    const spacing = mobile ? 14 : 0
+    return { mobile, spacing }
+}

commafeed-client/src/pages/WelcomePage.tsx

@@ -1,7 +1,6 @@
 import { Trans } from "@lingui/macro"
 import { Anchor, Box, Center, Container, Divider, Group, Image, Title, useMantineColorScheme } from "@mantine/core"
 import { client } from "app/client"
-import { Constants } from "app/constants"
 import { redirectToApiDocumentation, redirectToLogin, redirectToRegistration, redirectToRootCategory } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import welcome_page_dark from "assets/welcome_page_dark.png"
@@ -73,7 +72,7 @@ function Buttons() {
     })
 
     return (
-        <Group spacing={Constants.layout.buttonSpacing}>
+        <Group spacing={14}>
             {serverInfos?.demoAccountEnabled && (
                 <ActionButton
                     label={<Trans>Try the demo!</Trans>}