landscape: add GroupifyForm

This commit is contained in:
Liam Fitzgerald 2020-11-05 11:54:07 +10:00
parent 118f153dc7
commit 414567b843
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
3 changed files with 17 additions and 21 deletions

View File

@ -10,7 +10,7 @@ import {
} from "@tlon/indigo-react";
import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
import GlobalApi from "~/logic/api/global";
import { uxToHex } from '~/logic/lib/util';
import { uxToHex } from "~/logic/lib/util";
import { FormError } from "~/views/components/FormError";
import { ColorInput } from "~/views/components/ColorInput";
import { Association, Groups, Associations } from "~/types";
@ -66,16 +66,13 @@ export function ChannelSettings(props: ChannelSettingsProps) {
};
return (
<Box overflowY="auto" p={4}>
<Col gapY="6" overflowY="auto" p={4}>
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form style={{ display: "contents" }}>
<Col
maxWidth="512px"
gapY="4"
>
<Col maxWidth="512px" gapY="4">
<Col mb={3}>
<Text fontWeight="bold">Channel Settings</Text>
<Label gray mt='2'>
<Label gray mt="2">
Set the title, description and colour of the channel
</Label>
</Col>
@ -101,7 +98,8 @@ export function ChannelSettings(props: ChannelSettingsProps) {
</Col>
</Form>
</Formik>
<Box borderBottom="1" borderBottomColor="lightGray" width="100%" maxWidth="512px" />
<GroupifyForm {...props} />
</Box>
</Col>
);
}

View File

@ -1,11 +1,8 @@
import React, { useEffect } from "react";
import { Box, Col, Button, InputLabel, InputCaption } from "@tlon/indigo-react";
import { Box, Col, Text } from "@tlon/indigo-react";
import * as Yup from "yup";
import GlobalApi from "~/logic/api/global";
import { Notebook } from "~/types/publish-update";
import { Contacts } from "~/types/contact-update";
import { MetadataForm } from "./MetadataForm";
import { Groups, Associations, Association } from "~/types";
import { Formik, FormikHelpers, Form } from "formik";
import GroupSearch from "~/views/components/GroupSearch";
@ -63,8 +60,11 @@ export function GroupifyForm(props: GroupifyFormProps) {
initialValues={initialValues}
onSubmit={onGroupify}
>
<Form style={{ display: "contents" }}>
<Col mt="4" gapY="4" maxWidth="512px">
<Form>
<Col gapY="4" maxWidth="512px">
<Box>
<Text fontWeight="500">Groupify this chanel</Text>
</Box>
<GroupSearch
id="group"
label="Group"
@ -73,7 +73,7 @@ export function GroupifyForm(props: GroupifyFormProps) {
associations={props.associations}
adminOnly
/>
<AsyncButton loadingText="Groupifying..." border>
<AsyncButton primary loadingText="Groupifying..." border>
Groupify
</AsyncButton>
</Col>

View File

@ -126,11 +126,9 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) {
onSubmit={onSubmit}
>
<Form>
<Box
display="grid"
gridTemplateRows="auto"
gridRowGap={4}
gridTemplateColumns="300px"
<Col
maxWidth="348px"
gapY="4"
>
<Col gapY="2">
<Box color="black" mb={2}>Channel Type</Box>
@ -168,7 +166,7 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) {
</AsyncButton>
</Box>
<FormError message="Channel creation failed" />
</Box>
</Col>
</Form>
</Formik>
</Col>