prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use SettingsLayout instead of Primary layout for the settings items

Browse source
This commit is contained in:
Jackson Harper 2023-02-27 14:01:44 +08:00
parent 712b163512
commit 9c00555ab7
13 changed files with 221 additions and 367 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

217
packages/web/components/templates/ArticleHighlights.tsx
View file

@ -1,217 +0,0 @@
import { useRouter } from 'next/router'
import { PublicArticleAttributes } from '../../lib/networking/queries/useGetPublicArticleQuery'
import { PrimaryLayout } from './PrimaryLayout'
import { StyledText } from '../elements/StyledText'
import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
import { authoredByText } from '../patterns/ArticleSubtitle'
import Image from 'next/image'
import { HighlightFooter, PublicHighlightView } from '../patterns/HighlightView'
import { useMemo, useRef, useState } from 'react'
import { Highlight } from '../../lib/networking/fragments/highlightFragment'
import { Button } from '../elements/Button'
type ArticleHighlightsProps = {
publicArticle: PublicArticleAttributes
showAllHighlights: boolean
selectedHighlightId?: string
previewImagePath?: string
}
export function ArticleHighlights(props: ArticleHighlightsProps): JSX.Element {
const router = useRouter()
return (
<PrimaryLayout
pageMetaDataProps={{
title: props.publicArticle.title,
description: props.publicArticle.description,
path: router.pathname,
ogImage: props.previewImagePath,
ogImageType: 'image/png',
}}
pageTestId={router.pathname}
>
<VStack alignment="center" css={{ width: '100%' }}>
<LoadedContent
publicArticle={props.publicArticle}
showAllHighlights={props.showAllHighlights}
selectedHighlightId={props.selectedHighlightId}
/>
</VStack>
</PrimaryLayout>
)
}
type LoadedContentProps = {
publicArticle: PublicArticleAttributes
showAllHighlights: boolean
selectedHighlightId?: string
}
function LoadedContent(props: LoadedContentProps): JSX.Element {
const router = useRouter()
const container = useRef<HTMLDivElement>(null)
const [showAllHighlights, setShowAllHighlights] = useState(
props.showAllHighlights
)
const selectedHighlights =
props.publicArticle.highlights.filter((highlight) => {
return highlight.shortId === props.selectedHighlightId
}) ?? ([] as Highlight[])
const unselectedHighlights =
props.publicArticle.highlights.filter((highlight) => {
return highlight.shortId !== props.selectedHighlightId
}) ?? ([] as Highlight[])
const moreHighlightsCount = useMemo(() => {
return props.publicArticle.highlights.length - 1
}, [props.publicArticle.highlights])
// const sharedBy = useMemo(() => {
// if (moreHighlightsCount < 1) return undefined
// return props.publicArticle.highlights[0].user
// }, [moreHighlightsCount, props.publicArticle.highlights])
const articleSite = useMemo(() => {
try {
const url = new URL(props.publicArticle.url)
return url.hostname
} catch (e) {
console.log('error ', e)
return ''
}
}, [props.publicArticle.url])
return (
<VStack
alignment="center"
css={{
p: props.selectedHighlightId ? '66px $3 0px $3' : '0px $3 0px $3',
width: '66%',
maxWidth: '600px',
mb: '$4',
'@smDown': {
p: '32px $3 0px $3',
width: '100%',
},
aspectRatio: router.query.adjustAspectRatio as string,
}}
ref={container}
>
{!props.selectedHighlightId && (
<LinkedItem publicArticle={props.publicArticle} />
)}
{selectedHighlights.map((highlight) => (
<PublicHighlightView
key={highlight.id}
highlight={highlight}
title={props.publicArticle.title}
author={props.publicArticle.author}
/>
))}
{showAllHighlights &&
unselectedHighlights.map((highlight) => (
<PublicHighlightView key={highlight.id} highlight={highlight} />
))}
<HighlightFooter
title={props.publicArticle.title}
author={props.publicArticle.author}
site={articleSite}
/>
{!showAllHighlights && moreHighlightsCount > 0 && (
<Button onClick={() => setShowAllHighlights(true)}>
<Box
css={{ width: '8px', color: '$grayBackground', mr: '4px' }}
className="dropdown-arrow"
/>
Read {moreHighlightsCount} more highlight
{moreHighlightsCount > 1 ? 's ' : ' '}
{/* from {sharedBy.name} */}
</Button>
)}
<Button
style="ctaDarkYellow"
css={{ m: '44px', p: '14px 16px', alignSelf: 'center' }}
onClick={() => {
if (window !== undefined) {
window.open(props.publicArticle.url, '_blank')
}
}}
>
Read Original
</Button>
</VStack>
)
}
type LinkedItemProps = {
publicArticle: PublicArticleAttributes
}
function LinkedItem(props: LinkedItemProps): JSX.Element {
const originText = new URL(props.publicArticle.url).hostname
return (
<VStack
alignment="start"
css={{
bg: '$grayBgActive',
borderRadius: '$2',
p: '$2',
width: '100%',
}}
>
<HStack distribution="start" css={{ width: '100%' }}>
<HStack distribution="start" alignment="start">
<Box>
<Image
src={
'/static/images/linked-item-card-placeholder.png'
// props.image ?? '/static/images/linked-item-card-placeholder.png'
}
alt="Link Preview Image"
layout="fixed"
width={88}
height={88}
/>
</Box>
<VStack
distribution="start"
alignment="start"
css={{ px: '$2', flexGrow: 1 }}
>
<StyledText
style="caption"
css={{ my: '$1', textAlign: 'left', overflow: 'auto' }}
>
{props.publicArticle.title}
</StyledText>
{props.publicArticle.author && (
<StyledText style="caption" css={{ my: '$1' }}>
{authoredByText(props.publicArticle.author)}
</StyledText>
)}
<StyledText style="caption" css={{ my: '$1' }}>
{originText}
</StyledText>
</VStack>
</HStack>
</HStack>
<StyledText
style="caption"
css={{ m: 0, py: '$2', height: '5em', overflow: 'hidden' }}
>
{props.publicArticle.description}
</StyledText>
</VStack>
)
}

