Frontend: Fix The Responsiveness Of Home Page

1. Adjust CSS to enhance homepage responsiveness for mobile views. 2. Update modal CSS for improved responsiveness across different screen sizes. Fixes #101
shivansh-bhatnagar18 · Jun 15, 2024 · f415791 · f415791
1 parent a1244c0
commit f415791
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
@@ -55,7 +55,7 @@ const Navbar: React.FC = () => {
                                 <Button
                                     text="Login"
                                     onClick={() => navigate('/login')}
-                                    buttonSize="w-56 h-11"
+                                    buttonSize="min-w-[140px] sm:w-56 h-11"
                                     className="border-4"
                                     rounded="rounded-2xl"
                                 />

diff --git a/frontend/src/library/modal.tsx b/frontend/src/library/modal.tsx
@@ -40,15 +40,15 @@ const Modal: React.FC<ModalProps> = ({ onClose }) => {
         <div
             ref={modalRef}
             onClick={closeModal}
-            className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex items-center justify-center"
+            className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto"
         >
-            <div className="bg-[rgb(222,209,209)] p-5 rounded-xl border-4 border-black shadow-md flex flex-col gap-10 w-1/3 h-1/3 items-center justify-center">
+            <div className="bg-[rgb(222,209,209)] p-5 rounded-xl border-4 border-black shadow-md flex flex-col gap-4 w-full max-w-lg items-center justify-center">
                 <h1 className="font-normal font-[Kavoon] text-[30px] leading-[30px] text-black text-center">
                     Join an Existing Game
                 </h1>
-                <div className="flex justify-center w-2/3">
+                <div className="flex justify-center w-full px-4">
                     <input
-                        className="font-normal font-[Kavoon] text-[20px] py-2 px-6 border-4 border-black rounded-3xl w-full h-12"
+                        className="font-normal font-[Kavoon] text-[14px] lg:text-[20px] py-2 px-4 lg:px-28 border-4 border-black rounded-3xl w-full h-12"
                         placeholder="Enter the game code"
                         style={{
                             backgroundColor: 'rgb(222, 209, 209)',

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Button from '../library/button';
 import Navbar from '../Navbar';
 import Modal from '../library/modal';
@@ -20,15 +20,22 @@ const Home: React.FC = () => {
         console.log('Join Game with code');
     };
 
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, []);
+
     return (
         <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
             <Navbar />
             <div className="flex flex-col items-center justify-center flex-grow">
-                <div className="w-[520px] h-[180px] sm:w-[600px] sm:h-[200px] md:w-[720px] md:h-[235px] lg:w-[900px] lg:h-[300px] overflow-hidden mt-4 mb-5">
+                <div className="w-full max-w-[900px] h-[300px] md:h-[270px] lg:h-[240px] overflow-hidden mt-4 mb-5">
                     <img
                         src="/unologo.png"
                         alt="UNO Logo"
-                        className="w-full h-full object-cover"
+                        className="w-full h-full object-contain"
                     />
                 </div>
                 <Button