Revamped settings ui

app/components/settings.tsx

@@ -1,4 +1,15 @@
-import { Modal, Button, InputGroup, Input, TextField } from "@heroui/react";
+import {
+    Modal,
+    Button,
+    InputGroup,
+    Input,
+    TextField,
+    Form,
+    Fieldset,
+    Description,
+    Label,
+    Typography,
+} from "@heroui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useAuth } from "~/hooks/auth";
 
@@ -9,33 +20,63 @@ export function Settings({
     show: boolean;
     setShow: Dispatch<SetStateAction<boolean>>;
 }) {
-    const {user, loading, login, logout} = useAuth();
+    const { user, loading, login, logout } = useAuth();
     return (
         <div>
             <Modal isOpen={show}>
                 <Modal.Backdrop
+                    variant="blur"
                     shouldCloseOnInteractOutside={(_element) => {
                         setShow(false);
                         return true;
                     }}
                 >
-                    <Modal.Container>
+                    <Modal.Container size="lg">
                         <Modal.Dialog>
                             <Modal.CloseTrigger
                                 onPress={() => {
                                     setShow(false);
                                 }}
                             />
-                            <Modal.Header>
-                                <Modal.Heading>Account settings</Modal.Heading>
-                            </Modal.Header>
                             <Modal.Body>
-                                <InputGroup>
-                                    <InputGroup.Prefix>Username</InputGroup.Prefix>
-                                    <InputGroup.Input defaultValue={user?.name}></InputGroup.Input>
-                                </InputGroup>
-                            </Modal.Body>
-                            <Modal.Footer>
+                                <Form className="w-full">
+                                    <Fieldset>
+                                        <Typography.Heading level={3}>
+                                            Account settings.
+                                        </Typography.Heading>
+                                        <Typography.Paragraph size="sm">
+                                            Update your profile information
+                                            either manually or from Steam.{" "}
+                                            <br />
+                                            Change several settings concerning
+                                            some functionnalities of the app.
+                                        </Typography.Paragraph>
+                                        <Fieldset.Group>
+                                            <TextField name="username">
+                                                <Label>Username</Label>
+                                                <Input
+                                                    placeholder={user?.name}
+                                                    variant="secondary"
+                                                ></Input>
+                                            </TextField>
+                                            <TextField name="avatar">
+                                                <Label>Avatar URL</Label>
+                                                <Input
+                                                    placeholder={user?.avatar}
+                                                    variant="secondary"
+                                                ></Input>
+                                                <Description>
+                                                    The URL must be a valid
+                                                    image url.
+                                                </Description>
+                                            </TextField>
+                                        </Fieldset.Group>
+                                        <Fieldset.Actions className="flex justify-end">
+                                            <div className="flex-1">
+                                                <Button variant="tertiary">
+                                                    Load from Steam
+                                                </Button>
+                                            </div>
                                             <Button
                                                 variant="secondary"
                                                 onPress={() => {
@@ -44,8 +85,11 @@ export function Settings({
                                             >
                                                 Cancel
                                             </Button>
-                                <Button>Save</Button>
-                            </Modal.Footer>
+                                            <Button type="submit">Save</Button>
+                                        </Fieldset.Actions>
+                                    </Fieldset>
+                                </Form>
+                            </Modal.Body>
                         </Modal.Dialog>
                     </Modal.Container>
                 </Modal.Backdrop>