Fill in

web/packages/new/photos/components/SingleInputFormV2.tsx

@@ -1,4 +1,13 @@
-import { Dialog, DialogContent, DialogTitle, TextField } from "@mui/material";
+import {
+    Box,
+    Button,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    TextField,
+} from "@mui/material";
+import { useFormik } from "formik";
+import { t } from "i18next";
 import React from "react";
 import type { DialogVisibilityProps } from "./mui/Dialog";
 
@@ -6,10 +15,37 @@ import type { DialogVisibilityProps } from "./mui/Dialog";
  * A TextField and two buttons.
  */
 export const SingleInputFormV2: React.FC = () => {
+    const formik = useFormik({
+        initialValues: {
+            name: "",
+        },
+        onSubmit: (values) => {
+            console.log(JSON.stringify(values));
+        },
+    });
     return (
-        <div>
-            <TextField></TextField>
-        </div>
+        <form onSubmit={formik.handleSubmit}>
+            <TextField
+                name="name"
+                value={formik.values.name}
+                onChange={formik.handleChange}
+                type="text"
+                autoComplete="name"
+                autoFocus
+                fullWidth
+                label="Add name"
+                placeholder="Enter name"
+                helperText=" "
+            />
+            <Box sx={{ display: "flex", paddingInline: "4px", gap: "12px" }}>
+                <Button size="large" color="secondary">
+                    {t("cancel")}
+                </Button>
+                <Button size="large" color="accent" type="submit">
+                    Add person
+                </Button>
+            </Box>
+        </form>
     );
 };
 
@@ -38,7 +74,7 @@ export const SingleInputDialogTest: React.FC<DialogVisibilityProps> = ({
             fullWidth
             PaperProps={{ sx: { padding: "8px 4px 4px 4px" } }}
         >
-            <DialogTitle>{"Title"}</DialogTitle>
+            <DialogTitle>{"New person"}</DialogTitle>
             <DialogContent>
                 <SingleInputFormV2 />
             </DialogContent>

web/packages/shared/themes/components.ts

@@ -132,7 +132,17 @@ export const getComponents = (
     MuiInputBase: {
         styleOverrides: {
             formControl: {
+                // Give a symmetric border to the input field, by default the
+                // border radius is only applied to the top for the "filled"
+                // variant of input used inside TextFields.
                 borderRadius: "8px",
+                // TODO: Should we also add overflow hidden so that there is no
+                // gap between the filled area and the (full width) border. Not
+                // sure how this might interact with selects.
+                // overflow: "hidden",
+
+                // Hide the bottom border that always appears for the "filled"
+                // variant of input used inside TextFields.
                 "::before": {
                     borderBottom: "none !important",
                 },
@@ -150,7 +160,10 @@ export const getComponents = (
     },
     MuiTextField: {
         defaultProps: {
+            // The MUI default variant is "outlined", override it to use the
+            // "filled" one by default.
             variant: "filled",
+            // Reduce the vertical margins that MUI adds to the TextField.
             margin: "dense",
         },
         styleOverrides: {