Small improvements

src/components/form/UpdateAccountForm.tsx

@@ -1,8 +1,7 @@
 import * as forms from "codeforlife/components/form"
-import { Stack, Typography } from "@mui/material"
 import { getDirty, isDirty } from "codeforlife/utils/form"
 import { type FC } from "react"
-import { LinkButton } from "codeforlife/components/router"
+import { Typography } from "@mui/material"
 import { useNavigate } from "codeforlife/hooks"
 
 import {
@@ -159,12 +158,11 @@ const UpdateAccountForm: FC<UpdateAccountFormProps> = ({ user }) => {
                   placeholder="Enter your current password"
                 />
               )}
-              <Stack direction="row" spacing={2} paddingY={3}>
-                <LinkButton variant="outlined" to={-1}>
-                  Cancel
-                </LinkButton>
-                <forms.SubmitButton>Update details</forms.SubmitButton>
-              </Stack>
+              <forms.SubmitButton
+                sx={theme => ({ marginTop: theme.spacing(3) })}
+              >
+                Update details
+              </forms.SubmitButton>
             </>
           )
         }}

src/pages/teacherDashboard/account/Account.tsx

@@ -17,8 +17,8 @@ export interface AccountProps {
 const Account: FC<AccountProps> = ({ authUser, view }) => {
   if (view) {
     return {
-      otp: <Setup2FA authUser={authUser} />,
-      backupTokens: <BackupTokens authUser={authUser} />,
+      otp: <Setup2FA user={authUser} />,
+      backupTokens: <BackupTokens user={authUser} />,
     }[view]
   }
 
@@ -31,6 +31,11 @@ const Account: FC<AccountProps> = ({ authUser, view }) => {
         <forms.UpdateAccountForm user={authUser} />
       </page.Section>
       <page.Section boxProps={{ bgcolor: "info.main" }}>
+        <Typography variant="h5">Two factor authentication</Typography>
+        <Typography>
+          Use your smartphone or tablet to enhance your account&apos;s security
+          by using an authenticator app.
+        </Typography>
         <Manage2FAForm user={authUser} />
       </page.Section>
       <page.Section>

src/pages/teacherDashboard/account/Manage2FAForm.tsx

@@ -16,11 +16,6 @@ const Setup2FAForm: FC<{ user: SchoolTeacherUser<RetrieveUserResult> }> = ({
   const theme = useTheme()
   return (
     <>
-      <Typography variant="h5">Two factor authentication</Typography>
-      <Typography>
-        Use your smartphone or tablet to enhance your account&apos;s security by
-        using an authenticator app.
-      </Typography>
       <Button
         onClick={() => {
           navigate(
@@ -57,6 +52,7 @@ const Edit2FAForm: FC<{ user: SchoolTeacherUser<RetrieveUserResult> }> = ({
     <Grid container>
       <Grid sm={6} marginTop={theme.spacing(4)}>
         <Typography variant="h6">Backup tokens</Typography>
+        {/*TODO: Update text to show the actual number of backup tokens*/}
         <Typography>
           If you don&apos;t have your smartphone or tablet with you, you can
           access your account using backup tokens. You have 0 backup tokens