From df42ec8f2abb9844a83acd69d84f90c8491032f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Victor=20da=20Silva?= Date: Sat, 20 Nov 2021 17:06:24 -0300 Subject: [PATCH 1/2] refactor(detail-restaurant): refactors the entire restaurant detail screen creates a new header type and also makes all styling responsive --- src/components/SecondaryHeader/index.tsx | 4 +- .../components/ActionButton/index.tsx | 23 ++- .../components/ActionButton/styles.ts | 15 +- .../components/AvaliationCard/index.tsx | 66 -------- .../components/AvaliationCard/styles.ts | 60 -------- .../components/EvaluationCard/index.tsx | 63 ++++++++ .../components/EvaluationCard/styles.ts | 77 ++++++++++ .../components/TimeSession/index.tsx | 22 +-- .../components/TimeSession/styles.ts | 45 ++++-- src/screens/DetailRestaurant/index.tsx | 143 ++++++++++-------- src/screens/DetailRestaurant/styles.ts | 70 ++++++--- 11 files changed, 329 insertions(+), 259 deletions(-) delete mode 100644 src/screens/DetailRestaurant/components/AvaliationCard/index.tsx delete mode 100644 src/screens/DetailRestaurant/components/AvaliationCard/styles.ts create mode 100644 src/screens/DetailRestaurant/components/EvaluationCard/index.tsx create mode 100644 src/screens/DetailRestaurant/components/EvaluationCard/styles.ts diff --git a/src/components/SecondaryHeader/index.tsx b/src/components/SecondaryHeader/index.tsx index 6d25b79..b00d3fb 100644 --- a/src/components/SecondaryHeader/index.tsx +++ b/src/components/SecondaryHeader/index.tsx @@ -16,10 +16,10 @@ const SecondaryHeader: React.FC = ({ title }) => { { - navigation.dispatch(DrawerActions.openDrawer); + navigation.goBack(); }} > - + {title} diff --git a/src/screens/DetailRestaurant/components/ActionButton/index.tsx b/src/screens/DetailRestaurant/components/ActionButton/index.tsx index 52feebb..8c7c5af 100644 --- a/src/screens/DetailRestaurant/components/ActionButton/index.tsx +++ b/src/screens/DetailRestaurant/components/ActionButton/index.tsx @@ -1,12 +1,9 @@ import React, { ReactElement } from 'react'; -import { - SafeAreaView, - TouchableOpacity, - TouchableOpacityProps, -} from 'react-native'; - +import { TouchableOpacity, TouchableOpacityProps } from 'react-native'; import FontAwesome from '@expo/vector-icons/FontAwesome'; +import normalize from '../../../../utils/normalizeSize'; + import { ContainerBox, Text } from './styles'; interface IProps extends TouchableOpacityProps { @@ -24,13 +21,11 @@ export function ActionButton({ ...rest }: IProps): ReactElement { return ( - - - - - {text} - - - + + + + {text} + + ); } diff --git a/src/screens/DetailRestaurant/components/ActionButton/styles.ts b/src/screens/DetailRestaurant/components/ActionButton/styles.ts index 874d32a..9d133e1 100644 --- a/src/screens/DetailRestaurant/components/ActionButton/styles.ts +++ b/src/screens/DetailRestaurant/components/ActionButton/styles.ts @@ -1,4 +1,7 @@ import styled, { css } from 'styled-components/native'; +import fonts from '../../../../styles/fonts'; +import normalize from '../../../../utils/normalizeSize'; +import pixelToDP from '../../../../utils/pixelToDP'; interface ContainerProps { bgc: string; @@ -14,15 +17,17 @@ export const ContainerBox = styled.View` border-color: ${props.borderColor}; `} + width: ${pixelToDP.width(80)}px; + height: ${pixelToDP.height(80)}px; + align-items: center; justify-content: center; - width: 80px; - height: 70px; - border-radius: 16px; + + border-radius: ${normalize(16)}px; `; export const Text = styled.Text` - font-size: 12px; - font-family: 'Roboto_500Medium'; + font-size: ${normalize(12)}px; + font-family: ${fonts.robotoMedium}; color: #fff; `; diff --git a/src/screens/DetailRestaurant/components/AvaliationCard/index.tsx b/src/screens/DetailRestaurant/components/AvaliationCard/index.tsx deleted file mode 100644 index 985622f..0000000 --- a/src/screens/DetailRestaurant/components/AvaliationCard/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { ReactElement } from 'react'; -import { SafeAreaView, View, Text, TouchableOpacity } from 'react-native'; - -import MaterialIcons from '@expo/vector-icons/MaterialIcons'; - -import { - ContainerCard, - BoxRating, - Rating, - RatingText, - AvalaiationContainer, - AvaliationText, - AvaliationNow, - FooterContainer, -} from './styles'; - -interface IProps { - numberOfStars: number; - totalAvaliations: number; -} - -export function AvaliationCard({ - numberOfStars, - totalAvaliations, -}: IProps): ReactElement { - return ( - - - - - {numberOfStars} - - - - 4.5 de 5 estrelas - - {`(${totalAvaliations} Avaliações)`} - - - - - - - Avalie agora! - • - - - - - - - - - - - ); -} diff --git a/src/screens/DetailRestaurant/components/AvaliationCard/styles.ts b/src/screens/DetailRestaurant/components/AvaliationCard/styles.ts deleted file mode 100644 index e4d8f3f..0000000 --- a/src/screens/DetailRestaurant/components/AvaliationCard/styles.ts +++ /dev/null @@ -1,60 +0,0 @@ -import styled from 'styled-components/native'; - -export const ContainerCard = styled.View` - margin-top: 16px; - background-color: #2196f3; - width: 315px; - height: 138px; - border-radius: 14px; -`; - -export const BoxRating = styled.View` - align-items: center; - justify-content: center; - flex-direction: row; - - background-color: #2ea3f7; - border: #ffffff 1px; - width: 89px; - height: 50px; - border-radius: 14px; - left: 16px; - top: 16px; -`; - -export const Rating = styled.Text` - font-family: 'Inter_600SemiBold'; - font-size: 28px; - color: #ffff; - margin-right: 4px; -`; - -export const AvalaiationContainer = styled.View` - top: 19px; - margin-left: 32px; -`; - -export const RatingText = styled.Text` - font-family: 'Roboto_500Medium'; - font-size: 18px; - color: #d9eaff; -`; - -export const AvaliationText = styled.Text` - font-family: 'Roboto_400Regular'; - font-size: 14px; - color: #a5d4ef; -`; - -export const FooterContainer = styled.View` - top: 15%; - left: 16px; - flex-direction: row; -`; - -export const AvaliationNow = styled.Text` - font-family: 'Roboto_500Medium'; - font-size: 14px; - color: #d4f5ff; - margin-right: 9px; -`; diff --git a/src/screens/DetailRestaurant/components/EvaluationCard/index.tsx b/src/screens/DetailRestaurant/components/EvaluationCard/index.tsx new file mode 100644 index 0000000..ad61ec1 --- /dev/null +++ b/src/screens/DetailRestaurant/components/EvaluationCard/index.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import MaterialIcons from '@expo/vector-icons/MaterialIcons'; + +import { Text } from 'react-native'; +import normalize from '../../../../utils/normalizeSize'; + +import { + ContainerCard, + BoxRating, + Rating, + RatingText, + EvaluationContainer, + LinkToEvaluations, + EvaluationNow, + Footer, + Header, + Divider, +} from './styles'; + +interface IProps { + numberOfStars: number; + totalEvaluations: number; +} + +const EvaluationCard: React.FC = ({ + numberOfStars, + totalEvaluations, +}) => { + return ( + +
+ + {numberOfStars} + + + + + 4.5 de 5 estrelas + + + {`(${totalEvaluations} Avaliações)`} + + +
+ + + +
+ Avalie agora! + + • + + + + + + +
+ + ); +}; + +export default EvaluationCard; diff --git a/src/screens/DetailRestaurant/components/EvaluationCard/styles.ts b/src/screens/DetailRestaurant/components/EvaluationCard/styles.ts new file mode 100644 index 0000000..4dd5490 --- /dev/null +++ b/src/screens/DetailRestaurant/components/EvaluationCard/styles.ts @@ -0,0 +1,77 @@ +import styled from 'styled-components/native'; +import colors from '../../../../styles/colors'; +import { sizes } from '../../../../utils/predefinedSizes'; +import fonts from '../../../../styles/fonts'; +import normalize from '../../../../utils/normalizeSize'; +import pixelToDP from '../../../../utils/pixelToDP'; + +export const ContainerCard = styled.View` + width: 100%; + padding: ${sizes.height.dp16}px; + + background-color: #2196f3; + border-radius: ${normalize(8)}px; +`; + +export const Header = styled.View` + flex-direction: row; + align-items: center; +`; + +export const BoxRating = styled.View` + padding: ${normalize(8)}px; + + align-items: center; + justify-content: center; + flex-direction: row; + + background-color: #2ea3f7; + border: ${colors.light.primary50} 1px; + border-radius: ${normalize(8)}px; +`; + +export const Rating = styled.Text` + margin-right: ${sizes.width.dp4}px; + + font-family: ${fonts.robotoBold}; + font-size: ${normalize(28)}px; + color: #ffff; +`; + +export const EvaluationContainer = styled.View` + flex: 1; + height: 100%; + margin-left: ${sizes.width.dp12}px; +`; + +export const RatingText = styled.Text` + font-family: ${fonts.robotoMedium}; + font-size: ${normalize(18)}px; + color: ${colors.light.primary50}; +`; + +export const LinkToEvaluations = styled.Text` + font-family: ${fonts.robotoRegular}; + font-size: ${normalize(14)}px; + color: #a5d4ef; + text-decoration: underline; + margin-top: ${sizes.height.dp4}px; +`; + +export const Divider = styled.View` + width: 100%; + height: 1px; + margin: ${sizes.height.dp16}px 0; + background-color: #f0f0f0; +`; + +export const Footer = styled.View` + flex-direction: row; + align-items: center; +`; + +export const EvaluationNow = styled.Text` + font-family: ${fonts.robotoMedium}; + font-size: ${normalize(16)}px; + color: #d4f5ff; +`; diff --git a/src/screens/DetailRestaurant/components/TimeSession/index.tsx b/src/screens/DetailRestaurant/components/TimeSession/index.tsx index 9703658..42e8e82 100644 --- a/src/screens/DetailRestaurant/components/TimeSession/index.tsx +++ b/src/screens/DetailRestaurant/components/TimeSession/index.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, useEffect, useState } from 'react'; -import { SafeAreaView, TouchableOpacity } from 'react-native'; +import { TouchableOpacity } from 'react-native'; import { ContainerSession, @@ -9,6 +9,7 @@ import { Divider, Events, ClockIcon, + Infos, } from './styles'; interface IProps { @@ -31,9 +32,10 @@ export function TimeSession({ openTime, closeTime }: IProps): ReactElement { }, [hours, openTime, closeTime]); return ( - - + + + {isOpen ? 'Aberto Agora!' : 'Fechado Agora!'} @@ -44,11 +46,13 @@ export function TimeSession({ openTime, closeTime }: IProps): ReactElement { : 'Ver horários'} - - - Eventos - - - + + + + + + Eventos + + ); } diff --git a/src/screens/DetailRestaurant/components/TimeSession/styles.ts b/src/screens/DetailRestaurant/components/TimeSession/styles.ts index d77cc40..b10146d 100644 --- a/src/screens/DetailRestaurant/components/TimeSession/styles.ts +++ b/src/screens/DetailRestaurant/components/TimeSession/styles.ts @@ -1,19 +1,30 @@ import styled, { css } from 'styled-components/native'; import Feather from '@expo/vector-icons/Feather'; +import colors from '../../../../styles/colors'; +import { sizes } from '../../../../utils/predefinedSizes'; +import fonts from '../../../../styles/fonts'; +import normalize from '../../../../utils/normalizeSize'; interface TimeSessionProps { isOpen: boolean; } export const ContainerSession = styled.View` - margin-top: 21px; + width: 100%; + + flex-direction: row; + justify-content: space-between; align-items: center; +`; + +export const Infos = styled.View` + flex: 1; flex-direction: row; - margin-bottom: 16px; + align-items: center; `; export const ClockIcon = styled(Feather)` - font-size: 34px; + font-size: ${normalize(34)}px; color: #e8265e; ${props => @@ -24,13 +35,13 @@ export const ClockIcon = styled(Feather)` `; export const TimeInfo = styled.View` - left: 8px; + margin-left: ${sizes.height.dp8}px; `; export const IsOpenNow = styled.Text` + font-size: ${normalize(18)}px; + font-family: ${fonts.robotoRegular}; color: #e8265e; - font-size: 18px; - font-family: 'Roboto_400Regular'; ${props => props.isOpen && @@ -40,10 +51,10 @@ export const IsOpenNow = styled.Text` `; export const OpenHours = styled.Text` - color: #e87999; - font-size: 14px; - font-family: 'Roboto_400Regular'; + font-size: ${normalize(14)}px; + font-family: ${fonts.robotoRegular}; text-decoration: underline; + color: #e87999; ${props => props.isOpen && @@ -54,15 +65,17 @@ export const OpenHours = styled.Text` export const Divider = styled.View` width: 1px; - height: 38px; - margin-left: 22px; - background-color: #e8e8e8; + height: ${sizes.height.dp40}px; + margin: ${sizes.height.dp8}px ${sizes.width.dp16}px; + background-color: ${colors.light.gray200}; `; export const Events = styled.Text` - color: #878787; - font-size: 18px; - margin-left: 32px; - font-family: 'Roboto_400Regular'; + padding: ${sizes.height.dp8}px; + + font-size: ${normalize(18)}px; + font-family: ${fonts.robotoRegular}; text-decoration: underline; + + color: ${colors.light.gray500}; `; diff --git a/src/screens/DetailRestaurant/index.tsx b/src/screens/DetailRestaurant/index.tsx index e132808..e2f23f1 100644 --- a/src/screens/DetailRestaurant/index.tsx +++ b/src/screens/DetailRestaurant/index.tsx @@ -1,8 +1,15 @@ -import React, { ReactElement } from 'react'; -import { ScrollView, View, Text, Linking, Platform } from 'react-native'; - +import React from 'react'; +import { Text, Linking, Platform } from 'react-native'; import Feather from '@expo/vector-icons/Feather'; +import normalize from '../../utils/normalizeSize'; + +import SecondaryHeader from '../../components/SecondaryHeader'; +import EvaluationCard from './components/EvaluationCard'; +import { TimeSession } from './components/TimeSession'; +import Button from '../../components/Button'; +import { ActionButton } from './components/ActionButton'; + import { BackgroundPhoto, RestaurantName, @@ -13,14 +20,10 @@ import { Divider, Description, ActionButtonsContainer, + Container, + Scroll, } from './styles'; -import Header from '../../components/Header'; -import { AvaliationCard } from './components/AvaliationCard'; -import { TimeSession } from './components/TimeSession'; -import Button from '../../components/Button'; -import { ActionButton } from './components/ActionButton'; - const DetailRestaurant: React.FC = () => { const fakeData = [ { @@ -57,34 +60,37 @@ const DetailRestaurant: React.FC = () => { } return ( - -
- - - + + + + + + - - Pizzaria Primi Piatti - - - {' Av Padre Anchieta, 800 - Jangada'} - - - - - - - - + + Pizzaria Primi Piatti + + + + {' Av Padre Anchieta, 800 - Jangada'} + + + + + + + + + Descrição:{' '} Pizzaria altamente conhecida por sua variedade de produtos. Possuem @@ -92,40 +98,45 @@ const DetailRestaurant: React.FC = () => { com músicas de altíssima qualidade. Um local para você, amigos e família comerem bem. - - - - - - - - handleOpenWhatsApp(fakeData[0].phone)} - iconName="whatsapp" - text="Whatsapp" - borderColor="#14C255" - backgroundColor="#25D366" - /> - handleOpenPhone(fakeData[0].phone)} - iconName="phone" - text="Ligar" - borderColor="#188AE8" - backgroundColor="#42A4F5" - /> - handleOpenMaps(fakeData[0].lat, fakeData[0].lng)} - iconName="map-marker" - text="Rotas" - borderColor="#C21437" - backgroundColor="#F5365C" - /> - - - -