From 6ebe0989a6dd22758492a028537f922a3edca861 Mon Sep 17 00:00:00 2001
From: Md-Rubel-Ahmed-Rana <mdrubelahmedrana521@gmail.com>
Date: Tue, 9 Jul 2024 00:22:52 +0600
Subject: [PATCH] Contact section and login, register and some others design
 issue solved

---
 .../LandingPage/contact/ContactSection.tsx    |  4 +--
 .../src/components/pages/Signup/Signup.tsx    | 28 ++-----------------
 frontend/src/components/pages/login/Login.tsx |  2 +-
 frontend/src/components/shared/Footer.tsx     |  4 +--
 frontend/src/components/shared/Navbar.tsx     | 17 +++++------
 5 files changed, 16 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/pages/LandingPage/contact/ContactSection.tsx b/frontend/src/components/pages/LandingPage/contact/ContactSection.tsx
index b6e17ba..6557346 100644
--- a/frontend/src/components/pages/LandingPage/contact/ContactSection.tsx
+++ b/frontend/src/components/pages/LandingPage/contact/ContactSection.tsx
@@ -41,7 +41,7 @@ const ContactSection = () => {
   };
 
   return (
-    <section className="py-16 text-center">
+    <section className="py-16 px-5 text-center">
       <h2 className="text-3xl font-bold mb-8">Contact Us</h2>
       <p className="text-lg mb-8">
         Have questions or need assistance? Reach out to our team for support.
@@ -89,7 +89,7 @@ const ContactSection = () => {
           </div>
           <button
             type="submit"
-            className="bg-blue-500 text-white py-2 px-4 rounded-full hover:bg-blue-700"
+            className="bg-blue-500 w-full lg:w-auto text-white py-2 px-4 rounded-full hover:bg-blue-700"
           >
             Send Message
           </button>
diff --git a/frontend/src/components/pages/Signup/Signup.tsx b/frontend/src/components/pages/Signup/Signup.tsx
index 61e1129..7dc8c3f 100644
--- a/frontend/src/components/pages/Signup/Signup.tsx
+++ b/frontend/src/components/pages/Signup/Signup.tsx
@@ -5,7 +5,6 @@ import { IoMdEye, IoMdEyeOff } from "react-icons/io";
 import { useRouter } from "next/router";
 import { IUser } from "@/interfaces/user.interface";
 import { useCreateUserMutation } from "@/features/user";
-import useUploadFile from "@/hooks/useUploadFile";
 import GoogleLogin from "@/components/shared/GoogleLogin";
 
 const Signup = () => {
@@ -13,14 +12,12 @@ const Signup = () => {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<IUser>();
+  } = useForm<IUser>({ mode: "onChange" });
   const router = useRouter();
   const [createUser] = useCreateUserMutation();
-  const [profilePicture, setProfilePicture] = useState("");
   const [togglePassword, setTogglePassword] = useState(false);
 
   const handleRegister: SubmitHandler<IUser> = async (data) => {
-    data.profile_picture = profilePicture;
     const result: any = await createUser(data);
     if (result?.data?.success) {
       if (result?.data?.success) {
@@ -44,19 +41,11 @@ const Signup = () => {
     }
   };
 
-  const uploadFile = useUploadFile();
-
-  const handleFileChange = async (e: any) => {
-    const selectedFile = e.target.files[0];
-    const uploadedFile: any = await uploadFile(selectedFile);
-    setProfilePicture(uploadedFile?.url);
-  };
-
   return (
     <div className="flex items-center justify-center py-5 px-4 sm:px-6 lg:px-8">
       <div className="max-w-[620px] w-full">
         <form
-          className="shadow-2xl lg:px-10 px-5 py-5 rounded-md"
+          className="lg:shadow-2xl lg:px-10 py-5 rounded-md"
           onSubmit={handleSubmit(handleRegister)}
         >
           <div>
@@ -138,19 +127,6 @@ const Signup = () => {
                 </p>
               )}
             </div>
-            <div className="my-5">
-              <label htmlFor="profile_picture">Profile Picture</label>
-              <input
-                aria-label="Profile Image"
-                type="file"
-                accept="image/*"
-                onChange={handleFileChange}
-                className={`appearance-none rounded-md relative block w-full px-3 py-2 border ${
-                  errors.profile_picture ? "border-red-500" : "border-gray-300"
-                } placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm`}
-                placeholder="Email address"
-              />
-            </div>
             <div className="-mt-px relative">
               <label htmlFor="password">Password</label>
               <input
diff --git a/frontend/src/components/pages/login/Login.tsx b/frontend/src/components/pages/login/Login.tsx
index ba2809b..7633673 100644
--- a/frontend/src/components/pages/login/Login.tsx
+++ b/frontend/src/components/pages/login/Login.tsx
@@ -50,7 +50,7 @@ const Login = () => {
     <div className="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full">
         <form
-          className="shadow-2xl px-10 py-5 rounded-md"
+          className="lg:shadow-2xl lg:px-10 py-5 rounded-md"
           onSubmit={handleSubmit(onSubmit)}
         >
           <div>
diff --git a/frontend/src/components/shared/Footer.tsx b/frontend/src/components/shared/Footer.tsx
index 9624abf..c56adf4 100644
--- a/frontend/src/components/shared/Footer.tsx
+++ b/frontend/src/components/shared/Footer.tsx
@@ -23,8 +23,8 @@ const socialIcons = [
 
 const Footer = () => {
   return (
-    <footer className="shadow-lg p-16">
-      <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
+    <footer className="shadow-lg  lg:p-16">
+      <div className="flex flex-col md:flex-row justify-between  items-center">
         <div className="mb-8 md:mb-0">
           <h1 className="text-2xl font-bold mb-2">Team Manager</h1>
           <p className="text-sm">Streamlining teamwork for success.</p>
diff --git a/frontend/src/components/shared/Navbar.tsx b/frontend/src/components/shared/Navbar.tsx
index 873ec03..a6c448a 100644
--- a/frontend/src/components/shared/Navbar.tsx
+++ b/frontend/src/components/shared/Navbar.tsx
@@ -8,7 +8,6 @@ import { IUser } from "@/interfaces/user.interface";
 import { useLoggedInUserQuery, useLogoutUserMutation } from "@/features/user";
 import Link from "next/link";
 import { useTheme } from "next-themes";
-import Cookies from "js-cookie";
 import { useGetNotificationQuery } from "@/features/notification";
 import { INotification } from "@/interfaces/notification.interface";
 import { SocketContext } from "@/context/SocketContext";
@@ -118,13 +117,13 @@ const Navbar = () => {
               query: { uId: user?.id, activeView: "profile" },
             }}
             className={`${
-              !user.profile_picture && "border m-2 p-2 rounded-full"
+              !user?.profile_picture && "border m-2 p-2 rounded-full"
             }`}
           >
-            {user.profile_picture ? (
+            {user?.profile_picture ? (
               <img
                 className="w-10 h-10 rounded-full"
-                src={user.profile_picture}
+                src={user?.profile_picture}
                 alt=""
               />
             ) : (
@@ -185,12 +184,14 @@ const Navbar = () => {
                   pathname: "/dashboard",
                   query: { uId: user?.id, activeView: "profile" },
                 }}
-                className={`${!user.profile_picture && "border  rounded-full"}`}
+                className={`${
+                  !user?.profile_picture && "border  rounded-full"
+                }`}
               >
-                {user.profile_picture ? (
+                {user?.profile_picture ? (
                   <img
                     className="w-10 h-10 rounded-full"
-                    src={user.profile_picture}
+                    src={user?.profile_picture}
                     alt=""
                   />
                 ) : (
@@ -227,7 +228,7 @@ const Navbar = () => {
               </>
             )}
 
-            {user.email && (
+            {user?.email && (
               <>
                 <button
                   className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"