publish: use Row for NoteForm layout

This commit is contained in:
Liam Fitzgerald 2020-09-25 06:38:40 +10:00
parent 7daf0e692b
commit a1d5b68ba1

View File

@ -3,7 +3,7 @@ import * as Yup from "yup";
import { import {
Box, Box,
ManagedTextInputField as Input, ManagedTextInputField as Input,
TwoUp, Row,
Col, Col,
} from "@tlon/indigo-react"; } from "@tlon/indigo-react";
import { AsyncButton } from "../../../../components/AsyncButton"; import { AsyncButton } from "../../../../components/AsyncButton";
@ -42,16 +42,18 @@ export function PostForm(props: PostFormProps) {
validateOnBlur validateOnBlur
> >
<Form style={{ display: "contents" }}> <Form style={{ display: "contents" }}>
<TwoUp mb={4} gap={4}> <Row flexDirection={["column-reverse", "row"]} mb={4} gapX={4}>
<Input <Input flexGrow={1} placeholder="Post Title" id="title" />
flexGrow={1} <AsyncButton
placeholder="Post Title" ml={[0,2]}
id="title" mb={[4,0]}
/> flexShrink={1}
<AsyncButton flexShrink={1} primary loadingText={loadingText}> primary
loadingText={loadingText}
>
{submitLabel} {submitLabel}
</AsyncButton> </AsyncButton>
</TwoUp> </Row>
<MarkdownField flexGrow={1} id="body" /> <MarkdownField flexGrow={1} id="body" />
</Form> </Form>
</Formik> </Formik>