Skip to content

Commit df42ec8

Browse files
joaovdsjoaovds
committed
refactor(detail-restaurant): refactors the entire restaurant detail screen
creates a new header type and also makes all styling responsive
1 parent 0533254 commit df42ec8

File tree

11 files changed

+329
-259
lines changed

11 files changed

+329
-259
lines changed

‎src/components/SecondaryHeader/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ const SecondaryHeader: React.FC<IProps> = ({ title }) => {
1616
<TouchableOpacity
1717
activeOpacity={0.8}
1818
onPress={() => {
19-
navigation.dispatch(DrawerActions.openDrawer);
19+
navigation.goBack();
2020
}}
2121
>
22-
<MenuIcon name="menu" />
22+
<MenuIcon name="chevron-left" />
2323
</TouchableOpacity>
2424

2525
<Title>{title}</Title>

‎src/screens/DetailRestaurant/components/ActionButton/index.tsx

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React, { ReactElement } from 'react';
2-
import {
3-
SafeAreaView,
4-
TouchableOpacity,
5-
TouchableOpacityProps,
6-
} from 'react-native';
7-
2+
import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
83
import FontAwesome from '@expo/vector-icons/FontAwesome';
94

5+
import normalize from '../../../../utils/normalizeSize';
6+
107
import { ContainerBox, Text } from './styles';
118

129
interface IProps extends TouchableOpacityProps {
@@ -24,13 +21,11 @@ export function ActionButton({
2421
...rest
2522
}: IProps): ReactElement {
2623
return (
27-
<SafeAreaView style={{ paddingHorizontal: 12 }}>
28-
<TouchableOpacity activeOpacity={0.6} {...rest}>
29-
<ContainerBox borderColor={borderColor} bgc={backgroundColor}>
30-
<FontAwesome name={iconName} size={30} color="#fff" />
31-
<Text>{text}</Text>
32-
</ContainerBox>
33-
</TouchableOpacity>
34-
</SafeAreaView>
24+
<TouchableOpacity activeOpacity={0.6} {...rest}>
25+
<ContainerBox borderColor={borderColor} bgc={backgroundColor}>
26+
<FontAwesome name={iconName} size={normalize(32)} color="#fff" />
27+
<Text>{text}</Text>
28+
</ContainerBox>
29+
</TouchableOpacity>
3530
);
3631
}

‎src/screens/DetailRestaurant/components/ActionButton/styles.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import styled, { css } from 'styled-components/native';
2+
import fonts from '../../../../styles/fonts';
3+
import normalize from '../../../../utils/normalizeSize';
4+
import pixelToDP from '../../../../utils/pixelToDP';
25

36
interface ContainerProps {
47
bgc: string;
@@ -14,15 +17,17 @@ export const ContainerBox = styled.View<ContainerProps>`
1417
border-color: ${props.borderColor};
1518
`}
1619
20+
width: ${pixelToDP.width(80)}px;
21+
height: ${pixelToDP.height(80)}px;
22+
1723
align-items: center;
1824
justify-content: center;
19-
width: 80px;
20-
height: 70px;
21-
border-radius: 16px;
25+
26+
border-radius: ${normalize(16)}px;
2227
`;
2328

2429
export const Text = styled.Text`
25-
font-size: 12px;
26-
font-family: 'Roboto_500Medium';
30+
font-size: ${normalize(12)}px;
31+
font-family: ${fonts.robotoMedium};
2732
color: #fff;
2833
`;

‎src/screens/DetailRestaurant/components/AvaliationCard/index.tsx

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎src/screens/DetailRestaurant/components/AvaliationCard/styles.ts

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/screens/DetailRestaurant/components/EvaluationCard/index.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
3+
4+
import { Text } from 'react-native';
5+
import normalize from '../../../../utils/normalizeSize';
6+
7+
import {
8+
ContainerCard,
9+
BoxRating,
10+
Rating,
11+
RatingText,
12+
EvaluationContainer,
13+
LinkToEvaluations,
14+
EvaluationNow,
15+
Footer,
16+
Header,
17+
Divider,
18+
} from './styles';
19+
20+
interface IProps {
21+
numberOfStars: number;
22+
totalEvaluations: number;
23+
}
24+
25+
const EvaluationCard: React.FC<IProps> = ({
26+
numberOfStars,
27+
totalEvaluations,
28+
}) => {
29+
return (
30+
<ContainerCard>
31+
<Header>
32+
<BoxRating>
33+
<Rating>{numberOfStars}</Rating>
34+
<MaterialIcons name="star" color="#fff" size={normalize(24)} />
35+
</BoxRating>
36+
37+
<EvaluationContainer>
38+
<RatingText>4.5 de 5 estrelas</RatingText>
39+
40+
<LinkToEvaluations>
41+
{`(${totalEvaluations} Avaliações)`}
42+
</LinkToEvaluations>
43+
</EvaluationContainer>
44+
</Header>
45+
46+
<Divider />
47+
48+
<Footer>
49+
<EvaluationNow>Avalie agora!</EvaluationNow>
50+
51+
<Text style={{ marginHorizontal: 8, color: '#fff' }}>•</Text>
52+
53+
<MaterialIcons name="star-border" color="#D4F5FF" size={24} />
54+
<MaterialIcons name="star-border" color="#D4F5FF" size={24} />
55+
<MaterialIcons name="star-border" color="#D4F5FF" size={24} />
56+
<MaterialIcons name="star-border" color="#D4F5FF" size={24} />
57+
<MaterialIcons name="star-border" color="#D4F5FF" size={24} />
58+
</Footer>
59+
</ContainerCard>
60+
);
61+
};
62+
63+
export default EvaluationCard;

‎src/screens/DetailRestaurant/components/EvaluationCard/styles.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import styled from 'styled-components/native';
2+
import colors from '../../../../styles/colors';
3+
import { sizes } from '../../../../utils/predefinedSizes';
4+
import fonts from '../../../../styles/fonts';
5+
import normalize from '../../../../utils/normalizeSize';
6+
import pixelToDP from '../../../../utils/pixelToDP';
7+
8+
export const ContainerCard = styled.View`
9+
width: 100%;
10+
padding: ${sizes.height.dp16}px;
11+
12+
background-color: #2196f3;
13+
border-radius: ${normalize(8)}px;
14+
`;
15+
16+
export const Header = styled.View`
17+
flex-direction: row;
18+
align-items: center;
19+
`;
20+
21+
export const BoxRating = styled.View`
22+
padding: ${normalize(8)}px;
23+
24+
align-items: center;
25+
justify-content: center;
26+
flex-direction: row;
27+
28+
background-color: #2ea3f7;
29+
border: ${colors.light.primary50} 1px;
30+
border-radius: ${normalize(8)}px;
31+
`;
32+
33+
export const Rating = styled.Text`
34+
margin-right: ${sizes.width.dp4}px;
35+
36+
font-family: ${fonts.robotoBold};
37+
font-size: ${normalize(28)}px;
38+
color: #ffff;
39+
`;
40+
41+
export const EvaluationContainer = styled.View`
42+
flex: 1;
43+
height: 100%;
44+
margin-left: ${sizes.width.dp12}px;
45+
`;
46+
47+
export const RatingText = styled.Text`
48+
font-family: ${fonts.robotoMedium};
49+
font-size: ${normalize(18)}px;
50+
color: ${colors.light.primary50};
51+
`;
52+
53+
export const LinkToEvaluations = styled.Text`
54+
font-family: ${fonts.robotoRegular};
55+
font-size: ${normalize(14)}px;
56+
color: #a5d4ef;
57+
text-decoration: underline;
58+
margin-top: ${sizes.height.dp4}px;
59+
`;
60+
61+
export const Divider = styled.View`
62+
width: 100%;
63+
height: 1px;
64+
margin: ${sizes.height.dp16}px 0;
65+
background-color: #f0f0f0;
66+
`;
67+
68+
export const Footer = styled.View`
69+
flex-direction: row;
70+
align-items: center;
71+
`;
72+
73+
export const EvaluationNow = styled.Text`
74+
font-family: ${fonts.robotoMedium};
75+
font-size: ${normalize(16)}px;
76+
color: #d4f5ff;
77+
`;

‎src/screens/DetailRestaurant/components/TimeSession/index.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactElement, useEffect, useState } from 'react';
2-
import { SafeAreaView, TouchableOpacity } from 'react-native';
2+
import { TouchableOpacity } from 'react-native';
33

44
import {
55
ContainerSession,
@@ -9,6 +9,7 @@ import {
99
Divider,
1010
Events,
1111
ClockIcon,
12+
Infos,
1213
} from './styles';
1314

1415
interface IProps {
@@ -31,9 +32,10 @@ export function TimeSession({ openTime, closeTime }: IProps): ReactElement {
3132
}, [hours, openTime, closeTime]);
3233

3334
return (
34-
<SafeAreaView>
35-
<ContainerSession>
35+
<ContainerSession>
36+
<Infos>
3637
<ClockIcon isOpen={isOpen} name="clock" />
38+
3739
<TimeInfo>
3840
<IsOpenNow isOpen={isOpen}>
3941
{isOpen ? 'Aberto Agora!' : 'Fechado Agora!'}
@@ -44,11 +46,13 @@ export function TimeSession({ openTime, closeTime }: IProps): ReactElement {
4446
: 'Ver horários'}
4547
</OpenHours>
4648
</TimeInfo>
47-
<Divider />
48-
<TouchableOpacity activeOpacity={0.6}>
49-
<Events>Eventos</Events>
50-
</TouchableOpacity>
51-
</ContainerSession>
52-
</SafeAreaView>
49+
</Infos>
50+
51+
<Divider />
52+
53+
<TouchableOpacity activeOpacity={0.6}>
54+
<Events>Eventos</Events>
55+
</TouchableOpacity>
56+
</ContainerSession>
5357
);
5458
}

0 commit comments

Comments
 (0)