Laying out Readwise Page and adding router on integrations page

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

@@ -1,28 +1,28 @@
-import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
+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'
-import { useCallback, useEffect, useState } from 'react'
 import { FormInput } from '../../elements/FormElements'
-import { styled } from '@stitches/react'
+
 import { setIntegrationMutation } from '../../../lib/networking/mutations/setIntegrationMutation'
 
-const BorderedFormInput = styled(FormInput, {
-  height: '40px',
-  paddingLeft: '6px',
-  borderRadius: '6px',
-  background: 'white',
-  color: '$omnivoreGray',
-  border: `1px solid 1px solid rgba(0, 0, 0, 0.06)`,
-})
-
-const FormLabel = styled('label', {
-  fontSize: '16px',
-  color: '$omnivoreGray',
+// Styles
+const Header = styled(Box, {
+  color: '$utilityTextDefault',
+  fontSize: 'x-large',
+  margin: '20px auto 20px auto',
 })
 
 export function Readwise(): JSX.Element {
   const [token, setToken] = useState<string>('')
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
 
   const setReadwiseToken = useCallback(() => {
     setIntegrationMutation({
@@ -30,34 +30,72 @@ export function Readwise(): JSX.Element {
       type: 'READWISE',
       enabled: true,
     })
-    console.log("SETTING READWISE TOKEN", token)
+    console.log('SETTING READWISE TOKEN', token)
   }, [token])
 
   return (
-    <VStack alignment="center" css={{ padding: '16px' }}>
-      <VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
-        <SpanBox css={{ width: '100%' }}>
-          <FormLabel>
-            Enter your Readwise API token. You can get your token
-            {' '}
-            <a href="https://readwise.io/access_token">here</a>.
-          </FormLabel>
-          <BorderedFormInput
-            type="token"
-            key="token"
-            value={token}
-            placeholder="Readwise Token"
-            onChange={(e) => { e.preventDefault(); setToken(e.target.value); }}
-          />
-        </SpanBox>
+    <PrimaryLayout pageTestId={'integrations'}>
+      <Toaster
+        containerStyle={{
+          top: '5rem',
+        }}
+      />
+      <Header css={{ textAlign: 'center' }}>Readwise</Header>
+      <VStack
+        distribution={'start'}
+        css={{
+          width: '80%',
+          margin: '0 auto',
+          height: '500px',
+        }}
+      >
+        <Header>
+          Enter your API key from Readwise below. You can get your token{' '}
+          <Link
+            style={{ color: '$utilityTextDefault' }}
+            href="https://readwise.io/access_token"
+          >
+            here
+          </Link>
+        </Header>
+        <FormInput
+          type="token"
+          key="token"
+          value={token}
+          placeholder={'Readwise Token'}
+          onChange={(e) => {
+            e.preventDefault()
+            setToken(e.target.value)
+          }}
+          disabled={false}
+          hidden={false}
+          required={true}
+          css={{
+            border: '1px solid $textNonessential',
+            borderRadius: '8px',
+            width: '60%',
+            bg: 'transparent',
+            fontSize: '16px',
+            textIndent: '8px',
+            margin: '20px auto 20px auto',
+            height: '38px',
+            color: '$grayTextContrast',
+            '&:focus': {
+              outline: 'none',
+              boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
+            },
+          }}
+          min={200}
+        />
+        {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
+        <Button
+          style="ctaDarkYellow"
+          css={{ my: '$2', margin:'0 auto' }}
+          onClick={setReadwiseToken}
+        >
+          Set Token
+        </Button>
       </VStack>
-      
-      {errorMessage && (
-        <StyledText style="error">{errorMessage}</StyledText>
-      )}
-      <Button style="ctaDarkYellow" css={{  my: '$2' }} onClick={setReadwiseToken}>
-        Set Token
-      </Button>
-    </VStack>
+    </PrimaryLayout>
   )
 }

packages/web/pages/settings/integrations.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState} from 'react'
+import { useRouter } from 'next/router'
 import { styled } from '@stitches/react'
 import { Toaster } from 'react-hot-toast'
 import { DownloadSimple, Eye, Link } from 'phosphor-react'
@@ -55,6 +56,7 @@ export default function Integrations(): JSX.Element {
   const [integrationsArray, setIntegrationsArray] = useState(
     Array<integrationsCard>()
   )
+  const router = useRouter()
 
   const readwiseConnected = useMemo(() => {
     return integrations.some((i) => i.type == 'READWISE')
@@ -71,7 +73,7 @@ export default function Integrations(): JSX.Element {
           text: `Install Logseq Plugin`,
           icon: <DownloadSimple size={16} weight={'bold'} />,
           style: 'ctaDarkYellow',
-          action: () => alert('You may already have it'),
+          action: () =>   alert('New LInk required')
         },
       },
       {
@@ -82,7 +84,7 @@ export default function Integrations(): JSX.Element {
           text: readwiseConnected ? 'Remove' : 'Connect to Readwise',
           icon: <Link size={16} weight={'bold'} />,
           style: readwiseConnected ? 'ctaWhite' : 'ctaDarkYellow',
-          action: () => alert('readwise'),
+          action: () => router.push("/settings/integrations/readwise")
         },
       },
       {
@@ -93,7 +95,7 @@ export default function Integrations(): JSX.Element {
           text: 'View Webhooks',
           icon: <Eye size={16} weight={'bold'} />,
           style: 'ctaWhite',
-          action: () => alert('readwise - Open new Page'),
+          action: () =>router.push("/settings/webhooks"),
         },
       },
     ])