fix: Make location icon center aligned (#233)

shootismoke · Sep 30, 2019 · 99cd5d3 · 99cd5d3
1 parent e8bd3fd
commit 99cd5d3
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 39 deletions.
diff --git 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
@@ -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) {
           </View>
         </View>
 
-        <View style={styles.changeLocation}>
-          <ChangeLocation onPress={onChangeLocationClick} />
-        </View>
+        <ChangeLocation onPress={onChangeLocationClick} />
       </View>
     </View>
   );
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,45 +15,48 @@
 // along with Sh**t! I Smoke.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-    <TouchableOpacity onPress={onPress}>
-      <Image style={styles.icon} source={changeLocation} />
+    <TouchableOpacity onPress={onPress} style={styles.container} {...rest}>
+      <Image source={changeLocation} style={styles.icon} />
       <Text style={styles.label}>{i18n.t('home_header_change_location')}</Text>
     </TouchableOpacity>
   );
 }
 
 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
@@ -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)