Fixes sponsorship page

components/code-panel/code-docs.tsx

@@ -113,7 +113,7 @@ const StyledDocs = styled('div', {
   },
 
   '& blockquote': {
-    backgroundColor: 'rgba(144, 144, 144, .05)',
+    backgroundColor: '$overlay',
     padding: 12,
     margin: '20px 0',
     borderRadius: 8,

components/shared.tsx

@@ -114,7 +114,7 @@ export const RowButton = styled('button', {
 
   '& svg': {
     position: 'relative',
-    stroke: 'rgba(0,0,0,.2)',
+    stroke: '$overlay',
     strokeWidth: 1,
     zIndex: 1,
   },

pages/sponsorware.tsx

@@ -7,60 +7,67 @@ export default function Sponsorware(): JSX.Element {
   const [session, loading] = useSession()
 
   return (
-    <Content
+    <OuterContent>
-      size={{
+      <Content
-        '@sm': 'small',
+        size={{
-      }}
+          '@sm': 'small',
-    >
+        }}
-      <h1>tldraw (is sponsorware)</h1>
+      >
-      <p>
+        <h1>tldraw (is sponsorware)</h1>
-        Hey, thanks for visiting <a href="https://tldraw.com/">tldraw</a>, a
+        <p>
-        tiny little drawing app by{' '}
+          Hey, thanks for visiting <a href="https://tldraw.com/">tldraw</a>, a
-        <a href="https://twitter.com/steveruizok">steveruizok</a>.
+          tiny little drawing app by{' '}
-      </p>
+          <a href="https://twitter.com/steveruizok">steveruizok</a>.
-      <video autoPlay muted playsInline onClick={(e) => e.currentTarget.play()}>
+        </p>
-        <source src="images/hello.mp4" type="video/mp4" />
+        <video
-      </video>
+          autoPlay
-      <p>This project is currently: </p>
+          muted
-      <ul>
+          playsInline
-        <li>in development</li>
+          onClick={(e) => e.currentTarget.play()}
-        <li>only available for my sponsors</li>
-      </ul>
-      <p>
-        If you&apos;d like to try it out,{' '}
-        <a
-          href="https://github.com/sponsors/steveruizok"
-          target="_blank"
-          rel="noopener noreferrer"
         >
-          sponsor me on Github
+          <source src="images/hello.mp4" type="video/mp4" />
-        </a>{' '}
+        </video>
-        (at any level) and sign in below.
+        <p>This project is currently: </p>
-      </p>
+        <ul>
-      <ButtonGroup>
+          <li>in development</li>
-        {session ? (
+          <li>only available for my sponsors</li>
-          <>
+        </ul>
-            <Button onClick={() => signout()} variant={'secondary'}>
+        <p>
-              Sign Out
+          If you&apos;d like to try it out,{' '}
-            </Button>
+          <a
-            <Detail>
+            href="https://github.com/sponsors/steveruizok"
-              Signed in as {session?.user?.name} ({session?.user?.email}), but
+            target="_blank"
-              it looks like you&apos;re not yet a sponsor.
+            rel="noopener noreferrer"
-              <br />
+          >
-              Something wrong? Try <a href="/">reloading the page</a> or DM me
+            sponsor me on Github
-              on <a href="https://twitter.com/steveruizok">Twitter</a>.
+          </a>{' '}
-            </Detail>
+          (at any level) and sign in below.
-          </>
+        </p>
-        ) : (
+        <ButtonGroup>
-          <>
+          {session ? (
-            <Button onClick={() => signin('github')} variant={'primary'}>
+            <>
-              {loading ? 'Loading...' : 'Sign in With Github'}
+              <Button onClick={() => signout()} variant={'secondary'}>
-            </Button>
+                Sign Out
-            <Detail>Already a sponsor? Just sign in to visit the app.</Detail>
+              </Button>
-          </>
+              <Detail>
-        )}
+                Signed in as {session?.user?.name} ({session?.user?.email}), but
-      </ButtonGroup>
+                it looks like you&apos;re not yet a sponsor.
-    </Content>
+                <br />
+                Something wrong? Try <a href="/">reloading the page</a> or DM me
+                on <a href="https://twitter.com/steveruizok">Twitter</a>.
+              </Detail>
+            </>
+          ) : (
+            <>
+              <Button onClick={() => signin('github')} variant={'primary'}>
+                {loading ? 'Loading...' : 'Sign in With Github'}
+              </Button>
+              <Detail>Already a sponsor? Just sign in to visit the app.</Detail>
+            </>
+          )}
+        </ButtonGroup>
+      </Content>
+    </OuterContent>
   )
 }
 
@@ -74,15 +81,29 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 }
 
+const OuterContent = styled('div', {
+  backgroundColor: '$canvas',
+  padding: '32px',
+  margin: '0 auto',
+  overflow: 'scroll',
+  position: 'fixed',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: '100%',
+  height: '100%',
+})
+
 const Content = styled('div', {
   width: '720px',
   maxWidth: '100%',
   backgroundColor: '$panel',
-  margin: '32px auto',
+  borderRadius: '4px',
-  borderRadius: '0px',
   boxShadow: '$12',
-  padding: '16px',
-  overflow: 'hidden',
   color: '$text',
   fontSize: '$2',
   fontFamily: '$body',

styles/stitches.config.ts

@@ -140,6 +140,7 @@ const globalStyles = global({
     fontSize: '$2',
     color: '$text',
     backgroundColor: '$canvas',
+    minHeight: '100vh',
   },
   body: {
     overflow: 'hidden',