Merge pull request #38 from future4code/dia5-1.0renata

styledFeed&Card
future4code · Dec 11, 2020 · 151b71b · 151b71b
2 parents 181a72d + 35a9671
commit 151b71b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 25 deletions.
diff --git a/src/Components/Home/FeedCard.js b/src/Components/Home/FeedCard.js
@@ -7,6 +7,27 @@ import search from "../../Assets/search.svg";
 import { BaseUrl } from "../../Constants/BaseUrl";
 import { useRequestData } from "../../Hooks/UseRequestData";
 import { goToRestaurantsDetailsPage } from '../../Routes/Cordinator'
+import styled from 'styled-components'
+
+const Rectangle =styled.div`
+display: flex;
+flex-direction: column;
+align-items: center;
+border-radius: 8px;
+border: solid 1px #b8b8b8;
+margin:10px;
+p{
+  padding:10px;
+  text-align:justify;
+}
+`  
+const Img=styled.img`
+width:130px;
+height:120px;
+`
+const AreaInfo=styled.div`
+display:flex;
+`
 
 export default function FeedCard(props) {
   const restaurants = useRequestData(`${BaseUrl}/restaurants`, []);
@@ -17,14 +38,17 @@ export default function FeedCard(props) {
   console.log (props.id)
 
   return (
-
-    <S.DivisaoPrincipal onClick={() => goToRestaurantsDetailsPage(history, props.id)}>
-        {/* <Header title={"Rappi4"}/>
-        <S.RectangleFeed><img src = {search}/></S.RectangleFeed> */}
-    <S.DivText> <S.Text>{props.category} </S.Text> </S.DivText>
-    <S.ScreenShot src = {props.logoUrl}/>
-    <S.Description>{props.description}</S.Description>
-    <S.Rest>{props.name}</S.Rest> <S.Time>{props.deliveryTime} - min</S.Time> <S.DivTextDeliveryFee><S.deliveryFee> Frete R$ {props.shipping}</S.deliveryFee> </S.DivTextDeliveryFee>
-</S.DivisaoPrincipal>
+
+    <Rectangle onClick={() => goToRestaurantsDetailsPage(history, props.id)}>
+    <p><b>{props.category} </b></p> 
+    <Img src = {props.logoUrl}/>
+    <p>{props.description}</p>
+    <AreaInfo>
+    <p><b>{props.name}</b></p> 
+    <p>{props.deliveryTime} - min</p> 
+    <p> Frete R$ {props.shipping}</p> 
+    </AreaInfo>
+</Rectangle>
+
   );
 }
diff --git a/src/Components/RestaurantCard/RestaurantCard.js b/src/Components/RestaurantCard/RestaurantCard.js
@@ -10,7 +10,7 @@ function RestaurantCard(props) {
 
     return (
 
-        <S.Rectangle>
+        <div>
         <S.AreaImg>
         <S.ImgBurguer src = {props.Photo} />
         </S.AreaImg>
@@ -22,7 +22,7 @@ function RestaurantCard(props) {
         </S.AreaItensLanche>
 
 
-        </S.Rectangle>
+        </div>
     )  
 }
-export default Regit adstaurantCard
+export default RestaurantCard
diff --git a/src/Screens/Home/FeedPage.js b/src/Screens/Home/FeedPage.js
@@ -4,17 +4,26 @@ import { useRequestData } from "../../Hooks/UseRequestData";
 import FeedCard from "../../Components/Home/FeedCard";
 import { goToRestaurantsDetailsPage } from '../../Routes/Cordinator'
 import { useHistory } from 'react-router-dom'
+import * as S from '../../Screens/ScreenStyled'
+
+import Header from '../../Components/Header/Header'
+import { goToLoginPage } from '../../Routes/Cordinator'
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 
 export default function FeedPage(props) {
   const restaurants = useRequestData(`${BaseUrl}/restaurants`, []);
   const history = useHistory()
   console.log (props.id)
   return (
-    <div>
-
+    <S.Container>
+         <Header  />
+         <ChevronLeftIcon onClick={()=>goToLoginPage(history)}/>
+
       {restaurants.map((restaurant) => {
         return (
+
           <FeedCard
+
             restaurant = {restaurant}
             key={restaurant.id}
             id={restaurant.id}
@@ -24,9 +33,11 @@ export default function FeedPage(props) {
             description={restaurant.description}
             deliveryTime={restaurant.deliveryTime}
             shipping={restaurant.shipping}
-          />
+                     />
+
         );
       })}
-    </div>
+
+    </S.Container>
   );
 }
diff --git a/src/Screens/Restaurants/RestaurantPage.js b/src/Screens/Restaurants/RestaurantPage.js
@@ -48,7 +48,9 @@ function Restaurant(props) {
     <Header title={"Restaurante"}/>
     <S.RestaurantDetails>
         {restaurantDetails && restaurantDetails.restaurant && restaurantDetails.map((Item)=>{})}
-    <S.image> <img img src = {restaurantDetails.logoUrl}/> </S.image >
+    <S.AreaLogoRest>
+    <S.image src = {restaurantDetails.logoUrl}/> 
+    </S.AreaLogoRest>
     <S.RestaurantTitle> {restaurantDetails.name} </S.RestaurantTitle>
     <S.Burger> {restaurantDetails.category} </S.Burger>
     <S.Areatempo>

diff --git a/src/Screens/ScreenStyled.js b/src/Screens/ScreenStyled.js
@@ -184,15 +184,16 @@ export const title = styled.div`
   margin: 20px 92px 0 54px;
   padding: 13px 45.5px 12px;
 `;
+export const AreaLogoRest = styled.div`
+display:flex;
+align-items:center;
+margin-left:105px;
+`;
+
+export const image = styled.img`
+  width: 150px;
+  height: 150px;
 
-export const image = styled.div`
-  width: 328px;
-  height: 120px;
-  margin: 17px 16px 12px;
-  object-fit: contain;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 `;
 export const RestaurantTitle = styled.div`
   width: 328px;