refactor(restaurants): wider page profile

frontend/src/routes/restaurants/Restaurants.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom";
-import Header from "../commons/Header.js";
 
 import '../../style/Restaurants.css'
+import NoImg from "../../assets/almocin_logo_red.png"
 
 const API_BASE = "http://localhost:3001"
 
@@ -40,7 +40,11 @@ const Restaurants = () => {
                 {restaurants.map(restaurant => (
                     <div className="restaurant-preview" key={restaurant.id}> 
                         <div id="img-and-description">
-                            <img id="restaurant-img-preview" src={`${API_BASE}/${restaurant.profileImage}`} />
+
+                            {restaurant.profileImage !== "Noneundefined" && <img id="restaurant-img-preview" src={`${API_BASE}/${restaurant.profileImage}`} />}
+
+                            {restaurant.profileImage == "Noneundefined" && <img id="restaurant-img-preview" src={NoImg} />}
+
                             <div id = "preview-description">
                                 <h2>{restaurant.name}</h2>
                                 <p>{restaurant.address.neighborhood} - {restaurant.address.city}</p>

frontend/src/style/Restaurants.css

@@ -24,12 +24,21 @@
     color: #F0E7DE;
 }
 
-/* .restaurant-profile{
+.restaurant-actions Link{
+  cursor: pointer;
+}
+
+#action{
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 100px;
-} */
+}
+
+#action img{
+  width: 30px;
+  height: 30px;
+  margin-right: 5px;
+}
 
 .restaurant-list h2{
     font-size: 20px;
@@ -149,8 +158,9 @@
 
 .restaurant-actions{
     margin: auto;
-    margin-bottom: 100px;
-    max-width: 900px;
+    margin-bottom: 80px;
+    margin-top: 20px;
+    width: 90%;
     display: flex;
     justify-content: space-between;
     text-decoration: none;
@@ -177,14 +187,16 @@
 
 .restaurant-details{
     margin-top: 50px;
-    margin-left: 50px;
     text-decoration: none;
-    max-width:800px;
+}
+
+.restaurant-details h2{
+  font-size: 18px;
 }
 
 #restaurant-cover{
   height: 250px;
-  width: 100vw;
+  width: 100%;
   background-color: #3793df;
 }
 
@@ -264,43 +276,65 @@
  }
 
  .map{
-  width: 600px;
   height: 300px;
+  width: 100%;
   border-radius: 15px;
   border: solid 3px ;
  }
 
 #add-and-map{
-  width: 600px;
   height: 400px;
   margin-top: 50px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
+#address-div{
+  width:100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
 #address{
   margin-bottom: 20px;
+  text-align: left;
 }
 
 #restaurant-name{
   font-size: 26px;
 }
 
 #img-and-data{
+  width: 90vw;
   display: flex;
+  justify-content: space-between;
 }
 
 #restaurant-main-data{
   display: flex;
   flex-direction: column;
   margin-left: 20px;
   justify-content: space-between;
+  align-items: flex-start;
   height: 100px;
 }
 
+#restaurant-profile-main-data{
+  display: flex;
+}
+
+#restaurant-profile{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width:100%;
+}
+
 #restaurant-site{
   color: #d63d1b;
+  margin-bottom: 30px;
 }
 
 .restaurant-atribute{
@@ -309,7 +343,6 @@
 }
 
 #restaurant-star-rating{
-  margin-left: 100px;
   display: flex;
   flex-direction: column;
 }

frontend/src/style/Stars.css

@@ -10,4 +10,10 @@
     cursor: pointer;
     font-size: 2rem;
     margin: 5px;
+  }
+
+  .little-star {
+    cursor: pointer;
+    font-size: 1.5rem;
+    margin: 5px;
   }