From c68cd608cdd278874539977fc28c738e7ca7eb8a Mon Sep 17 00:00:00 2001
From: Prashant <prashantyadav09783@gmail.com>
Date: Sun, 17 Mar 2024 13:02:51 +0530
Subject: [PATCH 1/2] responsive navbar

---
 bet_app/src/components/Nav.jsx | 18 +++++++++---------
 bet_app/src/pages/Home.jsx     |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/bet_app/src/components/Nav.jsx b/bet_app/src/components/Nav.jsx
index 520290d..0e1a4bb 100644
--- a/bet_app/src/components/Nav.jsx
+++ b/bet_app/src/components/Nav.jsx
@@ -13,25 +13,25 @@ const Nav = ({ username }) => {
     navigate("/createBet");
   };
   return (
-    <div className=" w-full py-4  text-black flex flex-col px-3">
-      <div className="flex w-full justify-between  items-center">
-        <span className="flex  flex-col items-start">
+    <div className=" w-full py-4  text-black flex flex-col px-3 gap-2">
+      <div className="flex w-full justify-between  items-center gap-2">
+        <span className="flex flex-col items-start">
           <button
-            className=" font-bold  mr-2 "
+            className="font-bold  text-sm md:text-base mr-2 "
             onClick={() => {
               navigate("/home");
             }}
           >
             Home
           </button>
-          <span className=" text-md font-bold">
+          <span className="  text-sm md:text-base font-bold capitalize">
             Welcome,{username}
           </span>
         </span>
 
-        <span>
+        <div className="flex flex-wrap justify-end items-end gap-2">
           <button
-            className="bg-purple-800 text-white  text-sm px-1 py-1 font-bold rounded-md  mx-2"
+            className="bg-purple-800 text-white  text-sm md:text-base px-1 py-1 font-bold rounded-md"
             onClick={() => {
               CreateBet();
             }}
@@ -39,14 +39,14 @@ const Nav = ({ username }) => {
             Create Bet
           </button>
           <button
-            className="bg-red-600 text-white text-sm px-1  py-1 font-bold rounded-md"
+            className="bg-red-600 text-white  text-sm md:text-base px-1  py-1 font-bold rounded-md"
             onClick={() => {
               logout();
             }}
           >
             Logout
           </button>
-        </span>
+        </div>
       </div>
     </div>
   );
diff --git a/bet_app/src/pages/Home.jsx b/bet_app/src/pages/Home.jsx
index 27e4245..0084bd4 100644
--- a/bet_app/src/pages/Home.jsx
+++ b/bet_app/src/pages/Home.jsx
@@ -44,7 +44,7 @@ const Home = () => {
   return (
     <div className="w-screen h-screen flex bg-blue-100 flex-col">
       <Nav username={username} />
-      <div className="py-3 flex w-full justify-around my-2 text-black mt-2 border-solid border-b-2 border-slate-600">
+      <div className="py-3 flex gap-2 flex-wrap md:flex-row w-full justify-around my-2 text-black mt-2 border-solid border-b-2 border-slate-600">
         <span className="font-semibold  cursor-pointer relative liner">
           <NavLink
             className="nav_link"

From 58193110204ebe9821473dcfd5f2d6c5c3a32aad Mon Sep 17 00:00:00 2001
From: Prashant <prashantyadav09783@gmail.com>
Date: Sun, 17 Mar 2024 13:42:06 +0530
Subject: [PATCH 2/2] responsive cards

---
 bet_app/src/components/DetailsCard.jsx | 8 ++++----
 bet_app/src/components/List.jsx        | 6 ++++--
 bet_app/src/pages/Home.jsx             | 2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/bet_app/src/components/DetailsCard.jsx b/bet_app/src/components/DetailsCard.jsx
index 056c93a..138ddb6 100644
--- a/bet_app/src/components/DetailsCard.jsx
+++ b/bet_app/src/components/DetailsCard.jsx
@@ -56,21 +56,21 @@ const DetailsCard = ({
       <div className="flex my-2">
         <span className="flex flex-col mx-3  text-black">
           <span className="text-lg font-semibold">Bet Initiator</span>
-          <span className="text-lg font-light">{sender}</span>
+          <span className="text-lg font-light capitalize">{sender}</span>
         </span>
         <span className="flex flex-col mx-3 text-black">
           <span className="text-lg font-semibold">Response</span>
-          <span className="text-lg font-light">{senderResp}</span>
+          <span className="text-lg font-light capitalize">{senderResp}</span>
         </span>
       </div>
       <div className="flex my-2">
         <span className="flex flex-col mx-3 text-black">
           <span className="text-lg font-semibold">Bet Receiver</span>
-          <span className="text-lg font-light">{receiver}</span>
+          <span className="text-lg font-light capitalize">{receiver}</span>
         </span>
         <span className="flex flex-col mx-3 text-black">
           <span className="text-lg font-semibold">Response</span>
-          <span className="text-lg font-light">{receiverResp}</span>
+          <span className="text-lg font-light capitalize">{receiverResp}</span>
         </span>
       </div>
 
diff --git a/bet_app/src/components/List.jsx b/bet_app/src/components/List.jsx
index 7448d75..6a8c503 100644
--- a/bet_app/src/components/List.jsx
+++ b/bet_app/src/components/List.jsx
@@ -22,7 +22,7 @@ const List = ({ BetList, setBetList }) => {
 
  
   return (
-    <div className="w-[96%] pb-4 h-full flex flex-col scroller">
+    <div className="w-full flex flex-wrap p-12 mt-2 box-content gap-x-6">
       {BetList?.map((bet, index) => {
         const {
           senderName,
@@ -56,7 +56,8 @@ const List = ({ BetList, setBetList }) => {
         }
 
         return (
-          <DetailsCard
+          <div key={index} className="lg:w-[30%] md:w-[45%] w-full flex box-content ">
+            <DetailsCard
             key={index}
             betid={bet._id}
             sender={senderName}
@@ -80,6 +81,7 @@ const List = ({ BetList, setBetList }) => {
             sendResponse={SendRespone}
             setBetList={setBetList}
           />
+          </div>
         );
       })}
     </div>
diff --git a/bet_app/src/pages/Home.jsx b/bet_app/src/pages/Home.jsx
index 0084bd4..81f9300 100644
--- a/bet_app/src/pages/Home.jsx
+++ b/bet_app/src/pages/Home.jsx
@@ -91,7 +91,7 @@ const Home = () => {
           </NavLink>
         </span>
       </div>
-      <div className="w-full h-full overflow-y-scroll scroller scroll-smooth  flex justify-center items-center">
+      <div className="w-full h-full overflow-y-scroll scroller scroll-smooth flex-wrap flex justify-center items-center">
         <List BetList={BetList} setBetList={setBetList} />
       </div>
     </div>