made components responsive

Author: coderKrysio

components/Form.tsx

@@ -27,7 +27,7 @@ const Form = ({ setFormData }: any) => {
     const renderForm = () => {
         return (
             <form
-                className="w-[350px] min-h-[350px] text-xl flex flex-col justify-start items-center"
+                className="w-[350px] min-h-[350px] text-xl flex flex-col justify-start items-center max-[500px]:w-[300px]"
                 onSubmit={(e) => {
                     e.preventDefault()
                 }}

components/GetForm.tsx

@@ -24,7 +24,7 @@ const GetForm = ({ roomCode }: RoomCode) => {
     })
 
     const checkFields = () => {
-        if(formData.name == '') setShowError(true);
+        if(formData.name === '') setShowError(true);
         else {
             setShowError(false)
             router.push(`/${roomCode}/result`)
@@ -34,24 +34,24 @@ const GetForm = ({ roomCode }: RoomCode) => {
     console.log(formData)
 
     return (
-        <div className="w-screen min-h-screen flex flex-col justify-center items-center text-white py-[70px]">
+        <div className="w-screen min-h-screen flex flex-col justify-center items-center text-white pb-[70px] pt-[90px]">
             <Navbar />
 
-            <div className="relative w-fit border-2 border-white ml-6 p-8 rounded-2xl flex justify-start items-start bg-[#16161a]">
+            <div className="relative w-fit border-2 border-white ml-6 p-8 rounded-2xl flex justify-start items-start bg-[#16161a] max-[985px]:flex-col max-[500px]:p-4 max-[500px]:ml-0 max-[500px]:py-8">
                 <div>
                     <p className="text-2xl text-[#d4d4d4] mb-[20px]">Room Code: {roomCode}</p>
 
                     <Form setFormData={setFormData} />
                 </div>
 
-                <div className="mt-[20px] ml-[20px]">
+                <div className="mt-[20px] ml-[20px] max-[985px]:hidden">
                     <iframe
                         className="border-none w-[450px] h-[275px] z-[-1]"
                         src={svgSrc}
                     ></iframe>
                 </div>
 
-                <div className="absolute bottom-0 right-0 m-8 mb-[42px] flex gap-6">
+                <div className="absolute bottom-0 right-0 m-8 mb-[42px] flex gap-6 max-[985px]:relative max-[985px]:my-0 max-[985px]:mx-auto">
                     <button className="py-2 px-5 border-[3px] border-white rounded-lg text-xl font-medium hover:font-semibold hover:border-[#48d399] hover:text-[#48d399]"
                     onClick={() => checkFields()}
                     >

components/LandingPage.tsx

@@ -13,7 +13,7 @@ const LandingPage = () => {
                     Get Intervals
                 </h1>
 
-                <p className="text-xl">
+                <p className="text-xl text-center">
                     Unite Your Free Time: Find Common Slots Together!
                 </p>
 

components/ListIntervals.tsx

@@ -49,7 +49,7 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
 
                     <div
                         id="interval"
-                        className="flex justify-center items-center gap-[10px]"
+                        className="relative flex justify-center items-center gap-[10px] max-[500px]:mb-[40px]"
                     >
                         <input
                             type="time"
@@ -69,7 +69,9 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
                             className={`border-2 border-white text-black text-[24px] font-semibold rounded-lg py-[3px] px-4 m-1 focus:outline focus:outline-2 focus:outline-[#48d399] focus:border-[#48d399] focus:bg-transparent focus:text-white ${rajdhani.className}`}
                         />
 
-                        <div>
+                        <div
+                        className='flex max-[500px]:absolute max-[500px]:-bottom-full'
+                        >
                             <button
                                 className="w-[35px] h-[35px] rounded-[25px] ml-[20px]"
                                 onClick={() => addInterval()}
@@ -101,7 +103,7 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
                     </div>
 
                     {errorMsg != '' ? (
-                        <p className="font-medium text-[#db696d]">{errorMsg}</p>
+                        <p className="text-center font-medium text-[#db696d] max-[500px]:mt-[20px]">{errorMsg}</p>
                     ) : (
                         <></>
                     )}

components/Results.tsx

@@ -51,7 +51,7 @@ const Results = ({ roomCode }: RoomCode) => {
                 Members Info
             </p>
 
-            <div className="max-w[1200px] grid grid-flow-row grid-cols-3 justify-center items-start gap-[70px]">
+            <div className="max-w[1200px] grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center items-start gap-[70px]">
                 {membersData.map((values: MemberData, id: number) => (
                     <MemberInfo
                         name={values.name}