Merge pull request #39 from coderKrysio/dev-1

updated responsiveness

Author: coderKrysio

components/ListIntervals.tsx

@@ -38,7 +38,7 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
 
     return (
         <>
-            {intervals.map((currentValue: number[], index: number) => (
+            {intervals.map((_currentValue: number[], index: number) => (
                 <div
                     className="w-full flex flex-col justify-center items-center mb-4"
                     key={index}
@@ -70,10 +70,10 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
                         />
 
                         <div
-                        className='flex max-[500px]:absolute max-[500px]:-bottom-full'
+                        className='flex max-[500px]:absolute gap-[15px] max-[500px]:-bottom-full'
                         >
                             <button
-                                className="w-[35px] h-[35px] rounded-[25px] ml-[20px]"
+                                className="w-[35px] h-[35px] rounded-[25px]"
                                 onClick={() => addInterval()}
                             >
                                 <Image
@@ -84,9 +84,9 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
                                 />
                             </button>
 
-                            {intervals.length > 1 ? (
+                            {intervals.length > 1 && (
                                 <button
-                                    className="w-[35px] h-[35px] rounded-[25px] ml-[15px]"
+                                    className="w-[35px] h-[35px] rounded-[25px]"
                                     onClick={() => removeInterval()}
                                 >
                                     <Image
@@ -96,8 +96,6 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
                                         alt="remove"
                                     />
                                 </button>
-                            ) : (
-                                <button className="w-[35px] h-[35px] rounded-[25px] ml-[15px] z-[-1]"></button>
                             )}
                         </div>
                     </div>

components/Results.tsx

@@ -21,7 +21,7 @@ const Results = ({ roomCode }: RoomCode) => {
             <Navbar />
 
             <div
-            className='w-full px-10 flex justify-between items-center my-[30px]'
+            className='w-full px-10 flex justify-between items-center my-[30px] max-[500px]:flex-col max-[500px]:gap-[30px]'
             >
                 <Link
                 className='text-2xl font-medium tracking-wide py-2 px-5 border-2 border-white rounded-lg outline outlint-2 outline-transparent hover:outline-white'
@@ -33,24 +33,21 @@ const Results = ({ roomCode }: RoomCode) => {
                 >Timer - [ 02:00:00 ]</p>
             </div>
 
-            <h2 className="text-5xl font-semibold tracking-wide">
+            <h2 className="text-5xl text-center font-semibold tracking-wide m-2">
                 Union Free Interval
             </h2>
 
-            <p className="text-2xl font-medium tracking-wide my-3 text-[#d4d4d4]">
+            <p className="text-2xl text-center font-medium tracking-wide mx-2 my-3 text-[#d4d4d4]">
                 Room Code: {roomCode}
             </p>
 
             <p className="text-3xl text-[#48d399] my-2">
                 14:00 - 15:00 <br /> 18:00 - 23:00
             </p>
 
+            <div className='px-4 flex items-center justify-start w-full overflow-auto'>
             <Timeline />
-
-            <button
-            className='min-[1470px]:hidden text-2xl tracking-wide font-medium py-2 px-5 border-2 border-white rounded-lg outline outline-2 outline-transparent hover:outline-white'
-            
-            >Show Timeline</button>
+            </div>
 
             <p className="text-3xl text-[#d4d4d4] font-medium pb-3 my-4">
                 Members Info

components/Timeline.tsx

@@ -36,7 +36,7 @@ const Timeline = () => {
     }
 
     return (
-        <div className="my-[50px] flex p-0 text-center max-[1470px]:scale-[0.253]">
+        <div className="mx-auto my-[40px] flex text-center px-2">
             {timeline.map((time: number, index: number) => (
                 <div
                     key={index}