⚒️ Add minor frontend tweaks (fastapi#1210)

Author: alejsdev

frontend/src/components/UserSettings/Appearance.tsx

@@ -21,13 +21,13 @@ const Appearance = () => {
           <Stack>
             {/* TODO: Add system default option */}
             <Radio value="light" colorScheme="teal">
-              Light mode
+              Light Mode
               <Badge ml="1" colorScheme="teal">
                 Default
               </Badge>
             </Radio>
             <Radio value="dark" colorScheme="teal">
-              Dark mode
+              Dark Mode
             </Radio>
           </Stack>
         </RadioGroup>

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -53,14 +53,18 @@ const ChangePassword = () => {
 
   return (
     <>
-      <Container maxW="full" as="form" onSubmit={handleSubmit(onSubmit)}>
+      <Container maxW="full">
         <Heading size="sm" py={4}>
           Change Password
         </Heading>
-        <Box w={{ sm: "full", md: "50%" }}>
+        <Box
+          w={{ sm: "full", md: "50%" }}
+          as="form"
+          onSubmit={handleSubmit(onSubmit)}
+        >
           <FormControl isRequired isInvalid={!!errors.current_password}>
             <FormLabel color={color} htmlFor="current_password">
-              Current password
+              Current Password
             </FormLabel>
             <Input
               id="current_password"

frontend/src/components/UserSettings/UserInformation.tsx

@@ -78,11 +78,15 @@ const UserInformation = () => {
 
   return (
     <>
-      <Container maxW="full" as="form" onSubmit={handleSubmit(onSubmit)}>
+      <Container maxW="full">
         <Heading size="sm" py={4}>
           User Information
         </Heading>
-        <Box w={{ sm: "full", md: "50%" }}>
+        <Box
+          w={{ sm: "full", md: "50%" }}
+          as="form"
+          onSubmit={handleSubmit(onSubmit)}
+        >
           <FormControl>
             <FormLabel color={color} htmlFor="name">
               Full name

frontend/src/utils.ts

@@ -35,8 +35,8 @@ export const confirmPasswordRules = (
   }
 
   if (isRequired) {
-    rules.required = "Password confirmation is required";
+    rules.required = "Password confirmation is required"
   }
 
-  return rules;
+  return rules
 }