Updating Readwise Page and template + Webhooks Page and Template

packages/web/components/templates/integrations/Readwise.tsx

@@ -1,10 +1,7 @@
 import { useCallback, useState } from 'react'
 import { styled } from '@stitches/react'
-import { Toaster } from 'react-hot-toast'
 import Link from 'next/link'
 
-import { PrimaryLayout } from '../PrimaryLayout'
-
 import { Box, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
@@ -34,12 +31,7 @@ export function Readwise(): JSX.Element {
   }, [token])
 
   return (
-    <PrimaryLayout pageTestId={'integrations'}>
-      <Toaster
-        containerStyle={{
-          top: '5rem',
-        }}
-      />
+    <>
       <Header css={{ textAlign: 'center' }}>Readwise</Header>
       <VStack
         distribution={'start'}
@@ -73,7 +65,7 @@ export function Readwise(): JSX.Element {
           css={{
             border: '1px solid $textNonessential',
             borderRadius: '8px',
-            width: '60%',
+            width: '80%',
             bg: 'transparent',
             fontSize: '16px',
             textIndent: '8px',
@@ -96,6 +88,6 @@ export function Readwise(): JSX.Element {
           Set Token
         </Button>
       </VStack>
-    </PrimaryLayout>
+    </>
   )
 }

packages/web/components/templates/integrations/Webhooks.tsx

@@ -0,0 +1,68 @@
+import { styled } from '@stitches/react'
+import Image from 'next/image'
+
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+
+import { Plus } from 'phosphor-react'
+
+// Styles
+const Header = styled(Box, {
+  color: '$utilityTextDefault',
+  fontSize: 'x-large',
+  margin: '20px',
+})
+
+export function Webhooks(): JSX.Element {
+  return (
+    <VStack
+      distribution={'start'}
+      css={{
+        width: '90%',
+        margin: '0 auto',
+        height: '500px',
+      }}
+    >
+      <HStack
+        alignment={'start'}
+        distribution={'start'}
+        css={{
+          width: '100%',
+          pb: '$2',
+          borderBottom: '1px solid $utilityTextDefault',
+          pr: '$1',
+        }}
+      >
+        <Image
+          src="/static/icons/webhooks.svg"
+          alt="integration Image"
+          width={75}
+          height={75}
+        />
+        <Header>WebHooks</Header>
+        <HStack
+          alignment={'center'}
+          distribution={'end'}
+          css={{
+            width: '80%',
+            height: '100%',
+          }}
+        >
+          <Button
+            style="ctaDarkYellow"
+            css={{
+              py: '10px',
+              px: '14px',
+              mr: '16px',
+            }}
+          >
+            <Plus size={16} weight="bold" />
+            <SpanBox css={{ pl: '10px', fontWeight: '600', fontSize: '16px' }}>
+              Add New Webhook
+            </SpanBox>
+          </Button>
+        </HStack>
+      </HStack>
+    </VStack>
+  )
+}

packages/web/pages/settings/integrations.tsx

@@ -95,7 +95,7 @@ export default function Integrations(): JSX.Element {
           text: 'View Webhooks',
           icon: <Eye size={16} weight={'bold'} />,
           style: 'ctaWhite',
-          action: () =>router.push("/settings/webhooks"),
+          action: () =>router.push("/settings/integrations/webhooks"),
         },
       },
     ])

packages/web/pages/settings/integrations/webhooks.tsx

@@ -0,0 +1,15 @@
+import { PageMetaData } from '../../../components/patterns/PageMetaData'
+import { Webhooks } from '../../../components/templates/integrations/Webhooks'
+import { SettingsLayout } from '../../../components/templates/SettingsLayout'
+
+export default function ReadwisePage(): JSX.Element {
+  return (
+    <>
+      <PageMetaData title="Readwise - Omnivore" path="/integrations/webhooks" />
+      <SettingsLayout>
+        <Webhooks />
+      </SettingsLayout>
+      <div data-testid="integrations-readwise-page-tag" />
+    </>
+  )
+}