Merge pull request #294 from UjjwalSaini07/Patch-Branch23

Update the Join With Code Section
Curious-Ecosystem · Aug 10, 2024 · b9cb4d1 · b9cb4d1
2 parents 9ee84dc + 6e5f4ba
commit b9cb4d1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 97 deletions.
diff --git a/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx b/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx
@@ -11,7 +11,6 @@ const JoinWithCode = () => {
   };
 
   const handleJoinRoom = () => {
-    // Perform actions when the "Join Room" button is clicked
     console.log('Joining room with code:', meetingCode);
   };
 
@@ -24,129 +23,51 @@ const JoinWithCode = () => {
     return () => window.removeEventListener('resize', updateMedia);
   }, []);
 
-  const containerStyle = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: '40px',
-    padding: '20px',
-    fontWeight: 'bold',
-    color: 'white',
-    background: '#1e2228',
-    borderRadius: '20px',
-    boxShadow: '0 10px 20px rgba(0, 0, 0, 0.3)',
-    maxWidth: '90%',
-    margin: '20px auto',
-    fontFamily: 'Arial, sans-serif',
-    fontSize: '18px',
-    flexWrap: isMobile ? 'wrap' : 'nowrap',
-    textAlign: isMobile ? 'center' : 'left',
-  };
-
   return (
-    <>
-      <div className='flex tracking-wide justify-center mb-20 items-center px-16 py-6 lg:m-10 m-3 font-bold text-white normal rounded-xl bg-transparent border-2 border-zinc-400 max-md:px-5 bg-[#15181D]'>
-        <div className='flex gap-5 w-full max-w-screen-lg max-md:flex-wrap max-md:justify-center max-md:max-w-[500px]'>
-          <div className='flex-auto my-auto text-xl whitespace-nowrap text-center'>
-            Paste the meeting code
-          </div>
-          <input
-            className='justify-center lg:mr-20 md:w-fit lg:w-[300px] px-8 py-6 text-md whitespace-nowrap rounded-xl bg-zinc-800 max-md:px-5 bg-[#242830]'
-            placeholder='abc-def-xyz'
-          />
-          <div className='justify-center self-center p-3 text-md bg-[#077BE7] rounded-xl cursor-pointer hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'>
-            Join Room
-          </div>
-          <img
-            loading='lazy'
-            src={img2}
-            className='flex justify-center items-center self-center cursor-pointer w-[40px] h-[40px] p-2 bg-[#077BE7] rounded-xl hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'
-          />
-        </div>
-      </div>
-
+    <motion.div
+      initial={{ opacity: 0, y: -50 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -50 }}
+      transition={{ duration: 0.5 }}
+      className='flex tracking-wide justify-center mb-20 items-center px-16 py-6 lg:m-10 m-3 font-bold text-white normal rounded-xl bg-transparent border-2 border-zinc-400 max-md:px-5 bg-[#15181D]'
+    >
       <motion.div
-        initial={{ opacity: 0, y: -50 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -50 }}
-        transition={{ duration: 0.5 }}
-        style={containerStyle}
+        className='flex gap-3 w-full max-w-screen-lg max-md:flex-wrap max-md:justify-center max-md:max-w-[500px]'
       >
         <motion.div
           initial={{ opacity: 0, scale: 0 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ delay: 0.5 }}
-          style={{
-            marginRight: isMobile ? '0' : '20px',
-            fontSize: '2rem',
-            textShadow: '2px 2px 4px rgba(0, 0, 0, 0.4)',
-            marginBottom: isMobile ? '10px' : '0',
-            flex: isMobile ? '1 1 100%' : 'none',
-          }}
+          className='flex-auto my-auto text-3xl whitespace-nowrap text-center'
         >
           Paste the meeting code
         </motion.div>
         <motion.input
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}
-          style={{
-            width: '100%',
-            maxWidth: '400px',
-            padding: '16px',
-            fontSize: '1rem',
-            borderRadius: '10px',
-            border: '2px solid #4b5563',
-            backgroundColor: '#222222',
-            color: 'white',
-            outline: 'none',
-            transition: 'border-color 0.3s ease',
-            marginBottom: isMobile ? '10px' : '0',
-          }}
+          className='justify-center lg:mr-7 md:w-fit lg:w-[400px] px-6 py-6 text-md whitespace-nowrap rounded-xl bg-zinc-800 max-md:px-5 bg-[#242830]'
           placeholder='abc-def-xyz'
           value={meetingCode}
           onChange={handleInputChange}
         />
-        <motion.button
+        <motion.div
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}
           onClick={handleJoinRoom}
-          style={{
-            padding: '14px 28px',
-            fontSize: '1rem',
-            backgroundColor: '#1e90ff',
-            borderRadius: '20px',
-            border: 'none',
-            cursor: 'pointer',
-            marginLeft: isMobile ? '0' : '20px',
-            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
-            transition: 'transform 0.3s ease, box-shadow 0.3s ease',
-            marginBottom: isMobile ? '10px' : '0',
-            display: 'flex',
-            alignItems: 'center',
-          }}
+          className='justify-center self-center p-3 text-md bg-[#077BE7] rounded-xl cursor-pointer hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'
         >
           Join Room
-        </motion.button>
+        </motion.div>
         <motion.img
           whileHover={{ scale: 1.1 }}
           whileTap={{ scale: 0.9 }}
           loading='lazy'
           src={img2}
           alt='Refresh'
-          style={{
-            width: '40px',
-            height: '40px',
-            marginLeft: '20px',
-            backgroundColor: '#1e90ff',
-            borderRadius: '50%',
-            cursor: 'pointer',
-            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
-            transition: 'transform 0.3s ease, box-shadow 0.3s ease',
-          }}
+          className='flex justify-center items-center self-center cursor-pointer w-[40px] h-[40px] p-2 bg-[#077BE7] rounded-xl hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'
         />
       </motion.div>
-    </>
+    </motion.div>
   );
 };
 

diff --git a/frontend/src/Components/Pages/Landing-Page/Navbar.jsx b/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
@@ -27,12 +27,12 @@ const Navbar = () => {
   return (
     <>
       <nav className='h-20 flex gap-20 text-white items-center justify-between pt-8 md:px-20 px-2 relative'>
-        <div className='flex items-center gap-6'>
+        <div className='flex items-center gap-2'>
           {/* Wrap the logo image in a Link component */}
           <Link to="/" className="cursor-pointer">
             <motion.img
               src={logo}
-              className='size-16 rounded-full'
+              className='size-12 rounded-full'
               alt='logo'
               whileHover={{ scale: 1.1, rotate: [0, -10, 0, 10, 0], transition: { duration: 0.3 } }}
             />
@@ -83,7 +83,7 @@ const Navbar = () => {
             ))}
           </motion.div>
         </motion.div>
-        <div className='hidden lg:flex justify-between gap-28 items-center z-20'>
+        <div className='hidden lg:flex justify-between gap-20 items-center z-20'>
           {navItems.map((item) => (
             <Link to={item.path} key={item.id}>
               <motion.span