site: various layout

Author: natew

assets/brand.sketch

@@ -8,10 +8,10 @@ export const Container = (props: StackProps) => {
       px="$4"
       width="100%"
       $gtSm={{
-        maxWidth: 720,
+        maxWidth: 700,
       }}
       $gtMd={{
-        maxWidth: 720,
+        maxWidth: 700,
       }}
       {...props}
     />

packages/site/components/Container.tsx

@@ -16,10 +16,6 @@ import { ExternalIcon } from './ExternalIcon'
 import { Link } from './Link'
 import { NavHeading } from './NavHeading'
 
-const DocsPageContainer = (props: StackProps) => (
-  <Container $gtSm={{ maxWidth: 780 }} $gtMd={{ maxWidth: 780 }} {...props} />
-)
-
 export function DocsPage({ children }: { children: React.ReactNode }) {
   const router = useRouter()
   const [isOpen, setIsOpen] = React.useState(false)
@@ -169,9 +165,9 @@ export function DocsPage({ children }: { children: React.ReactNode }) {
           <YStack $sm={{ display: 'none' }} position="absolute" top={15} right={20}>
             <AlphaButton />
           </YStack>
-          <DocsPageContainer>{children}</DocsPageContainer>
+          <Container>{children}</Container>
 
-          <DocsPageContainer>
+          <Container>
             {(previous || next) && (
               <XStack aria-label="Pagination navigation" my="$9" jc="space-between" space>
                 {previous && (
@@ -230,9 +226,9 @@ export function DocsPage({ children }: { children: React.ReactNode }) {
                 )}
               </XStack>
             )}
-          </DocsPageContainer>
+          </Container>
 
-          <DocsPageContainer my="$3">
+          <Container my="$3">
             <Link
               href={editUrl}
               title="Edit this page on GitHub."
@@ -241,7 +237,7 @@ export function DocsPage({ children }: { children: React.ReactNode }) {
             >
               Edit this page on GitHub.
             </Link>
-          </DocsPageContainer>
+          </Container>
         </YStack>
       </YStack>
     </DocsPageTheme>

packages/site/components/DocsPage.tsx

@@ -15,7 +15,13 @@ export const Link = ({
 }: LinkProps) => {
   return (
     <NextLink passHref {...{ href, replace, scroll, shallow, prefetch, locale }}>
-      <Paragraph tag="a" color="$color3" hoverStyle={{ color: '$color' }} {...props} />
+      <Paragraph
+        cursor="pointer"
+        tag="a"
+        color="$color3"
+        hoverStyle={{ color: '$color' }}
+        {...props}
+      />
     </NextLink>
   )
 }

packages/site/components/Link.tsx

@@ -1,22 +1,27 @@
+import NextLink from 'next/link'
 import React, { useEffect, useState } from 'react'
 import { ScrollView } from 'react-native'
 import { RemoveScroll } from 'react-remove-scroll'
-import { H4, Spacer, YStack } from 'tamagui'
+import { H4, Paragraph, YStack } from 'tamagui'
 
-import { Link, LinkProps } from './Link'
+import { LinkProps } from './Link'
 
-const QuickNavLink = (props: LinkProps) => (
-  <Link
-    size="$2"
-    fontSize="$2"
-    opacity={0.5}
-    color="$color"
-    py={3}
-    hoverStyle={{
-      opacity: 1,
-    }}
-    {...props}
-  />
+const QuickNavLink = ({ href, ...rest }: LinkProps) => (
+  <NextLink passHref href={href}>
+    <Paragraph
+      tag="a"
+      size="$2"
+      fontSize="$2"
+      opacity={0.5}
+      color="$color"
+      cursor="pointer"
+      py="$1"
+      hoverStyle={{
+        opacity: 1,
+      }}
+      {...rest}
+    />
+  </NextLink>
 )
 
 export function QuickNav() {