🛂 Migrate to Chakra UI v3 (#1496)

Co-authored-by: github-actions <github-actions@github.com>

frontend/src/components/UserSettings/UserInformation.tsx

@@ -3,13 +3,9 @@ import {
   Button,
   Container,
   Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
   Heading,
   Input,
   Text,
-  useColorModeValue,
 } from "@chakra-ui/react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
@@ -24,11 +20,11 @@ import {
 import useAuth from "../../hooks/useAuth"
 import useCustomToast from "../../hooks/useCustomToast"
 import { emailPattern, handleError } from "../../utils"
+import { Field } from "../ui/field"
 
 const UserInformation = () => {
   const queryClient = useQueryClient()
-  const color = useColorModeValue("inherit", "ui.light")
-  const showToast = useCustomToast()
+  const { showSuccessToast } = useCustomToast()
   const [editMode, setEditMode] = useState(false)
   const { user: currentUser } = useAuth()
   const {
@@ -54,10 +50,10 @@ const UserInformation = () => {
     mutationFn: (data: UserUpdateMe) =>
       UsersService.updateUserMe({ requestBody: data }),
     onSuccess: () => {
-      showToast("Success!", "User updated successfully.", "success")
+      showSuccessToast("User updated successfully.")
     },
     onError: (err: ApiError) => {
-      handleError(err, showToast)
+      handleError(err)
     },
     onSettled: () => {
       queryClient.invalidateQueries()
@@ -84,13 +80,9 @@ const UserInformation = () => {
           as="form"
           onSubmit={handleSubmit(onSubmit)}
         >
-          <FormControl>
-            <FormLabel color={color} htmlFor="name">
-              Full name
-            </FormLabel>
+          <Field label="Full name">
             {editMode ? (
               <Input
-                id="name"
                 {...register("full_name", { maxLength: 30 })}
                 type="text"
                 size="md"
@@ -98,23 +90,24 @@ const UserInformation = () => {
               />
             ) : (
               <Text
-                size="md"
+                fontSize="md"
                 py={2}
-                color={!currentUser?.full_name ? "ui.dim" : "inherit"}
-                isTruncated
+                color={!currentUser?.full_name ? "gray" : "inherit"}
+                truncate
                 maxWidth="250px"
               >
                 {currentUser?.full_name || "N/A"}
               </Text>
             )}
-          </FormControl>
-          <FormControl mt={4} isInvalid={!!errors.email}>
-            <FormLabel color={color} htmlFor="email">
-              Email
-            </FormLabel>
+          </Field>
+          <Field
+            mt={4}
+            label="Email"
+            invalid={!!errors.email}
+            errorText={errors.email?.message}
+          >
             {editMode ? (
               <Input
-                id="email"
                 {...register("email", {
                   required: "Email is required",
                   pattern: emailPattern,
@@ -124,26 +117,28 @@ const UserInformation = () => {
                 w="auto"
               />
             ) : (
-              <Text size="md" py={2} isTruncated maxWidth="250px">
+              <Text fontSize="md" py={2} truncate maxWidth="250px">
                 {currentUser?.email}
               </Text>
             )}
-            {errors.email && (
-              <FormErrorMessage>{errors.email.message}</FormErrorMessage>
-            )}
-          </FormControl>
+          </Field>
           <Flex mt={4} gap={3}>
             <Button
-              variant="primary"
+              variant="solid"
               onClick={toggleEditMode}
               type={editMode ? "button" : "submit"}
-              isLoading={editMode ? isSubmitting : false}
-              isDisabled={editMode ? !isDirty || !getValues("email") : false}
+              loading={editMode ? isSubmitting : false}
+              disabled={editMode ? !isDirty || !getValues("email") : false}
             >
               {editMode ? "Save" : "Edit"}
             </Button>
             {editMode && (
-              <Button onClick={onCancel} isDisabled={isSubmitting}>
+              <Button
+                variant="subtle"
+                colorPalette="gray"
+                onClick={onCancel}
+                disabled={isSubmitting}
+              >
                 Cancel
               </Button>
             )}