garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

extract page title to its own component

Browse Source
This commit is contained in:
Athou
2022-08-15 10:01:26 +02:00
parent 6f26c54b62
commit a8e818f97f
6 changed files with 25 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
commafeed-client/src/pages/ErrorPage.tsx
View File

@@ -1,7 +1,7 @@
import { Trans } from "@lingui/macro" import { Trans } from "@lingui/macro"
import { Box, Button, Center, Container, createStyles, Group, Stack, Text, Title } from "@mantine/core" import { Box, Button, Container, createStyles, Group, Text, Title } from "@mantine/core"
import { Logo } from "components/Logo"
import { TbRefresh } from "react-icons/tb" import { TbRefresh } from "react-icons/tb"
import { PageTitle } from "./PageTitle"
const useStyles = createStyles(theme => ({ const useStyles = createStyles(theme => ({
root: { root: {
@@ -37,14 +37,7 @@ export function ErrorPage(props: { error: Error }) {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Container> <Container>
<Stack> <PageTitle />
<Center my="xl">
<Logo size={48} />
<Title order={1} ml="md">
CommaFeed
</Title>
</Center>
</Stack>
<Box className={classes.label}> <Box className={classes.label}>
<Trans>Oops!</Trans> <Trans>Oops!</Trans>
</Box> </Box>

11
commafeed-client/src/pages/LoadingPage.tsx
View File

@@ -1,6 +1,6 @@
import { Center, Container, RingProgress, Text, Title, useMantineTheme } from "@mantine/core" import { Center, Container, RingProgress, Text, useMantineTheme } from "@mantine/core"
import { Logo } from "components/Logo"
import { useAppLoading } from "hooks/useAppLoading" import { useAppLoading } from "hooks/useAppLoading"
import { PageTitle } from "./PageTitle"
export function LoadingPage() { export function LoadingPage() {
const theme = useMantineTheme() const theme = useMantineTheme()
@@ -8,12 +8,7 @@ export function LoadingPage() {
return ( return (
<Container size="xs"> <Container size="xs">
<Center my="xl"> <PageTitle />
<Logo size={48} />
<Title order={1} ml="md">
CommaFeed
</Title>
</Center>
<Center> <Center>
<RingProgress <RingProgress

13
commafeed-client/src/pages/PageTitle.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Center, Title } from "@mantine/core"
import { Logo } from "../components/Logo"
export function PageTitle() {
return (
<Center my="xl">
<Logo size={48} />
<Title order={1} ml="md">
CommaFeed
</Title>
</Center>
)
}

9
commafeed-client/src/pages/auth/LoginPage.tsx
View File

@@ -6,7 +6,7 @@ import { redirectToRootCategory } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store" import { useAppDispatch, useAppSelector } from "app/store"
import { LoginRequest } from "app/types" import { LoginRequest } from "app/types"
import { Alert } from "components/Alert" import { Alert } from "components/Alert"
import { Logo } from "components/Logo" import { PageTitle } from "pages/PageTitle"
import { useAsyncCallback } from "react-async-hook" import { useAsyncCallback } from "react-async-hook"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
@@ -29,12 +29,7 @@ export function LoginPage() {
return ( return (
<Container size="xs"> <Container size="xs">
<Center my="xl"> <PageTitle />
<Logo size={48} />
<Title order={1} ml="md">
CommaFeed
</Title>
</Center>
<Paper> <Paper>
<Title order={2} mb="md"> <Title order={2} mb="md">
<Trans>Log in</Trans> <Trans>Log in</Trans>

9
commafeed-client/src/pages/auth/PasswordRecoveryPage.tsx
View File

@@ -4,7 +4,7 @@ import { useForm } from "@mantine/form"
import { client, errorToStrings } from "app/client" import { client, errorToStrings } from "app/client"
import { PasswordResetRequest } from "app/types" import { PasswordResetRequest } from "app/types"
import { Alert } from "components/Alert" import { Alert } from "components/Alert"
import { Logo } from "components/Logo" import { PageTitle } from "pages/PageTitle"
import { useState } from "react" import { useState } from "react"
import { useAsyncCallback } from "react-async-hook" import { useAsyncCallback } from "react-async-hook"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
@@ -26,12 +26,7 @@ export function PasswordRecoveryPage() {
return ( return (
<Container size="xs"> <Container size="xs">
<Center my="xl"> <PageTitle />
<Logo size={48} />
<Title order={1} ml="md">
CommaFeed
</Title>
</Center>
<Paper> <Paper>
<Title order={2} mb="md"> <Title order={2} mb="md">
<Trans>Password Recovery</Trans> <Trans>Password Recovery</Trans>

9
commafeed-client/src/pages/auth/RegistrationPage.tsx
View File

@@ -6,7 +6,7 @@ import { redirectToRootCategory } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store" import { useAppDispatch, useAppSelector } from "app/store"
import { RegistrationRequest } from "app/types" import { RegistrationRequest } from "app/types"
import { Alert } from "components/Alert" import { Alert } from "components/Alert"
import { Logo } from "components/Logo" import { PageTitle } from "pages/PageTitle"
import { useAsyncCallback } from "react-async-hook" import { useAsyncCallback } from "react-async-hook"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
@@ -30,12 +30,7 @@ export function RegistrationPage() {
return ( return (
<Container size="xs"> <Container size="xs">
<Center my="xl"> <PageTitle />
<Logo size={48} />
<Title order={1} ml="md">
CommaFeed
</Title>
</Center>
<Paper> <Paper>
<Title order={2} mb="md"> <Title order={2} mb="md">
<Trans>Sign up</Trans> <Trans>Sign up</Trans>