update UI

src/components/ChatContent/Input/index.jsx

@@ -66,7 +66,7 @@ function Input({ roomId, theme, emoji, reply, setDisplayReply, setReply }) {
                     <MdEmojiEmotions />
                     {displayEmoji && (
                         <span
-                            className='md:absolute right-0 bottom-14 fixed flex-center w-full'
+                            className='md:absolute right-0 bottom-14 fixed flex-center w-full md:w-auto'
                             onClick={(e) => e.stopPropagation()}
                         >
                             <Picker

src/components/ChatContent/Message/MyMessage.jsx

@@ -1,4 +1,4 @@
-import { useState, useContext } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import { formatDate } from '../../../constants/moment';
 import {
     MdFileDownload,
@@ -29,7 +29,7 @@ function MyMessage({ message, theme, setLink }) {
         <>
             {replyMessage !== null && (
                 <p
-                    className='px-3 py-2 rounded-lg w-56 md:max-w-md truncate dark:text-gray-200 text-black bg-gray-200 dark:bg-lightDark border-2 ml-auto mt-0.5'
+                    className='px-3 py-2 rounded-lg md:max-w-m w-max max-w-[300px] truncate dark:text-gray-200 text-black bg-gray-200 dark:bg-lightDark border-2 ml-auto mt-0.5'
                     style={{ borderColor: theme }}
                 >
                     {replyMessage ? replyMessage : 'Removed Message'}

src/pages/Login.jsx

@@ -19,15 +19,6 @@ function Login() {
         });
     }, []);
 
-    const handleLogin = async (provider) => {
-        try {
-            const { user } = await signInWithPopup(auth, provider);
-            checkUser(user);
-        } catch (error) {
-            console.log(error);
-        }
-    };
-
     const checkUser = async (user) => {
         try {
             const result = await getUser(user.uid);
@@ -39,9 +30,20 @@ function Login() {
         }
     };
 
+    const handleLogin = async (provider) => {
+        try {
+            const { user } = await signInWithPopup(auth, provider);
+            checkUser(user);
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
     return (
         <div className='min-h-screen bg-gradient-to-br from-pink-600 to-indigo-800 flex flex-col justify-center items-center gap-4'>
-            <h1 className='text-white text-6xl font-medium mb-4'>MESSENGER</h1>
+            <h1 className='text-white md:text-6xl font-medium mb-4 text-[12vw]'>
+                MESSENGER
+            </h1>
             <button
                 type='button'
                 className='login-btn bg-white text-black hover:bg-gray-300'

src/styles/tailwind.css

@@ -10,7 +10,7 @@
         @apply flex items-center justify-between;
     }
     .login-btn {
-        @apply px-4 py-2 rounded flex justify-center items-center gap-2 font-medium;
+        @apply px-4 py-2 rounded flex-center gap-2;
     }
     .input-dark {
         @apply dark:bg-lightDark px-4 py-2 rounded-xl w-full outline-none bg-gray-300 dark:text-white text-black;