From 99cd5d39dd5f5fc8fea037714366c7c9716444f4 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Mon, 30 Sep 2019 21:33:34 +0200 Subject: [PATCH] fix: Make location icon center aligned (#233) --- App/Screens/Home/Footer/Footer.tsx | 2 +- App/Screens/Home/Header/Header.tsx | 34 +++++++++---------- App/Screens/Home/Home.tsx | 2 +- .../Home/SelectFrequency/SelectFrequency.tsx | 4 +-- App/components/BoxButton/BoxButton.tsx | 2 +- App/components/Button/Button.tsx | 4 +-- .../ChangeLocation/ChangeLocation.tsx | 31 +++++++++-------- App/util/theme.ts | 3 +- 8 files changed, 43 insertions(+), 39 deletions(-) diff --git a/App/Screens/Home/Footer/Footer.tsx b/App/Screens/Home/Footer/Footer.tsx index 594d902d..7c5704c0 100644 --- a/App/Screens/Home/Footer/Footer.tsx +++ b/App/Screens/Home/Footer/Footer.tsx @@ -109,7 +109,7 @@ const styles = StyleSheet.create({ container: { ...theme.withPadding, marginBottom: theme.spacing.normal, - marginTop: theme.spacing.tiny + marginTop: theme.spacing.mini }, isStationTooFar: { ...theme.text, diff --git a/App/Screens/Home/Header/Header.tsx b/App/Screens/Home/Header/Header.tsx index d8b03933..f2353c70 100644 --- a/App/Screens/Home/Header/Header.tsx +++ b/App/Screens/Home/Header/Header.tsx @@ -27,7 +27,11 @@ import alert from '../../../../assets/images/alert.png'; import { ChangeLocation, CurrentLocation } from '../../../components'; import { i18n } from '../../../localization'; import { ApiContext, CurrentLocationContext } from '../../../stores'; -import { distanceToStation, isStationTooFar, DistanceUnit } from '../../../util/station'; +import { + distanceToStation, + isStationTooFar, + DistanceUnit +} from '../../../util/station'; import * as theme from '../../../util/theme'; interface HeaderProps { @@ -40,8 +44,14 @@ export function Header (props: HeaderProps) { const { onChangeLocationClick } = props; const distanceUnit = i18n.t('distance_unit'); - const haversineDistanceUnit = i18n.t('haversine_distance_unit') as DistanceUnit; - const distance = distanceToStation(currentLocation!, api!, haversineDistanceUnit); + const haversineDistanceUnit = i18n.t( + 'haversine_distance_unit' + ) as DistanceUnit; + const distance = distanceToStation( + currentLocation!, + api!, + haversineDistanceUnit + ); const isTooFar = isStationTooFar(currentLocation!, api!); return ( @@ -65,9 +75,7 @@ export function Header (props: HeaderProps) { - - - + ); @@ -87,23 +95,15 @@ const styles = StyleSheet.create({ flexDirection: 'row' }, currentLocation: { - marginRight: theme.spacing.tiny, + marginRight: theme.spacing.mini, flex: 1 }, - - changeLocation: { - alignSelf: 'stretch', - alignItems: 'flex-end', - justifyContent: 'flex-start', - maxWidth: 60 - }, - distance: { alignItems: 'center', flexDirection: 'row', - marginTop: theme.spacing.tiny + marginTop: theme.spacing.mini }, warning: { - marginRight: theme.spacing.tiny + marginRight: theme.spacing.mini } }); diff --git a/App/Screens/Home/Home.tsx b/App/Screens/Home/Home.tsx index d20f2b92..51d8d38d 100644 --- a/App/Screens/Home/Home.tsx +++ b/App/Screens/Home/Home.tsx @@ -156,7 +156,7 @@ const styles = StyleSheet.create({ }, scrollView: { flex: 1 }, selectFrequency: { - marginTop: theme.spacing.tiny + marginTop: theme.spacing.mini }, shit: { ...theme.shitText, diff --git a/App/Screens/Home/SelectFrequency/SelectFrequency.tsx b/App/Screens/Home/SelectFrequency/SelectFrequency.tsx index 6d39e022..bcdb09a7 100644 --- a/App/Screens/Home/SelectFrequency/SelectFrequency.tsx +++ b/App/Screens/Home/SelectFrequency/SelectFrequency.tsx @@ -71,7 +71,7 @@ export function SelectFrequency (props: SelectFrequencyProps) { } scroll.current!.scrollTo({ - x: dailyWidth + theme.spacing.tiny + x: dailyWidth + theme.spacing.mini }); handleChangeFrequency('weekly'); }} @@ -100,7 +100,7 @@ export function SelectFrequency (props: SelectFrequencyProps) { const styles = StyleSheet.create({ boxButton: { - marginRight: theme.spacing.tiny + marginRight: theme.spacing.mini }, container: { flexDirection: 'row', diff --git a/App/components/BoxButton/BoxButton.tsx b/App/components/BoxButton/BoxButton.tsx index c10014b9..328a837c 100644 --- a/App/components/BoxButton/BoxButton.tsx +++ b/App/components/BoxButton/BoxButton.tsx @@ -57,7 +57,7 @@ const styles = StyleSheet.create({ borderColor: 'rgba(0, 0, 0, 0.1)', borderRadius: scale(12), borderWidth: 1, - marginBottom: theme.spacing.tiny, + marginBottom: theme.spacing.mini, paddingHorizontal: theme.spacing.small, paddingVertical: scale(4), // Padding for the shadow shadowOpacity: 0.1 diff --git a/App/components/Button/Button.tsx b/App/components/Button/Button.tsx index ef26b9bf..7b9de07b 100644 --- a/App/components/Button/Button.tsx +++ b/App/components/Button/Button.tsx @@ -63,14 +63,14 @@ const styles = StyleSheet.create({ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-around', - paddingVertical: theme.spacing.tiny + paddingVertical: theme.spacing.mini }, bigButtonText: { ...theme.title, color: theme.primaryColor }, icon: { - marginRight: theme.spacing.tiny + marginRight: theme.spacing.mini }, primary: { borderColor: theme.primaryColor, diff --git a/App/components/ChangeLocation/ChangeLocation.tsx b/App/components/ChangeLocation/ChangeLocation.tsx index 31c6d46b..bc63f409 100644 --- a/App/components/ChangeLocation/ChangeLocation.tsx +++ b/App/components/ChangeLocation/ChangeLocation.tsx @@ -15,24 +15,27 @@ // along with Sh**t! I Smoke. If not, see . import React from 'react'; -import { Image, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps } from 'react-native'; +import { + Image, + StyleSheet, + Text, + TouchableOpacity, + TouchableOpacityProps +} from 'react-native'; import { scale } from 'react-native-size-matters'; import { i18n } from '../../localization'; import * as theme from '../../util/theme'; - import changeLocation from '../../../assets/images/changeLocation.png'; -interface ChangeLocationProps extends TouchableOpacityProps { - -} +interface ChangeLocationProps extends TouchableOpacityProps {} export function ChangeLocation (props: ChangeLocationProps) { - const { onPress } = props; + const { onPress, ...rest } = props; return ( - - + + {i18n.t('home_header_change_location')} ); @@ -40,20 +43,20 @@ export function ChangeLocation (props: ChangeLocationProps) { const styles = StyleSheet.create({ container: { - backgroundColor: 'yellow', - maxWidth: 60 + flexDirection: 'column', + justifyContent: 'center', + width: 60 }, - icon: { alignSelf: 'center', - marginBottom: scale(4) + marginBottom: theme.spacing.tiny }, - label: { color: theme.primaryColor, fontFamily: theme.gothamBlack, fontSize: scale(7), - lineHeight: scale(8), + letterSpacing: 2, + lineHeight: scale(10), textAlign: 'center', textTransform: 'uppercase' } diff --git a/App/util/theme.ts b/App/util/theme.ts index 2415cb7b..970e94bd 100644 --- a/App/util/theme.ts +++ b/App/util/theme.ts @@ -28,7 +28,8 @@ export const primaryColor = '#F8A65D'; export const textColor = '#44464A'; export const secondaryTextColor = '#8B909A'; export const spacing = { - tiny: scale(10), + tiny: scale(5), + mini: scale(10), small: scale(15), normal: scale(20), big: scale(36)