From 53cc193bd157acc1b5cf8e151a3912b7e6bd8553 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 13 Mar 2024 19:10:11 +0800
Subject: [PATCH] update header

---
 .../templates/integrations/Readwise.tsx       | 25 +++++---------
 .../templates/settings/SettingsTable.tsx      |  9 ++++-
 .../pages/settings/integrations/notion.tsx    | 33 ++++++++-----------
 3 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/packages/web/components/templates/integrations/Readwise.tsx b/packages/web/components/templates/integrations/Readwise.tsx
index 4e0469896..353687e1b 100644
--- a/packages/web/components/templates/integrations/Readwise.tsx
+++ b/packages/web/components/templates/integrations/Readwise.tsx
@@ -1,27 +1,18 @@
-import { useCallback, useMemo, useState } from 'react'
-import { styled } from '@stitches/react'
 import Image from 'next/image'
-
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { FormInput } from '../../elements/FormElements'
-
+import { useRouter } from 'next/router'
+import { useCallback, useMemo, useState } from 'react'
+import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
 import { setIntegrationMutation } from '../../../lib/networking/mutations/setIntegrationMutation'
 import {
   Integration,
   useGetIntegrationsQuery,
 } from '../../../lib/networking/queries/useGetIntegrationsQuery'
-import { useRouter } from 'next/router'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
-import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
-
-// Styles
-const Header = styled(Box, {
-  color: '$utilityTextDefault',
-  fontSize: 'x-large',
-  margin: '20px',
-})
+import { Button } from '../../elements/Button'
+import { FormInput } from '../../elements/FormElements'
+import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import { Header } from '../settings/SettingsTable'
 
 export function Readwise(): JSX.Element {
   const { integrations, revalidate } = useGetIntegrationsQuery()
diff --git a/packages/web/components/templates/settings/SettingsTable.tsx b/packages/web/components/templates/settings/SettingsTable.tsx
index 7e87c9a7a..1db5872a6 100644
--- a/packages/web/components/templates/settings/SettingsTable.tsx
+++ b/packages/web/components/templates/settings/SettingsTable.tsx
@@ -6,11 +6,18 @@ import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 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 { styled, theme } from '../../tokens/stitches.config'
 import { SettingsLayout } from '../SettingsLayout'
 import { usePersistedState } from '../../../lib/hooks/usePersistedState'
 import { FeatureHelpBox } from '../../elements/FeatureHelpBox'
 
+// Styles
+export const Header = styled(Box, {
+  color: '$utilityTextDefault',
+  fontSize: 'x-large',
+  margin: '20px',
+})
+
 type SettingsTableProps = {
   pageId: string
   pageInfoLink?: string | undefined
diff --git a/packages/web/pages/settings/integrations/notion.tsx b/packages/web/pages/settings/integrations/notion.tsx
index e61303385..9f5e7f8f1 100644
--- a/packages/web/pages/settings/integrations/notion.tsx
+++ b/packages/web/pages/settings/integrations/notion.tsx
@@ -1,4 +1,3 @@
-import { styled } from '@stitches/react'
 import {
   Button,
   Checkbox,
@@ -14,13 +13,10 @@ import { CheckboxValueType } from 'antd/lib/checkbox/Group'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
-import {
-  Box,
-  HStack,
-  VStack,
-} from '../../../components/elements/LayoutPrimitives'
+import { HStack, VStack } from '../../../components/elements/LayoutPrimitives'
 import { PageMetaData } from '../../../components/patterns/PageMetaData'
 import { Beta } from '../../../components/templates/Beta'
+import { Header } from '../../../components/templates/settings/SettingsTable'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
 import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
 import { setIntegrationMutation } from '../../../lib/networking/mutations/setIntegrationMutation'
@@ -43,13 +39,6 @@ type FieldType = {
   properties?: string[]
 }
 
-// Styles
-const Header = styled(Box, {
-  color: '$utilityTextDefault',
-  fontSize: 'x-large',
-  margin: '20px 20px 40px 40px',
-})
-
 export default function Notion(): JSX.Element {
   applyStoredTheme()
 
@@ -138,11 +127,18 @@ export default function Notion(): JSX.Element {
       <SettingsLayout>
         <VStack
           css={{
-            margin: 'auto',
+            margin: '0 auto',
             width: '80%',
           }}
         >
-          <HStack>
+          <HStack
+            css={{
+              width: '100%',
+              pb: '$2',
+              borderBottom: '1px solid $utilityTextDefault',
+              pr: '$1',
+            }}
+          >
             <Image
               src="/static/icons/notion.png"
               alt="Integration Image"
@@ -154,12 +150,11 @@ export default function Notion(): JSX.Element {
           </HStack>
 
           {notion && (
-            <div style={{ width: '100%' }}>
+            <div style={{ width: '100%', marginTop: '40px' }}>
               <Form
-                labelCol={{ span: 4 }}
-                wrapperCol={{ span: 6 }}
+                labelCol={{ span: 6 }}
+                wrapperCol={{ span: 8 }}
                 labelAlign="left"
-                style={{ width: '100%' }}
                 form={form}
                 fields={fields}
                 onFinish={onFinish}