Dev

components/modal/auth/AuthInputs.tsx

@@ -20,7 +20,7 @@ const AuthInputs: React.FC<AuthInputsProps> = () => {
   const modalState = useAtomValue(authModalStateAtom);
 
   return (
-    <Flex direction="column" align="center" width="100%" mt={4}>
+    <Flex direction="column" align="stretch" width="100%" mt={4}>
       {modalState.view === "login" && <Login />}
       {modalState.view === "signup" && <Signup />}
     </Flex>

components/modal/auth/AuthModal.tsx

@@ -14,6 +14,7 @@ import {
   DialogTitle,
   Flex,
   Separator,
+  Box,
 } from "@chakra-ui/react";
 import { useAtom } from "jotai";
 import React, { useEffect } from "react";
@@ -92,12 +93,12 @@ const AuthModal: React.FC = () => {
             >
               {/* If user is trying to authenticate (log in or sign up) */}
               {modalState.view === "login" || modalState.view === "signup" ? (
-                <>
+                <Box width="100%">
                   <OAuthButtons />
                   {/* <Text color='gray.500' fontWeight={700}>OR</Text> */}
                   <Separator />
                   <AuthInputs />
-                </>
+                </Box>
               ) : (
                 // If user is trying to reset password
                 <ResetPassword />

components/modal/auth/Login.tsx

@@ -45,7 +45,13 @@ const Login: React.FC<LoginProps> = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        handleSubmit(onSubmit)(e);
+      }}
+      style={{ width: "100%" }}
+    >
       <InputField placeholder="Email" type="email" {...register("email")} />
       {errors.email && (
         <Text color="red.500" fontSize="10pt" mt={1}>
@@ -94,7 +100,8 @@ const Login: React.FC<LoginProps> = () => {
         height="36px"
         mt={2}
         mb={2}
-        type="submit"
+        type="button"
+        onClick={handleSubmit(onSubmit)}
         loading={loading}
         disabled={!isValid}
       >

components/modal/auth/ResetPassword.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Icon, Image, Input, Text } from "@chakra-ui/react";
+import { Button, Flex, Icon, Image, Input, Text, Box } from "@chakra-ui/react";
 import { useSetAtom } from "jotai";
 import React, { useState } from "react";
 import { useSendPasswordResetEmail } from "react-firebase-hooks/auth";
@@ -38,12 +38,12 @@ const ResetPassword: React.FC = () => {
       {success ? (
         <Text mb={4}>Check your email</Text>
       ) : (
-        <>
+        <Box width="100%" display="flex" flexDirection="column" alignItems="center">
           <Text fontSize="sm" textAlign="center" mb={2}>
             Enter the email associated with your account and we will send you a
             reset link
           </Text>
-          <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
+          <form onSubmit={(e) => { e.preventDefault(); handleSubmit(onSubmit)(e); }} style={{ width: "100%" }}>
             <Input
               placeholder="Email"
               type="email"
@@ -76,19 +76,20 @@ const ResetPassword: React.FC = () => {
             >
               {error?.message}
             </Text>
-            <Button
+              <Button
               width="100%"
               height="36px"
               mb={2}
               mt={2}
-              type="submit"
+              type="button"
+              onClick={handleSubmit(onSubmit)}
               loading={sending}
               disabled={!isValid}
             >
               Reset Password
             </Button>
           </form>
-        </>
+        </Box>
       )}
       <Flex
         alignItems="center"

components/modal/auth/Signup.tsx

@@ -30,7 +30,13 @@ const SignUp = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        handleSubmit(onSubmit)(e);
+      }}
+      style={{ width: "100%" }}
+    >
       <InputField placeholder="Email" type="email" {...register("email")} />
       {errors.email && (
         <Text color="red.500" fontSize="10pt" mt={1}>
@@ -106,7 +112,8 @@ const SignUp = () => {
         height="36px"
         mt={2}
         mb={2}
-        type="submit"
+        type="button"
+        onClick={handleSubmit(onSubmit)}
         loading={loading}
         disabled={!isValid}
       >

components/posts/comments/CommentInput.tsx

@@ -1,6 +1,6 @@
 import ProfileModal from "@/components/modal/profile/ProfileModal";
 import AuthButtons from "@/components/navbar/right-content/AuthButtons";
-import { Flex, Textarea, Button, Text, Stack, Icon } from "@chakra-ui/react";
+import { Flex, Textarea, Button, Text, Stack, Icon, Box } from "@chakra-ui/react";
 import { LuSend, LuTrash } from "react-icons/lu";
 import { User } from "firebase/auth";
 import React, { useState } from "react";
@@ -37,14 +37,15 @@ const CommentInput: React.FC<CommentInputProps> = ({
   const commentText = watch("text");
 
   const onSubmit = (data: CommentInputType) => {
+    console.log("Submitting comment:", data.text);
     onCreateComment(data.text);
     reset();
   };
 
   return (
     <Flex direction="column" position="relative">
       {user ? (
-        <>
+        <Box width="100%">
           <ProfileModal
             handleClose={() => setProfileModalOpen(false)}
             open={isProfileModalOpen}
@@ -67,7 +68,7 @@ const CommentInput: React.FC<CommentInputProps> = ({
             </Text>
           </Stack>
 
-          <form onSubmit={handleSubmit(onSubmit)}>
+          <form onSubmit={(e) => { e.preventDefault(); handleSubmit(onSubmit)(e); }}>
             <Flex
               direction="column"
               bg={{ base: "white", _dark: "gray.800" }}
@@ -124,7 +125,8 @@ const CommentInput: React.FC<CommentInputProps> = ({
                     disabled={!isValid}
                     loading={createLoading}
                     borderRadius={"xl"}
-                    type="submit"
+                    type="button"
+                    onClick={handleSubmit(onSubmit)}
                     height={"36px"}
                   >
                     <Icon as={LuSend} mr={2} />
@@ -134,7 +136,7 @@ const CommentInput: React.FC<CommentInputProps> = ({
               </Flex>
             </Flex>
           </form>
-        </>
+        </Box>
       ) : (
         <Flex
           align="center"