feat: ui improvements

components/Layout.tsx

@@ -9,7 +9,7 @@ interface Props {
   children: ReactNode
 }
 
-const inter = Inter({ subsets: ['latin'], display: 'swap' })
+const inter = Inter({ subsets: ['latin'] })
 
 const LayoutWrapper = ({ children }: Props) => {
   return (

components/LoginFormModal.tsx

@@ -132,7 +132,11 @@ function LoginFormModal({ close, openPasswordResetModal, openRegisterModal }: Pr
               Register
             </Button>
 
-            <Button className="grow basis-0" type="submit" disabled={form.formState.isSubmitting}>
+            <Button
+              className="grow basis-0"
+              type="submit"
+              disabled={!form.formState.isValid || form.formState.isSubmitting}
+            >
               {form.formState.isSubmitting && <Spinner />} Login
             </Button>
           </div>

components/PasswordResetFormModal.tsx

@@ -21,21 +21,19 @@ type Props = { close: () => void }
 function PasswordResetFormModal({ close }: Props) {
   const { toast } = useToast()
 
-  const form = useForm<PasswordResetFormInputs>({
-    resolver: zodResolver(schema),
-  })
+  const form = useForm<PasswordResetFormInputs>({ resolver: zodResolver(schema) })
 
   const requestPasswordResetMutation = trpc.auth.requestPasswordReset.useMutation()
 
   async function onSubmit(data: PasswordResetFormInputs) {
-    await requestPasswordResetMutation.mutateAsync(data)
+    try {
+      await requestPasswordResetMutation.mutateAsync(data)
 
-    toast({
-      title: 'A password reset link has been sent to your email.',
-    })
-
-    close()
-    form.reset({ email: '' })
+      toast({ title: 'A password reset link has been sent to your email.' })
+      close()
+    } catch (error) {
+      toast({ title: 'Sorry, something went wrong.', variant: 'destructive' })
+    }
   }
 
   return (
@@ -61,7 +59,7 @@ function PasswordResetFormModal({ close }: Props) {
             )}
           />
 
-          <Button type="submit" disabled={form.formState.isSubmitting}>
+          <Button type="submit" disabled={!form.formState.isValid || form.formState.isSubmitting}>
             {form.formState.isSubmitting && <Spinner />} Reset Password
           </Button>
         </form>

components/RegisterFormModal.tsx

@@ -148,7 +148,11 @@ function RegisterFormModal({ close, openLoginModal }: Props) {
               I already have an account
             </Button>
 
-            <Button type="submit" disabled={form.formState.isSubmitting} className="grow basis-0">
+            <Button
+              type="submit"
+              disabled={!form.formState.isValid || form.formState.isSubmitting}
+              className="grow basis-0"
+            >
               {form.formState.isSubmitting && <Spinner />} Register
             </Button>
           </div>

pages/[fund]/account/settings.tsx

@@ -118,7 +118,7 @@ function Settings() {
 
       <div className="w-full max-w-lg mx-auto flex flex-col space-y-12">
         <div className="w-full flex flex-col space-y-6">
-          <h1 className="font-semibold">Change Password</h1>
+          <h1 className="font-bold">Change Password</h1>
 
           <Form {...changePasswordForm}>
             <form
@@ -179,7 +179,7 @@ function Settings() {
         </div>
 
         <div className="w-full flex flex-col space-y-6">
-          <h1 className="font-semibold">Change Email</h1>
+          <h1 className="font-bold">Change Email</h1>
 
           <Form {...changeEmailForm}>
             <form