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,48 +40,52 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
     }
 
     return (
-        <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
-            <div className={styles.fileNameContainer}>
-                <Input
-                    placeholder="MyFile.md"
-                    value={title}
-                    onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null}
-                    marginTop="var(--gap-double)"
-                    size={1.2}
-                    font={1.2}
-                    label="Filename"
-                    disabled={!editable}
-                    width={"100%"}
-                />
-                {remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
-            </div>
-            <div className={styles.descriptionContainer}>
-                {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
-                <Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
-                    <Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
-                        {/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
-                        <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <Textarea
-                                ref={codeEditorRef}
-                                placeholder="Type some contents..."
-                                value={content}
-                                onChange={(event) => setContent ? setContent(event.target.value) : null}
-                                width="100%"
-                                disabled={!editable}
-                                // TODO: Textarea should grow to fill parent if height == 100%
-                                style={{ flex: 1, minHeight: 350 }}
-                                resize="vertical"
-                                className={styles.textarea}
-                            />
-                        </div>
-                    </Tabs.Item>
-                    <Tabs.Item label="Preview" value="preview">
-                        <MarkdownPreview height={height} content={content} />
-                    </Tabs.Item>
-                </Tabs>
+        <>
+            <Spacer height={1} />
+            <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
+                <div className={styles.fileNameContainer}>
+                    <Input
+                        placeholder="MyFile.md"
+                        value={title}
+                        onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null}
+                        marginTop="var(--gap-double)"
+                        size={1.2}
+                        font={1.2}
+                        label="Filename"
+                        disabled={!editable}
+                        width={"100%"}
+                    />
+                    {remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
+                </div>
+                <div className={styles.descriptionContainer}>
+                    {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
+                    <Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
+                        <Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
+                            {/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                <Textarea
+                                    ref={codeEditorRef}
+                                    placeholder="Type some contents..."
+                                    value={content}
+                                    onChange={(event) => setContent ? setContent(event.target.value) : null}
+                                    width="100%"
+                                    disabled={!editable}
+                                    // TODO: Textarea should grow to fill parent if height == 100%
+                                    style={{ flex: 1, minHeight: 350 }}
+                                    resize="vertical"
+                                    className={styles.textarea}
+                                />
+                            </div>
+                        </Tabs.Item>
+                        <Tabs.Item label="Preview" value="preview">
+                            <MarkdownPreview height={height} content={content} />
+                        </Tabs.Item>
+                    </Tabs>
 
-            </div >
-        </Card >
+                </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}