client: add spacing to top/bottom of Documents

client/components/document/index.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Card, Input, Tabs, Textarea } from "@geist-ui/core"
+import { Button, ButtonGroup, Card, Input, Spacer, Tabs, Textarea } from "@geist-ui/core"
 import { ChangeEvent, FormEvent, memo, useEffect, useReducer, useRef, useState } from "react"
 import styles from './document.module.css'
 import MarkdownPreview from '../preview'
@@ -40,6 +40,8 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
     }
 
     return (
+        <>
+            <Spacer height={1} />
             <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
                 <div className={styles.fileNameContainer}>
                     <Input
@@ -82,6 +84,8 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
 
                 </div >
             </Card >
+            <Spacer height={1} />
+        </>
     )
 }
 

client/components/header/controls.tsx

@@ -1,10 +1,7 @@
-import React, { useMemo } from 'react'
-import Router, { useRouter } from 'next/router'
+import React from 'react'
 import MoonIcon from '@geist-ui/icons/moon'
 import SunIcon from '@geist-ui/icons/sun'
-import UserIcon from '@geist-ui/icons/user'
-import GitHubIcon from '@geist-ui/icons/github'
-import { Select, Spacer, useTheme } from '@geist-ui/core'
+import { Select } from '@geist-ui/core'
 import { ThemeProps } from '../../pages/_app'
 // import { useAllThemes, useTheme } from '@geist-ui/core'
 import styles from './header.module.css'

client/pages/index.tsx

@@ -70,7 +70,6 @@ const Home = ({ theme, changeTheme, introContent, todoContent }: Props) => {
           title={`Welcome to Drift.md`}
           initialTab={`preview`}
         />
-        <Spacer height={1} />
         <Document
           editable={false}
           content={todoContent}