Merge pull request #3693 from omnivore-app/fix/fix-empty-layout-pages

Fix for pages that dont need auth like terms and conditions page
This commit is contained in:
Jackson Harper 2024-03-19 13:24:21 +08:00 committed by GitHub
commit 81149e8b5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 60 additions and 14 deletions

View file

@ -0,0 +1,47 @@
import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
import { PageMetaData } from '../patterns/PageMetaData'
import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
import { SettingsDropdown } from './navMenu/SettingsDropdown'
type EmptyLayoutProps = {
title: string
children: React.ReactNode
}
export function EmptyLayout(props: EmptyLayoutProps): JSX.Element {
return (
<VStack
alignment="start"
distribution="start"
css={{ width: '100%', height: '100%', minHeight: '100vh' }}
>
<PageMetaData path="/" title={props.title} />
<VStack css={{ width: '100%', height: '100%' }}>
<Box
css={{
height: DEFAULT_HEADER_HEIGHT,
'@mdDown': {
display: 'none',
},
}}
></Box>
<Box
css={{
p: '15px',
display: 'none',
height: DEFAULT_HEADER_HEIGHT,
'@mdDown': {
display: 'flex',
},
}}
>
<SettingsDropdown />
</Box>
<HStack css={{ width: '100%', height: '100%' }} distribution="start">
{props.children}
</HStack>
<Box css={{ height: '120px', width: '100%' }} />
</VStack>
</VStack>
)
}

View file

@ -1,5 +1,4 @@
import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { useRouter } from 'next/router'

View file

@ -1,6 +1,6 @@
import Head from 'next/head'
import { ErrorLayout } from '../components/templates/ErrorLayout'
import { SettingsLayout } from '../components/templates/SettingsLayout'
import { EmptyLayout } from '../components/templates/EmptyLayout'
export default function Custom404(): JSX.Element {
return (
@ -8,9 +8,9 @@ export default function Custom404(): JSX.Element {
<Head>
<title>Page Not Found</title>
</Head>
<SettingsLayout title="Page could not be found">
<EmptyLayout title="Page could not be found">
<ErrorLayout statusCode={404} message="This page could not be found." />
</SettingsLayout>
</EmptyLayout>
</>
)
}

View file

@ -1,6 +1,6 @@
import { ErrorLayout } from '../components/templates/ErrorLayout'
import Head from 'next/head'
import { SettingsLayout } from '../components/templates/SettingsLayout'
import { EmptyLayout } from '../components/templates/EmptyLayout'
export default function Custom500(): JSX.Element {
return (
@ -8,9 +8,9 @@ export default function Custom500(): JSX.Element {
<Head>
<title>An unknown error occurred.</title>
</Head>
<SettingsLayout title="An unknown error occurred">
<ErrorLayout statusCode={404} message="An unknown error occurred." />
</SettingsLayout>
<EmptyLayout title="An unknown error occurred">
<ErrorLayout statusCode={404} message="An unknown error occurred." />
</EmptyLayout>
</>
)
}

View file

@ -1,7 +1,7 @@
import { useEffect, useCallback } from 'react'
import { Button } from '../components/elements/Button'
import { HStack } from '../components/elements/LayoutPrimitives'
import { SettingsLayout } from '../components/templates/SettingsLayout'
import { EmptyLayout } from '../components/templates/EmptyLayout'
import { setupAnalytics } from '../lib/analytics'
export default function Support(): JSX.Element {
@ -18,7 +18,7 @@ export default function Support(): JSX.Element {
}, [initAnalytics])
return (
<SettingsLayout title="Support">
<EmptyLayout title="Support">
<HStack
alignment="center"
distribution="end"
@ -46,6 +46,6 @@ export default function Support(): JSX.Element {
{'Open Chat Window'}
</Button>
</HStack>
</SettingsLayout>
</EmptyLayout>
)
}

View file

@ -1,6 +1,6 @@
import { useRouter } from 'next/router'
import { TermsAndConditions } from '../components/templates/TermsAndConditions'
import { SettingsLayout } from '../components/templates/SettingsLayout'
import { EmptyLayout } from '../components/templates/EmptyLayout'
export default function Terms(): JSX.Element {
const router = useRouter()
@ -11,9 +11,9 @@ export default function Terms(): JSX.Element {
return <TermsAndConditions />
} else {
return (
<SettingsLayout title="Terms and Conditions">
<EmptyLayout title="Terms and Conditions">
<TermsAndConditions />
</SettingsLayout>
</EmptyLayout>
)
}
}