From 5dfcfeaa5a9180c62fa364720c24cf6f0cb10c1d Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 11 Oct 2021 18:30:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Make=20`GroupCreateBox`=20collap?=
 =?UTF-8?q?sible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/group/GroupCreateBox.tsx   | 60 ++++++++++---------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/group/GroupCreateBox.tsx b/frontend/src/components/group/GroupCreateBox.tsx
index 67d84ef..e782aa5 100644
--- a/frontend/src/components/group/GroupCreateBox.tsx
+++ b/frontend/src/components/group/GroupCreateBox.tsx
@@ -1,4 +1,4 @@
-import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
+import {Box, Details, Form, useFormState} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {ManagedViewSet, useManagedViewSet} from "../../hooks/useManagedViewSet"
@@ -66,33 +66,37 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
 
     return (
         <Box>
-            <Heading level={3}>
-                Create a new group
-            </Heading>
-            <Form>
-                <Form.Field label={"Name"} {...name}/>
-                <Form.Field label={"Slug"} disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
-                <Form.Area label={"Description"} {...description}/>
-                <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
-                <Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
-                <Form.Select
-                    label={"Access"}
-                    options={{
-                        "": undefined,
-                        "⛔️ Collaborators must be added manually": "MANUAL",
-                        "✳️ Users can join the group freely": "OPEN",
-                    }}
-                    {...access}
-                />
-                <Form.Row>
-                    <ErrorBox error={viewSet.operationError ?? undefined}/>
-                </Form.Row>
-                <Form.Row>
-                    <Form.Button onClick={doCreate}>
-                        Create
-                    </Form.Button>
-                </Form.Row>
-            </Form>
+            <Details>
+                <Details.Summary>
+                    Create a new group
+                </Details.Summary>
+                <Details.Content>
+                    <Form>
+                        <Form.Field label={"Name"} {...name}/>
+                        <Form.Field label={"Slug"} disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
+                        <Form.Area label={"Description"} {...description}/>
+                        <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
+                        <Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
+                        <Form.Select
+                            label={"Access"}
+                            options={{
+                                "": undefined,
+                                "⛔️ Collaborators must be added manually": "MANUAL",
+                                "✳️ Users can join the group freely": "OPEN",
+                            }}
+                            {...access}
+                        />
+                        <Form.Row>
+                            <ErrorBox error={viewSet.operationError ?? undefined}/>
+                        </Form.Row>
+                        <Form.Row>
+                            <Form.Button onClick={doCreate}>
+                                Create
+                            </Form.Button>
+                        </Form.Row>
+                    </Form>
+                </Details.Content>
+            </Details>
         </Box>
     )
 }