Fixed glitching issues

client/src/App.jsx

@@ -47,9 +47,9 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
   const hideFooterRoutes = ["/login", "/signup", "/forgot-password"];
 
   return (
-    <>
+    <div className="h-full w-full">
       {/* Conditionally render the Navbar */}
-      {!hideNavbarRoutes.includes(location.pathname) && (
+      {/* {!hideNavbarRoutes.includes(location.pathname) && ( */}
         <Navbar
           title='BITBOX'
           home='Home'
@@ -60,16 +60,16 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
           mode={mode}
           toggleMode={toggleMode}
         />
-      )}
+      {/* )} */}
 
       {/* Main content */}
       {children}
 
       {/* Conditionally render the Footer */}
-      {!hideFooterRoutes.includes(location.pathname) && (
+      {/* {!hideFooterRoutes.includes(location.pathname) && ( */}
         <Footer mode={mode} setProgress={setProgress} setAlert={showAlert} />
-      )}
-    </>
+      {/* )} */}
+    </div>
   );
 };
 
@@ -123,7 +123,7 @@ function App() {
   };
 
   return (
-    <div>
+    <div className="h-full w-screen">
       <ProjectState>
         <ProfileState>
           <Router>

client/src/component/Discussion.jsx

@@ -1,127 +1,155 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import './css/Discussion.css';
-import { io } from 'socket.io-client';
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import "./css/Discussion.css";
+import { io } from "socket.io-client";
 // AUDIO
-import recieveMsg from '../assets/music/recieveMsg.mp3';
-import userJoin from '../assets/music/userJoin.mp3';
-import userLeft from '../assets/music/userLeft.mp3';
-import InputModal from './InputModal';
+import recieveMsg from "../assets/music/recieveMsg.mp3";
+import userJoin from "../assets/music/userJoin.mp3";
+import userLeft from "../assets/music/userLeft.mp3";
+import InputModal from "./InputModal";
 
 // Create a Socket
 const socket = io("http://localhost:5000", { transports: ["websocket"] });
 
 const Discussion = (props) => {
-    const [messages, setMessages] = useState([]); // State to store chat messages
-    const [messageInput, setMessageInput] = useState(''); // State to store user input message
-    const [userName, setUserName] = useState(''); // State to store user's name
-    const [isModalOpen, setIsModalOpen] = useState(false);
+  const [messages, setMessages] = useState([]); // State to store chat messages
+  const [messageInput, setMessageInput] = useState(""); // State to store user input message
+  const [userName, setUserName] = useState(""); // State to store user's name
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-    useEffect(() => {
-        setIsModalOpen(true);
+  useEffect(() => {
+    setIsModalOpen(true);
 
-        socket.on('user-joined', name => {
-            // Update messages state with the new user's joining message
-            setMessages(prevMessages => [...prevMessages, { content: `${name} joined the chat`, position: 'center1' }]);
-            // Play audio when a user joins
-            playAudio(userJoin);
-        });
+    socket.on("user-joined", (name) => {
+      // Update messages state with the new user's joining message
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { content: `${name} joined the chat`, position: "center1" },
+      ]);
+      // Play audio when a user joins
+      playAudio(userJoin);
+    });
 
-        // Event listener for receiving a message from the server
-        socket.on('receive', data => {
-            // Update messages state with the received message
-            setMessages(prevMessages => [...prevMessages, { content: `${data.name}: ${data.message}`, position: 'left' }]);
-            // Play audio when receiving a message
-            playAudio(recieveMsg);
-        });
+    // Event listener for receiving a message from the server
+    socket.on("receive", (data) => {
+      // Update messages state with the received message
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { content: `${data.name}: ${data.message}`, position: "left" },
+      ]);
+      // Play audio when receiving a message
+      playAudio(recieveMsg);
+    });
 
-        // Event listener for a user leaving the chat
-        socket.on('left', name => {
-            // Update messages state with the user's leaving message
-            setMessages(prevMessages => [...prevMessages, { content: `${name} left the chat`, position: 'center2' }]);
-            // Play audio when a user leaves
-            playAudio(userLeft);
-        });
+    // Event listener for a user leaving the chat
+    socket.on("left", (name) => {
+      // Update messages state with the user's leaving message
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { content: `${name} left the chat`, position: "center2" },
+      ]);
+      // Play audio when a user leaves
+      playAudio(userLeft);
+    });
 
