Recent updates!

react-app/src/Components/Navbar/CustomerNavbar.jsx

@@ -11,18 +11,16 @@ const CustomerNavbar = () => {
 
   return shouldRenderNavbar ? (
     <div className='navbar'>
-      <div className='nav-logo'>
-        <img src={logo} alt="" className="logo-image"/>
-      </div>
-      <div className="buttons">
-        <Link to="/c"> <button>Search</button> </Link>
-        <Link to="/c/profile"> <button>My Profile</button> </Link>
+      <img src={logo} alt="logo" className='logo'/>
+      <div className="nav-buttons">
+        <Link to="/c"> <button class="nav-button">Search</button> </Link>
+        <Link to="/c/profile"> <button class="nav-button">My Profile</button> </Link>
         <Link to="/c/cart">
-        <button>
+        <button class="nav-button">
           <img src={cart_icon} alt="Cart" className="cart-image"/>
         </button>
         </Link>
-        <Link to="/"> <button>Home</button> </Link>
+        <Link to="/"> <button class="nav-button">Home</button> </Link>
       </div>
     </div>
   ) : null

react-app/src/Components/Navbar/Navbar.css

@@ -11,45 +11,46 @@
   align-items: center;
   background-color: rgb(255, 255, 255);
   color: #fff;
-  padding: 10px 20px;
-  border-bottom: 2px solid #ffffff; /* Add a border at the bottom of the navbar */
+  padding: 4 vh;
   z-index: 1000;
 }
 
 /* Logo styles */
 .logo {
-  margin-left: 10px; /* Add some margin for separation from the buttons */
-}
-
-.logo-image {
-  max-height: 40px; /* Adjust the maximum height to make the image smaller */
+  display: block;
+  margin-left: 2%;
+  width: 30%;
 }
 
 .cart-image {
-  max-height: 30px; /* Adjust the maximum height to make the image smaller */
+  height: 30px; /* Adjust the maximum height to make the image smaller */
 }
 
 /* Button styles */
-.buttons {
+.nav-buttons {
   display: flex;
-  gap: 5px;
-  margin-right: 40px;
+  gap: 3%;
+  margin-left: 2%;
+  margin-right: 4%;
+  align-items: stretch;
+  height: 70%;
 }
 
-.buttons button {
-  font-size: 16px;
-  margin-right: 10px;
-  padding: 10px 20px; /* Increase padding to make them rectangular */
+.nav-button {
+  text-align: center;
+  height: 100%;
+  font-size: 10 vh;
+  padding: 3vw 2vw;
+  align-items: center;
   border: 2px solid rgb(255, 0, 0);
   border-radius: 15px; /* Add rounded corners */
   background-color: rgb(255, 255, 255); /* Set the initial background color */
   color: rgb(255, 0, 0);
   cursor: pointer;
   transition: background-color 0.3s; /* Add a transition for the hover effect */
-  height: 60px;
 }
 
-.buttons button:hover {
+.nav-button:hover {
   background-color: #FF5733; /* Change background color on hover to red */
   color: rgb(255, 255, 255);
 }

react-app/src/Pages/Homepage.css

@@ -11,25 +11,25 @@ body {
   align-items: center;
   justify-content: center;
   height: 100vh; /* Set the container height to the full viewport height */
+  width: 100vw; /* Set the container height to the full viewport height */
 }
 
 .homepage-buttons {
   display: flex;
   flex-direction: column; /* Stack buttons vertically */
   align-items: center;
-  gap: 20px; /* Add space between buttons */
+  gap: 5vh; /* Add space between buttons */
 }
 
 .homepage-buttons button {
-  font-size: 36px;
+  font-size: 10vw;
   margin-right: 10px;
   padding: 10px 20px; /* Increase padding to make them rectangular */
   border: 5px solid rgb(255, 224, 175);
   border-radius: 15px; /* Add rounded corners */
   background-color: rgb(255, 248, 233); /* Set the initial background color */
   color: rgb(0, 0, 0);
   cursor: pointer;
-  transition: background-color 0.3s; /* Add a transition for the hover effect */
-  height: 160px;
-  width: 400px;
+  height: 20vh;
+  width: 80vw;
 }

react-app/src/Pages/Search.css

@@ -1,9 +1,8 @@
 .search-container {
-  margin-top: 140px;
-  margin-left: 50px;
+  margin-top: 20vh;
+  margin-left: 5vw;
   text-align: center;
-  padding: 20px;
-  font-size: 32px;
+  font-size: 7vw;
 }
 
 body {
@@ -12,13 +11,12 @@ body {
 
 /* Search bar */
 input[type="text"] {
-  width: 100%;
-  max-width: 400px;
+  width: 80vw;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  font-size: 16px;
-  margin-bottom: 20px;
+  font-size: 4vw;
+  /* margin-bottom: 20px; */
 }
 
 /* Restaurant list */
@@ -30,15 +28,15 @@ input[type="text"] {
 
 /* Restaurant card */
 .restaurant-card {
-  margin-left: 50px;
+  margin-left: 5vw;
+  margin-top: 5vw;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   background-color: #fff;
   padding: 20px;
-  max-width: 300px;
-  width: 100%;
+  width: 30vw;
 }
 
 /* Restaurant image */
@@ -47,32 +45,32 @@ input[type="text"] {
   background-size: cover;
   background-position: center;
   width: 100%;
-  height: 150px;
+  height: 10vh;
   border-radius: 5px;
   margin-bottom: 10px;
 }
 
 /* Restaurant name */
 h2 {
-  font-size: 20px;
-  margin: 10px 0;
+  font-size: 4vw;
+  margin: 3 vh;
 }
 
 /* Order button */
-button {
-  font-size: 16px;
-  margin-right: 10px;
-  padding: 10px 20px; /* Increase padding to make them rectangular */
+.order-button {
+  font-size: 4vw;
+  align-items: center;
+  padding: 2vw 5vw; /* Increase padding to make them rectangular */
   border: 2px solid rgb(255, 0, 0);
   border-radius: 15px; /* Add rounded corners */
   background-color: rgb(255, 255, 255); /* Set the initial background color */
   color: rgb(255, 0, 0);
   cursor: pointer;
   transition: background-color 0.3s; /* Add a transition for the hover effect */
-  height: 40px;
+  height: 3 vh;
 }
 
-button:hover {
+.order-button:hover {
   background-color: #FF5733; /* Change background color on hover to red */
   color: rgb(255, 255, 255);
 }

react-app/src/Pages/Search.jsx

@@ -28,7 +28,7 @@ const Search = () => {
               ></div>
               <h2>{restaurant.name}</h2>
               <Link to="/c/bobahouse">
-              <button>Order</button>
+              <button class="order-button">Order</button>
               </Link>
             </div>
           ))}