6
packages/web/components/templates/settings/SettingsTable.tsx
View file

@ -7,7 +7,7 @@ import { InfoLink } from '../../elements/InfoLink'
import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
import { theme } from '../../tokens/stitches.config'
import { PrimaryLayout } from '../PrimaryLayout'
import { SettingsLayout } from '../SettingsLayout'
type SettingsTableProps = {
pageId: string
@ -235,7 +235,7 @@ const CreateButton = (props: CreateButtonProps): JSX.Element => {
export const SettingsTable = (props: SettingsTableProps): JSX.Element => {
return (
<PrimaryLayout pageTestId={props.pageId}>
<SettingsLayout pageTestId={props.pageId}>
<Toaster
containerStyle={{
top: '5rem',
@ -311,6 +311,6 @@ export const SettingsTable = (props: SettingsTableProps): JSX.Element => {
</VStack>
</HStack>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
</SettingsLayout>
)
}

15
packages/web/pages/discover.tsx
View file

@ -1,15 +0,0 @@
import { PrimaryLayout } from '../components/templates/PrimaryLayout'
export default function Discover(): JSX.Element {
return (
<PrimaryLayout
pageMetaDataProps={{
title: 'Discover - Omnivore',
path: '/discover',
}}
pageTestId="discover-page-tag"
>
Discover Page
</PrimaryLayout>
)
}

37
packages/web/pages/help/emails.tsx
View file

@ -1,18 +1,12 @@
/* eslint-disable @next/next/no-img-element */
import { Box, HStack } from '../../components/elements/LayoutPrimitives'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Button } from '../../components/elements/Button'
import Link from 'next/link'
export default function Emails(): JSX.Element {
return (
<PrimaryLayout
pageMetaDataProps={{
title: 'Reading Newsletters in Omnivore',
path: '/help/newsletters',
}}
pageTestId="help-newsletters-tag"
>
<SettingsLayout>
<Box
css={{
m: '42px',
@ -31,29 +25,34 @@ export default function Emails(): JSX.Element {
<h1>Omnivore Email Addresses</h1>
<hr />
<p>
An Omnivore email address will receive email, detect whether the email is a PDF document or newsletter,
and add the content to your library.
An Omnivore email address will receive email, detect whether the email
is a PDF document or newsletter, and add the content to your library.
</p>
<p>
If Omnivore doesn&apos;t think the item should be added to your library,
it will be forwarded to the email address you used when you registered
for Omnivore (from <code>msgs@omnivore.app</code>).
If Omnivore doesn&apos;t think the item should be added to your
library, it will be forwarded to the email address you used when you
registered for Omnivore (from <code>msgs@omnivore.app</code>).
</p>
<h2>Sending PDFs to your Omnivore Email Address</h2>
<p>
Add PDFs to your Omnivore library by sending them to your Omnivore email address. If there is a subject
line in the email, it will be used as the title of the PDF. If there is no subject line, the filename will
be used as the title.
Add PDFs to your Omnivore library by sending them to your Omnivore
email address. If there is a subject line in the email, it will be
used as the title of the PDF. If there is no subject line, the
filename will be used as the title.
</p>
<h2>Read all your newsletters in Omnivore</h2>
<p>
Subscribe to newsletters with your Omnivore email address and they
Subscribe to newsletters with your Omnivore email address and they
will be added to your library when we receive them.
</p>
<p><Link href="/help/newsletters">Learn more about setting up newsletters</Link></p>
<p>
<Link href="/help/newsletters">
Learn more about setting up newsletters
</Link>
</p>
<HStack alignment="center" css={{ mb: '32px', width: '100%' }}>
<Link passHref href="/settings/emails">
@ -62,6 +61,6 @@ export default function Emails(): JSX.Element {
</HStack>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
</SettingsLayout>
)
}

12
packages/web/pages/help/labels.tsx
View file

@ -1,17 +1,11 @@
/* eslint-disable @next/next/no-img-element */
import { Box } from '../../components/elements/LayoutPrimitives'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import Link from 'next/link'
export default function Labels(): JSX.Element {
return (
<PrimaryLayout
pageMetaDataProps={{
title: 'Labels',
path: '/help/labels',
}}
pageTestId="help-labels-tag"
>
<SettingsLayout>
<Box
css={{
m: '42px',
@ -108,6 +102,6 @@ export default function Labels(): JSX.Element {
</p>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
</SettingsLayout>
)
}

239
packages/web/pages/help/newsletters.tsx
View file

@ -1,41 +1,50 @@
/* eslint-disable @next/next/no-img-element */
import { Box, HStack, SpanBox } from '../../components/elements/LayoutPrimitives'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import {
Box,
HStack,
SpanBox,
} from '../../components/elements/LayoutPrimitives'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Button } from '../../components/elements/Button'
import Link from 'next/link'
import { Copy, Plus } from 'phosphor-react'
import { theme } from '../../components/tokens/stitches.config'
const AddEmailButton = () => {
return (<Button
style="ctaDarkYellow"
css={{
cursor: 'default',
display: 'inline-flex',
alignItems: 'center',
}}
>
<Plus size={18} style={{ marginRight: '6.5px' }} />
<SpanBox>Create a new email address</SpanBox>
</Button>)
return (
<Button
style="ctaDarkYellow"
css={{
cursor: 'default',
display: 'inline-flex',
alignItems: 'center',
}}
>
<Plus size={18} style={{ marginRight: '6.5px' }} />
<SpanBox>Create a new email address</SpanBox>
</Button>
)
}
const CopyButton = () => {
return (
<Button style="plainIcon" css={{
pl: '2px',
pr: '4px',
cursor: 'default',
display: 'inline-flex',
}}
>
<Copy color={theme.colors.grayTextContrast.toString()} />
</Button>)
<Button
style="plainIcon"
css={{
pl: '2px',
pr: '4px',
cursor: 'default',
display: 'inline-flex',
}}
>
<Copy color={theme.colors.grayTextContrast.toString()} />
</Button>
)
}
export default function Newsletters(): JSX.Element {
return (
<PrimaryLayout
<SettingsLayout
pageMetaDataProps={{
title: 'Reading Newsletters in Omnivore',
path: '/help/newsletters',
@ -61,45 +70,102 @@ export default function Newsletters(): JSX.Element {
<hr />
<p>Omnivore supports newsletters from the following providers:</p>
<ul>
<li>Newsletters hosted on <a href="https://substack.com" target="_blank" rel="noreferrer">substack.com</a></li>
<li>Newsletters hosted on <a href="https://www.beehiiv.com/" target="_blank" rel="noreferrer">beehiiv.com</a></li>
<li>The <a href="https://www.axios.com/newsletters" target="_blank" rel="noreferrer">Axios Daily</a> newsletters</li>
<li><a href="https://golangweekly.com/" target="_blank" rel="noreferrer">Golang Weekly</a></li>
<li><a href="https://www.bloomberg.com/account/newsletters" target="_blank" rel="noreferrer">Bloomberg Newsletters</a></li>
<li>
Newsletters hosted on{' '}
<a href="https://substack.com" target="_blank" rel="noreferrer">
substack.com
</a>
</li>
<li>
Newsletters hosted on{' '}
<a href="https://www.beehiiv.com/" target="_blank" rel="noreferrer">
beehiiv.com
</a>
</li>
<li>
The{' '}
<a
href="https://www.axios.com/newsletters"
target="_blank"
rel="noreferrer"
>
Axios Daily
</a>{' '}
newsletters
</li>
<li>
<a
href="https://golangweekly.com/"
target="_blank"
rel="noreferrer"
>
Golang Weekly
</a>
</li>
<li>
<a
href="https://www.bloomberg.com/account/newsletters"
target="_blank"
rel="noreferrer"
>
Bloomberg Newsletters
</a>
</li>
</ul>
<p>If there is a newsletter you would like to read in Omnivore, please let us know.</p>
<p>
If there is a newsletter you would like to read in Omnivore, please
let us know.
</p>
<h2>Omnivore Email Addresses</h2>
<p>
Omnivore allows you to create unique email addresses for subscribing to newsletters.
You can reuse one address for all your newsletters, or you can create a unique address
for each.
Omnivore allows you to create unique email addresses for subscribing
to newsletters. You can reuse one address for all your newsletters, or
you can create a unique address for each.
</p>
<p>
An Omnivore email address will receive email, detect whether the email is a newsletter,
and add the newsletter content to your library. If the email does not appear to be a newsletter,
it will be forwarded to the email address you used when you registered for Omnivore.
An Omnivore email address will receive email, detect whether the email
is a newsletter, and add the newsletter content to your library. If
the email does not appear to be a newsletter, it will be forwarded to
the email address you used when you registered for Omnivore.
</p>
<p>There are multiple ways to add newsletters to your Omnivore library:</p>
<p>
There are multiple ways to add newsletters to your Omnivore library:
</p>
<ul>
<li><a href="#updating">Updating your account email to an Omnivore email address</a></li>
<li><a href="#directly">Subscribe to the newsletter with an Omnivore email address</a></li>
<li><a href="#forwarding">Create a forwarding rule from your email account</a></li>
<li>
<a href="#updating">
Updating your account email to an Omnivore email address
</a>
</li>
<li>
<a href="#directly">
Subscribe to the newsletter with an Omnivore email address
</a>
</li>
<li>
<a href="#forwarding">
Create a forwarding rule from your email account
</a>
</li>
</ul>
<h2 id="updating">Updating your account email</h2>
<p>
If you want all your substack newsletters sent to Omnivore, you can login and change the
address on <a href="https://substack.com/account/settings">your account page</a> in Substack.
If you want all your substack newsletters sent to Omnivore, you can
login and change the address on{' '}
<a href="https://substack.com/account/settings">your account page</a>{' '}
in Substack.
</p>
<h2 id="directly">Subscribing Directly</h2>
<p>
Create your first email address by clicking the <AddEmailButton /> button on
the <Link href='/settings/emails'>emails page</Link>. Copy the email address
to your clipboard using the <CopyButton />
copy button, and enter that email address into an email subscription box.
Create your first email address by clicking the <AddEmailButton />{' '}
button on the <Link href="/settings/emails">emails page</Link>. Copy
the email address to your clipboard using the <CopyButton />
copy button, and enter that email address into an email subscription
box.
</p>
<HStack distribution="center" css={{ width: '100%', my: '32px' }}>
@ -110,53 +176,88 @@ export default function Newsletters(): JSX.Element {
</HStack>
<p>
If you are already logged into Substack you might need to logout to use your new email address.
If you are already logged into Substack you might need to logout to
use your new email address.
</p>
<h2 id="forwarding">Create a Forwarding Rule</h2>
<p>
If you are a Gmail user you can create a forwarding rule to send email from your regular account
to your Omnivore email address. This is useful if you have an existing paid newsletter subscription and
If you are a Gmail user you can create a forwarding rule to send email
from your regular account to your Omnivore email address. This is
useful if you have an existing paid newsletter subscription and
don&apos;t want to update your account email address.
</p>
<p>
For free newsletters we recommend subscribing directly to the newsletter with your Omnivore email address
instead of setting up forwarding rules.
For free newsletters we recommend subscribing directly to the
newsletter with your Omnivore email address instead of setting up
forwarding rules.
</p>
<p>Before you start:</p>
<ul>
<li>Create an Omnivore Email Address by clicking the <AddEmailButton /> button on the <Link href='/settings/emails'>emails page</Link>.</li>
<li>Make a note of the Newsletter&apos;s sender email address. For example <code>omnivore@substack.com</code>.</li>
<li>
Create an Omnivore Email Address by clicking the <AddEmailButton />{' '}
button on the <Link href="/settings/emails">emails page</Link>.
</li>
<li>
Make a note of the Newsletter&apos;s sender email address. For
example <code>omnivore@substack.com</code>.
</li>
</ul>
<p>Create a forwarding rule:</p>
<ul>
<li>
On a computer open your <Link href="https://mail.google.com/mail/u/0/#settings/fwdandpop">Gmail Forwarding Rules</Link>.
If this link does not work: click on the Gear icon in the upper right corner of Gmail
and select All Settings, then click the Forwarding and POP/IMAP tab.
</li>
<li>In the <b>Forwarding</b> section click <b>Add a forwarding address</b>.</li>
<li>Enter your Omnivore Email Address (eg <code>username-sdfsd@inbox.omnivore.app</code>) and click Next.</li>
<li>Click Proceed and OK</li>
<li>Refresh the Omnivore Newsletter Emails page and you should see a code appear beside your address (eg 663421251).
Copy this code to your clipboard (click the <CopyButton /> button).
On a computer open your{' '}
<Link href="https://mail.google.com/mail/u/0/#settings/fwdandpop">
Gmail Forwarding Rules
</Link>
. If this link does not work: click on the Gear icon in the upper
right corner of Gmail and select All Settings, then click the
Forwarding and POP/IMAP tab.
</li>
<li>
Return to your forwarding rules section and look for the confirm code text box.
Enter the confirmation code you copied and click <b>Verify</b>.
In the <b>Forwarding</b> section click{' '}
<b>Add a forwarding address</b>.
</li>
<li>
Enter your Omnivore Email Address (eg{' '}
<code>username-sdfsd@inbox.omnivore.app</code>) and click Next.
</li>
<li>Click Proceed and OK</li>
<li>
Refresh the Omnivore Newsletter Emails page and you should see a
code appear beside your address (eg 663421251). Copy this code to
your clipboard (click the <CopyButton /> button).
</li>
<li>
Return to your forwarding rules section and look for the confirm
code text box. Enter the confirmation code you copied and click{' '}
<b>Verify</b>.
</li>
<li>
In the forwarding section of Gmail, Click on{' '}
<b>Creating a Filter</b>
</li>
<li>
Add the email address of your newsletter (eg omnivore@substack.app)
in the <code>From</code> section.
</li>
<li>
Click <code>Create Filter</code>
</li>
<li>
Choose <b>Forward it to</b> and enter your Omnivore Email Address
(eg <code>username-sdfsd@inbox.omnivore.app</code>)
</li>
<li>
Click <code>Create Filter</code> at the bottom of the dialog.
</li>
<li>In the forwarding section of Gmail, Click on <b>Creating a Filter</b></li>
<li>Add the email address of your newsletter (eg omnivore@substack.app) in the <code>From</code> section.</li>
<li>Click <code>Create Filter</code></li>
<li>Choose <b>Forward it to</b> and enter your Omnivore Email Address (eg <code>username-sdfsd@inbox.omnivore.app</code>)</li>
<li>Click <code>Create Filter</code> at the bottom of the dialog.</li>
</ul>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
</SettingsLayout>
)
}

11
packages/web/pages/help/saving-links.tsx
View file

@ -3,16 +3,11 @@ import { Box, HStack } from '../../components/elements/LayoutPrimitives'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { Button } from '../../components/elements/Button'
import Link from 'next/link'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
export default function Colors(): JSX.Element {
return (
<PrimaryLayout
pageMetaDataProps={{
title: 'Saving Links to Omnivore',
path: '/help/saving-links',
}}
pageTestId="help-saving-links-page-tag"
>
<SettingsLayout>
<Box
css={{
m: '42px',
@ -163,6 +158,6 @@ export default function Colors(): JSX.Element {
</HStack>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
</SettingsLayout>
)
}

6
packages/web/pages/help/search.tsx
View file

@ -1,10 +1,10 @@
/* eslint-disable @next/next/no-img-element */
import { Box } from '../../components/elements/LayoutPrimitives'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
export default function Search(): JSX.Element {
return (
<PrimaryLayout
<SettingsLayout
pageMetaDataProps={{
title: 'Search',
path: '/help/search',
@ -201,6 +201,6 @@ export default function Search(): JSX.Element {
</ul>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
</SettingsLayout>
)
}

6
packages/web/pages/settings/delete-my-account.tsx
View file

@ -5,7 +5,7 @@ import { Toaster } from 'react-hot-toast'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { applyStoredTheme } from '../../lib/themeUpdater'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
import { Button } from '../../components/elements/Button'
@ -46,7 +46,7 @@ export default function DeleteMyAccount(): JSX.Element {
}
return (
<PrimaryLayout pageTestId={'api-keys'}>
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
@ -72,6 +72,6 @@ export default function DeleteMyAccount(): JSX.Element {
<Loader />
)}
</HStack>
</PrimaryLayout>
</SettingsLayout>
)
}

6
packages/web/pages/settings/integrations.tsx
View file

@ -11,7 +11,7 @@ import {
SpanBox,
VStack,
} from '../../components/elements/LayoutPrimitives'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { applyStoredTheme } from '../../lib/themeUpdater'
import { Button } from '../../components/elements/Button'
import { useGetIntegrationsQuery } from '../../lib/networking/queries/useGetIntegrationsQuery'
@ -125,7 +125,7 @@ export default function Integrations(): JSX.Element {
}, [readwiseConnected, router, webhooks])
return (
<PrimaryLayout pageTestId={'integrations'}>
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
@ -217,6 +217,6 @@ export default function Integrations(): JSX.Element {
)
})}
</VStack>
</PrimaryLayout>
</SettingsLayout>
)
}

11
packages/web/pages/settings/labels.tsx
View file

@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from 'react'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Button } from '../../components/elements/Button'
import { styled } from '../../components/tokens/stitches.config'
import {
@ -155,9 +155,8 @@ export default function LabelsPage(): JSX.Element {
const [descriptionInputText, setDescriptionInputText] = useState<string>('')
const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
const [windowWidth, setWindowWidth] = useState<number>(0)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState<
string | null
>(null)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] =
useState<string | null>(null)
const breakpoint = 768
applyStoredTheme(false)
@ -252,7 +251,7 @@ export default function LabelsPage(): JSX.Element {
}
return (
<PrimaryLayout pageTestId="settings-labels-tag">
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
@ -412,7 +411,7 @@ export default function LabelsPage(): JSX.Element {
: null}
</VStack>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
</SettingsLayout>
)
}

16
packages/web/pages/settings/rules.tsx
View file

@ -10,7 +10,7 @@ import {
useGetRulesQuery,
} from '../../lib/networking/queries/useGetRulesQuery'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Button, Space, Table, Form, Input, Modal, Tag, Select } from 'antd'
// import 'antd/dist/antd.dark.css'
@ -123,9 +123,8 @@ const CreateActionModal = (props: CreateActionModalProps): JSX.Element => {
}
}
const [actionType, setActionType] = useState<RuleActionType | undefined>(
undefined
)
const [actionType, setActionType] =
useState<RuleActionType | undefined>(undefined)
return (
<Modal
@ -192,9 +191,8 @@ export default function Rules(): JSX.Element {
const { rules, revalidate } = useGetRulesQuery()
const { labels } = useGetLabelsQuery()
const [isCreateRuleModalOpen, setIsCreateRuleModalOpen] = useState(false)
const [createActionRule, setCreateActionRule] = useState<Rule | undefined>(
undefined
)
const [createActionRule, setCreateActionRule] =
useState<Rule | undefined>(undefined)
const dataSource = useMemo(() => {
return rules.map((rule: Rule) => {
@ -301,7 +299,7 @@ export default function Rules(): JSX.Element {
]
return (
<PrimaryLayout pageTestId={'api-keys'}>
<SettingsLayout pageTestId={'api-keys'}>
<Toaster
containerStyle={{
top: '5rem',
@ -342,6 +340,6 @@ export default function Rules(): JSX.Element {
// expandable={{ expandedRowRender, indentSize: 30 }}
/>
</Box>
</PrimaryLayout>
</SettingsLayout>
)
}

6
packages/web/pages/settings/webhooks.tsx
View file

@ -1,4 +1,4 @@
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Toaster } from 'react-hot-toast'
import { Table } from '../../components/elements/Table'
import { applyStoredTheme } from '../../lib/themeUpdater'
@ -88,7 +88,7 @@ export default function Webhooks(): JSX.Element {
}
return (
<PrimaryLayout pageTestId={'webhooks'}>
<SettingsLayout pageTestId={'webhooks'}>
<Toaster
containerStyle={{
top: '5rem',
@ -203,6 +203,6 @@ export default function Webhooks(): JSX.Element {
setOnEditWebhook(webhook)
}}
/>
</PrimaryLayout>
</SettingsLayout>
)
}