-        // Clean up socket listeners when component unmounts
-        return () => {
-            socket.off('user-joined');
-            socket.off('receive');
-            socket.off('left');
-        };
-
-    }, []);
-
-    // Function to handle audio playback
-    const playAudio = (audio) => {
-        const audioElement = new Audio(audio); // Create new Audio object
-        audioElement.play(); // Play the audio
+    // Clean up socket listeners when component unmounts
+    return () => {
+      socket.off("user-joined");
+      socket.off("receive");
+      socket.off("left");
     };
+  }, []);
 
-    // Function to handle form submission
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        const message = messageInput.trim();
-        if (message !== '') {
-            // Append your own message immediately to avoid waiting for the server
-            setMessages(prevMessages => [...prevMessages, { content: `You: ${message}`, position: 'right' }]);
-            socket.emit('send', message); // Emit 'send' event to the server
-            setMessageInput(''); // Clear the message input field
-        }
-    };
-    const handleJoin = (name) => {
-        setUserName(name);
-        socket.emit('join', name); // Notify the server that a user has joined
-        setIsModalOpen(false); // Close the modal after a successful join
-      };
-    return (
-        <div className='discussion-main-container mt-20 mb-[50px]'>
-            <InputModal
-                isOpen={isModalOpen}
-                onClose={() => setIsModalOpen(false)}
-                onSubmit={handleJoin}
-            />
+  // Function to handle audio playback
+  const playAudio = (audio) => {
+    const audioElement = new Audio(audio); // Create new Audio object
+    audioElement.play(); // Play the audio
+  };
 
-            <div className='discussion-container-section'>
-                {/* Container for displaying chat messages */}
-                <div className="discussion-container" style={{ color: props.mode === 'dark' ? 'black' : '' }}>
-                    <div className="welcome-center fs-3 mt-3">{`Welcome  ${userName} to the Bitbox Community`}</div>
-                    {messages.map((message, index) => (
-                        <div key={index} className={`message ${message.position}`}>{message.content}</div>
-                    ))}
-                </div>
+  // Function to handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const message = messageInput.trim();
+    if (message !== "") {
+      // Append your own message immediately to avoid waiting for the server
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { content: `You: ${message}`, position: "right" },
+      ]);
+      socket.emit("send", message); // Emit 'send' event to the server
+      setMessageInput(""); // Clear the message input field
+    }
+  };
+  const handleJoin = (name) => {
+    setUserName(name);
+    socket.emit("join", name); // Notify the server that a user has joined
+    setIsModalOpen(false); // Close the modal after a successful join
+  };
+  return (
+    <div className="discussion-main-container mt-20 mb-[50px]">
+      <InputModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSubmit={handleJoin}
+      />
 
-                {/* Form for sending messages */}
-                <div className="discussion-send pb-[20px]">
-                    <form id="discussion-send-container pb-[20px]" onSubmit={handleSubmit}>
-                        <input style={{ color: props.mode === 'dark' ? 'black' : '' }}
-                            type="text"
-                            name="messageImp"
-                            id="messageInp"
-                            placeholder="Type a message"
-                            value={messageInput}
-                            onChange={e => setMessageInput(e.target.value)}
-                        />
-                        <button className="discussion-btn" type="submit" style={{ color: props.mode === 'dark' ? 'black' : '' }}>Send</button>
-                    </form>
-                </div>
+      <div className="discussion-container-section flex items-center h-full justify-center flex-col w-full">
+        {/* Container for displaying chat messages */}
+        <div
+          className="discussion-container"
+          style={{ color: props.mode === "dark" ? "black" : "" }}
+        >
+          <div className="welcome-center fs-3 mt-3">{`Welcome  ${userName} to the Bitbox Community`}</div>
+          {messages.map((message, index) => (
+            <div key={index} className={`message ${message.position}`}>
+              {message.content}
             </div>
+          ))}
+        </div>
+
+        {/* Form for sending messages */}
+        <div className="discussion-send pb-[20px] pt-10 w-full">
+          <form
+            id="discussion-send-container pb-[20px]"
+            className="w-full items-center flex justify-center "
+            onSubmit={handleSubmit}
+          >
+            <input
+              style={{ color: props.mode === "dark" ? "black" : "" }}
+              type="text"
+              name="messageImp"
+              id="messageInp"
+              placeholder="Type a message"
+              className="h-"
+              value={messageInput}
+              onChange={(e) => setMessageInput(e.target.value)}
+            />
+            <button
+              className="discussion-btn"
+              type="submit"
+              style={{ color: props.mode === "dark" ? "black" : "" }}
+            >
+              Send
+            </button>
+          </form>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 // Props Validation
 Discussion.propTypes = {
-    title: PropTypes.string,
-    home: PropTypes.string,
-    community: PropTypes.string,
-    discussion: PropTypes.string,
-    myProjects: PropTypes.string,
-    about: PropTypes.string,
-    mode: PropTypes.string,
-    toggleMode: PropTypes.func,
-    showAlert: PropTypes.func,
-    isAuthenticated: PropTypes.bool,
+  title: PropTypes.string,
+  home: PropTypes.string,
+  community: PropTypes.string,
+  discussion: PropTypes.string,
+  myProjects: PropTypes.string,
+  about: PropTypes.string,
+  mode: PropTypes.string,
+  toggleMode: PropTypes.func,
+  showAlert: PropTypes.func,
+  isAuthenticated: PropTypes.bool,
 };
 
 export default Discussion;

client/src/component/Login.jsx

@@ -54,8 +54,9 @@ const Login = ({ mode, showAlert }) => {
   };
 
   return (
+    <div className="h-screen flex items-center justify-center">
     <div
-      className='wrapper'
+      className="wrapper h-3/4 mt-10"
       style={{
         backgroundColor: mode === "dark" ? "black" : "white",
         color: mode === "dark" ? "white" : "black",
@@ -81,6 +82,7 @@ const Login = ({ mode, showAlert }) => {
             onChange={onChange}
             autoComplete='on'
             required
+            className="h-10 text-xl"
             style={{
               backgroundColor: mode === "dark" ? "black" : "white",
               color: mode === "dark" ? "white" : "black",
@@ -95,31 +97,29 @@ const Login = ({ mode, showAlert }) => {
             name='password'
             value={credentials.password}
             onChange={onChange}
-            autoComplete='on'
-            iconRender={(visible) =>
-              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
-            }
+            autoComplete="on"
+            className="h-10 text-xl"
             style={{
               backgroundColor: mode === "dark" ? "black" : "white",
               color: mode === "dark" ? "white" : "black",
             }}
             required
+            iconRender={(visible) =>
+              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+            }
           />
         </div>
 
-        <Button className='submit' type='submit' disabled={loading}>
-          {loading ? <Spin size='small' /> : "Login"}
+        <Button className="submit h-10 text-xl" type="submit" disabled={loading}>
+          {loading ? <Spin size="small" /> : "Login"}
         </Button>
 
-        <p
-          className='footer'
-          style={{
-            backgroundColor: mode === "dark" ? "black" : "white",
-            color: mode === "dark" ? "white" : "black",
-          }}
-        >
+        <p className="footer text-xl" style={{
+        backgroundColor: mode === "dark" ? "black" : "white",
+        color: mode === "dark" ? "white" : "black",
+      }}>
           Don&apos;t have an account?
-          <Link className='link' to='/Signup'>
+          <Link className="link text-xl" to="/signup">
             {" "}
             Sign Up
           </Link>
@@ -128,7 +128,7 @@ const Login = ({ mode, showAlert }) => {
         <Button
           style={{ backgroundColor: "#6366f1", color: "#FFFFFF" }}
           onClick={() => navigate("/forgot-password")}
-          className='mt-3'
+          className="mt-3 h-10 text-xl"
         >
           Forgot Password?
         </Button>
@@ -157,6 +157,7 @@ const Login = ({ mode, showAlert }) => {
         </p>
       </div>
     </div>
+    </div>
   );
 };