improved style & turned off remaining sockets

Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>

client/src/components/Lobby.jsx

@@ -28,9 +28,9 @@ const LobbyScreen = () => {
     }, [socket, handleJoinRoom]);
 
     return (
-        <div className='flex flex-col items-center justify-center'>
-            <h1 className=' font-semibold mb-5 mt-5 '>Lobby</h1>
-            <div>
+        <div className='flex flex-col items-center justify-center h-screen bg-gray-100'>
+            <h1 className='text-3xl font-semibold mb-5 mt-5 '>Lobby</h1>
+            <div className='bg-white p-6 rounded shadow-md'>
                 <form className='flex flex-col items-center justify-center'
                     onSubmit={handleSubmitForm}
                 >
@@ -52,7 +52,7 @@ const LobbyScreen = () => {
                         onChange={(e) => setRoom(e.target.value)}
                     />
                     <br />
-                    <button className='joinButton'>
+                    <button  className='bg-blue-500 hover:bg-blue-600'>
                         Join
                     </button>
                 </form>

client/src/pages/room/[slug].jsx

@@ -114,6 +114,10 @@ const RoomPage = () => {
                 setRemoteSocketId(null);
             }
         });
+
+        return () => {
+            socket.off("call:end");
+        }
     }, [remoteSocketId, myStream, socket]);
 
     //* for disappearing call button
@@ -123,6 +127,10 @@ const RoomPage = () => {
                 setCallButton(false);
             }
         });
+
+        return () => {
+            socket.off("call:initiated");
+        }
     }, [socket, remoteSocketId]);
 
 
@@ -149,9 +157,10 @@ const RoomPage = () => {
         // set my stream
         setMyStream(stream);
 
-        // hide the call button
+        //* hide the call button
         setCallButton(false);
-        // Inform the remote user to hide their "CALL" button
+
+        //* Inform the remote user to hide their "CALL" button
         socket.emit("call:initiated", { to: remoteSocketId });
     }, [remoteSocketId, socket, isAudioMute, isVideoOnHold, callButton]);
 
@@ -187,12 +196,12 @@ const RoomPage = () => {
             <h1 className='font-bold text-7xl md:text-5xl p-3'>RoomPage</h1>
             <h4 className='font-bold text-4xl md:text-xl p-3 mb-4'>{remoteSocketId ? "Connected" : "No One In Room"}</h4>
             {(myStream || remoteStream) &&
-                <button className='callButton' onClick={sendStreams}>
+                <button className='bg-green-500 hover:bg-green-600' onClick={sendStreams}>
                     Send Stream
                 </button>
             }
             {(remoteSocketId && callButton) &&
-                <button className='callButton' onClick={handleCallUser}>
+                <button className='bg-green-500 hover:bg-green-600' onClick={handleCallUser}>
                     CALL
                 </button>
             }
@@ -229,16 +238,19 @@ const RoomPage = () => {
             </div>
             {myStream &&
                 (
-                    <div className='flex space-x-4 mt-4'>
-                        <button className='joinButton' onClick={handleToggleAudio}>
-                            {isAudioMute ? "Unmute" : "Mute"}
-                        </button>
-                        <button className='joinButton' onClick={handleToggleVideo}>
-                            {isVideoOnHold ? "Resume Video" : "Hold Video"}
-                        </button>
-                        <button className='joinButton' onClick={handleEndCall}>
-                            End Call
-                        </button>
+                    <div className='flex space-x-4 mt-4 h-20 items-center 
+                justify-center w-96 rounded-md bg-gray-100'>
+                        <div className='flex w-[100%] justify-evenly'>
+                            <button className="bg-purple-500 hover:bg-purple-700" onClick={handleToggleAudio}>
+                                {isAudioMute ? "Unmute" : "Mute"}
+                            </button>
+                            <button className="bg-purple-500 hover:bg-purple-700" onClick={handleToggleVideo}>
+                                {isVideoOnHold ? "Resume Video" : "Hold Video"}
+                            </button>
+                            <button className="bg-purple-500 hover:bg-purple-700" onClick={handleEndCall}>
+                                End Call
+                            </button>
+                        </div>
                     </div>
                 )}
         </div>

client/src/styles/globals.css

@@ -4,39 +4,37 @@
 
 label{
     color: #333;
-    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    font-weight: 500;
 }
 
 input{
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 0.1rem;
-    margin-bottom: 0.3rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    border-width: 1px;
+    border-color: rgb(170, 170, 170);
+    &:focus{
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        --tw-border-opacity: 1;
+        border-color: rgb(59 130 246 / var(--tw-border-opacity));
+    }
+    
 }
 
 button{
-    font-weight: 500;
-    border-radius: 1rem;
-    font-size: 0.875rem;
-    padding:  0.5rem 1rem;
-    text-align: center;
-    margin-bottom: 1rem;
-}
-
-.joinButton{
-    color: #fff;
-    background-color: #7c3aed;
-    &:hover{
-        background-color: #6a28b7;
-    }
-}
-
-
-.callButton{
-    color: #fff;
-    background-color: limegreen;
+    color: white;
+    padding: 0.5rem 1rem 0.5rem 1rem;
+    border-radius: 0.25rem;
     transition: background-color 250ms ease-in-out;
-    &:hover{
-        background-color: forestgreen;
+
+    &:focus{
+        outline: 2px solid transparent;
+        outline-offset: 2px;
     }
 }