landscape: add GroupifyForm

pkg/interface/src/views/landscape/components/ChannelSettings.tsx

@@ -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>
   );
 }

pkg/interface/src/views/landscape/components/GroupifyForm.tsx

@@ -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>

pkg/interface/src/views/landscape/components/NewChannel.tsx

@@ -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>