Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

reorganize about page a little

Browse Source
This commit is contained in:
Athou
2022-08-15 18:32:18 +02:00
parent 5967706daa
commit 11f5b22cb4
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
commafeed-client/src/pages/app/AboutPage.tsx
View File

@@ -1,5 +1,5 @@
import { t, Trans } from "@lingui/macro" import { t, Trans } from "@lingui/macro"
import { Anchor, Box, Center, Container, Group, List, NativeSelect, SimpleGrid, Title } from "@mantine/core" import { Anchor, Box, Center, Container, createStyles, List, NativeSelect, SimpleGrid, Title } from "@mantine/core"
import { Constants } from "app/constants" import { Constants } from "app/constants"
import { redirectToApiDocumentation } from "app/slices/redirect" import { redirectToApiDocumentation } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store" import { useAppDispatch, useAppSelector } from "app/store"
@@ -8,13 +8,23 @@ import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
import React, { useState } from "react" import React, { useState } from "react"
import { TbHelp, TbKeyboard, TbPuzzle, TbRocket } from "react-icons/tb" import { TbHelp, TbKeyboard, TbPuzzle, TbRocket } from "react-icons/tb"
const useStyles = createStyles(() => ({
sectionTitle: {
display: "flex",
alignItems: "center",
},
}))
function Section(props: { title: string; icon: React.ReactNode; children: React.ReactNode }) { function Section(props: { title: string; icon: React.ReactNode; children: React.ReactNode }) {
const { classes } = useStyles()
return ( return (
<Box my="xs"> <Box my="xl">
<Group mb="xs"> <Box className={classes.sectionTitle} mb="xs">
<Box>{props.icon}</Box> {props.icon}
<Title order={3}>{props.title}</Title> <Title order={3} ml="xs">
</Group> {props.title}
</Title>
</Box>
<Box>{props.children}</Box> <Box>{props.children}</Box>
</Box> </Box>
) )
@@ -105,9 +115,6 @@ export function AboutPage() {
</form> </form>
</Box> </Box>
</Section> </Section>
<Section title={t`Keyboard shortcuts`} icon={<TbKeyboard size={24} />}>
<KeyboardShortcutsHelp />
</Section>
<Section title={t`Goodies`} icon={<TbPuzzle size={24} />}> <Section title={t`Goodies`} icon={<TbPuzzle size={24} />}>
<List> <List>
<List.Item> <List.Item>
@@ -150,6 +157,9 @@ export function AboutPage() {
</List.Item> </List.Item>
</List> </List>
</Section> </Section>
<Section title={t`Keyboard shortcuts`} icon={<TbKeyboard size={24} />}>
<KeyboardShortcutsHelp />
</Section>
<Section title={t`REST API`} icon={<TbRocket size={24} />}> <Section title={t`REST API`} icon={<TbRocket size={24} />}>
<Anchor onClick={() => dispatch(redirectToApiDocumentation())}> <Anchor onClick={() => dispatch(redirectToApiDocumentation())}>
<Trans>Go to the API documentation.</Trans> <Trans>Go to the API documentation.</Trans>