Refactor a bit the components

App/Screens/About/About.tsx

@@ -24,10 +24,11 @@ import {
  Text,
  View
 } from 'react-native';
+import { scale } from 'react-native-size-matters';
 import { NavigationInjectedProps } from 'react-navigation';
 
 import { Box } from './Box';
-import { BackButton } from '../../components/BackButton';
+import { BackButton } from '../../components';
 import { Dev } from './Dev';
 import { Language } from './Language';
 import { i18n } from '../../localization';
@@ -55,7 +56,7 @@ export function About (props: AboutProps) {
  const { navigation } = props;
  return (
  <ScrollView style={theme.withPadding}>
- <BackButton onClick={() => navigation.pop()} style={styles.backButton} />
+ <BackButton onPress={() => navigation.pop()} style={styles.backButton} />
 
  <View style={styles.section}>
  <Text style={styles.h2}>
@@ -161,7 +162,7 @@ export function About (props: AboutProps) {
 const styles = StyleSheet.create({
  articleLink: {
  ...theme.text,
- fontSize: 8
+ fontSize: scale(8)
  },
  backButton: {
  marginBottom: theme.spacing.normal,
@@ -175,9 +176,9 @@ const styles = StyleSheet.create({
  },
  h2: {
  ...theme.title,
- fontSize: 20,
+ fontSize: scale(20),
  letterSpacing: 0,
- lineHeight: 24,
+ lineHeight: scale(24),
  marginBottom: theme.spacing.small
  },
  language: {

App/Screens/Details/Distance/Distance.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
-import { Banner } from '../../../components/Banner';
+import { Banner } from '../../../components';
 import { i18n } from '../../../localization';
 import * as theme from '../../../util/theme';
 

App/Screens/Details/Header/Header.tsx

@@ -27,8 +27,7 @@ import {
 } from 'react-native';
 
 import locationIcon from '../../../../assets/images/location.png';
-import { BackButton } from '../../../components/BackButton';
-import { CurrentLocation } from '../../../components/CurrentLocation';
+import { BackButton, CurrentLocation } from '../../../components';
 import { i18n } from '../../../localization';
 import { ApiContext, CurrentLocationContext } from '../../../stores';
 import * as theme from '../../../util/theme';
@@ -50,7 +49,7 @@ export function Header (props: HeaderProps) {
 
  return (
  <View style={styles.container}>
- <BackButton onClick={onBackClick} style={styles.backButton} />
+ <BackButton onPress={onBackClick} style={styles.backButton} />
 
  <View style={styles.layout}>
  <Image source={locationIcon} style={styles.changeLocation} />
@@ -112,7 +111,7 @@ const styles = StyleSheet.create({
  ...theme.elevatedLevel1('bottom'),
  ...theme.withPadding,
  backgroundColor: 'white',
- paddingBottom: 15,
+ paddingBottom: theme.spacing.small,
  paddingTop: theme.spacing.normal,
  zIndex: 1
  },
@@ -128,7 +127,7 @@ const styles = StyleSheet.create({
  },
  label: {
  color: theme.primaryColor,
- fontFamily: theme.boldFont
+ fontFamily: theme.gothamBlack
  },
  layout: {
  flexDirection: 'row'

App/Screens/ErrorScreen/ErrorScreen.tsx

@@ -17,8 +17,10 @@
 import React, { useContext } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { NavigationInjectedProps } from 'react-navigation';
+import { scale } from 'react-native-size-matters';
 
 import errorPicture from '../../../assets/images/error.png';
+import { Button } from '../../components';
 import { i18n } from '../../localization';
 import { ErrorContext } from '../../stores';
 import * as theme from '../../util/theme';
@@ -41,9 +43,9 @@ export function ErrorScreen (props: ErrorScreenProps) {
  </View>
  <TouchableOpacity onPress={() => props.navigation.navigate('Search')}>
  <View style={styles.chooseOther}>
- <Text style={theme.bigButtonText}>
+ <Button style={styles.chooseOther}>
  {i18n.t('error_screen_choose_other_location').toUpperCase()}
- </Text>
+ </Button>
  </View>
  </TouchableOpacity>
  <Text style={theme.text}>{i18n.t('error_screen_error_description')}</Text>
@@ -56,7 +58,6 @@ export function ErrorScreen (props: ErrorScreenProps) {
 
 const styles = StyleSheet.create({
  chooseOther: {
- ...theme.bigButton,
  marginVertical: theme.spacing.normal
  },
  container: {
@@ -67,7 +68,7 @@ const styles = StyleSheet.create({
  },
  errorMessage: {
  ...theme.text,
- fontSize: 10,
+ fontSize: scale(10),
  marginTop: theme.spacing.small
  },
  errorText: {

App/Screens/Home/Frequency/Frequency.tsx

@@ -0,0 +1,57 @@
+// Sh**t! I Smoke
+// Copyright (C) 2018-2019 Marcelo S. Coelho, Amaury Martiny
+
+// Sh**t! I Smoke is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Sh**t! I Smoke is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { BoxButton } from '../../../components';
+import * as theme from '../../../util/theme';
+
+const FREQUENCY = {
+ daily: undefined,
+ weekly: new Date(),
+ monthly: new Date()
+};
+type Frequency = keyof typeof FREQUENCY;
+
+interface FrequencyProps {
+ onChangeFrequency: (frequency: Frequency) => void;
+}
+
+export function Frequency (props: FrequencyProps) {
+ return (
+ <View style={styles.container}>
+ <BoxButton
+ onPress={() => props.onChangeFrequency('daily')}
+ style={styles.boxButton}
+ >
+ daily
+ </BoxButton>
+ <BoxButton style={styles.boxButton}>weekly</BoxButton>
+ <BoxButton style={styles.boxButton}>monthly</BoxButton>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ boxButton: {
+ marginRight: theme.spacing.tiny
+ },
+ container: {
+ flexDirection: 'row',
+ marginTop: theme.spacing.tiny
+ }
+});

App/Screens/Home/SmallButton/index.ts → App/Screens/Home/Frequency/index.ts

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
 
-export * from './SmallButton';
+export * from './Frequency';

App/Screens/Home/Header/Header.tsx

@@ -26,7 +26,7 @@ import {
 
 import changeLocation from '../../../../assets/images/changeLocation.png';
 import warning from '../../../../assets/images/warning.png';
-import { CurrentLocation } from '../../../components/CurrentLocation';
+import { CurrentLocation } from '../../../components';
 import { i18n } from '../../../localization';
 import { ApiContext, CurrentLocationContext } from '../../../stores';
 import { distanceToStation, isStationTooFar } from '../../../util/station';
@@ -91,11 +91,7 @@ const styles = StyleSheet.create({
  },
  distance: {
  flexDirection: 'row',
- marginTop: 11
- },
- title: {
- ...theme.title,
- fontSize: 15
+ marginTop: theme.spacing.tiny
  },
  warning: {
  marginRight: theme.spacing.tiny

App/Screens/Home/Home.tsx

@@ -15,20 +15,13 @@
 // along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
 
 import React, { useContext } from 'react';
-import {
- ScrollView,
- Share,
- StyleSheet,
- Text,
- TouchableOpacity,
- View
-} from 'react-native';
+import { ScrollView, Share, StyleSheet, Text, View } from 'react-native';
 import { NavigationInjectedProps } from 'react-navigation';
 
-import { Cigarettes } from '../../components/Cigarettes';
+import { Button, Cigarettes } from '../../components';
+import { Frequency } from './Frequency';
 import { Header } from './Header';
 import { i18n } from '../../localization';
-import { SmallButton } from './SmallButton';
 import { SmokeVideo } from './SmokeVideo';
 import { ApiContext, CurrentLocationContext } from '../../stores';
 import swearWords from './swearWords';
@@ -63,48 +56,34 @@ export function Home (props: HomeProps) {
  const renderBigButton = () => {
  if (isTooFar) {
  return (
- <TouchableOpacity onPress={goToAbout}>
- <View style={theme.bigButton}>
- <Text style={theme.bigButtonText}>
- {i18n.t('home_btn_why_is_station_so_far').toUpperCase()}
- </Text>
- </View>
- </TouchableOpacity>
+ <Button onPress={goToAbout}>
+ {i18n.t('home_btn_why_is_station_so_far').toUpperCase()}
+ </Button>
  );
  }
 
  return (
- <TouchableOpacity onPress={goToDetails}>
- <View style={theme.bigButton}>
- <Text style={theme.bigButtonText}>
- {i18n.t('home_btn_see_detailed_info').toUpperCase()}
- </Text>
- </View>
- </TouchableOpacity>
+ <Button onPress={goToDetails}>
+ {i18n.t('home_btn_see_detailed_info').toUpperCase()}
+ </Button>
  );
  };
 
  const renderFooter = () => {
  return (
  <View style={styles.smallButtons}>
  {isTooFar ? (
- <SmallButton
- icon="plus-circle"
- text={i18n.t('home_btn_more_details').toUpperCase()}
- onPress={goToDetails}
- />
+ <Button icon="plus-circle" onPress={goToDetails} type="secondary">
+ {i18n.t('home_btn_more_details').toUpperCase()}
+ </Button>
  ) : (
- <SmallButton
- icon="question-circle"
- text={i18n.t('home_btn_faq_about').toUpperCase()}
- onPress={goToAbout}
- />
+ <Button icon="question-circle" onPress={goToAbout} type="secondary">
+ {i18n.t('home_btn_faq_about').toUpperCase()}
+ </Button>
  )}
- <SmallButton
- icon="share-alt"
- text={i18n.t('home_btn_share').toUpperCase()}
- onPress={handleShare}
- />
+ <Button icon="share-alt" onPress={handleShare} type="secondary">
+ {i18n.t('home_btn_share').toUpperCase()}
+ </Button>
  </View>
  );
  };
@@ -164,7 +143,10 @@ export function Home (props: HomeProps) {
  >
  <View style={styles.content}>
  <Cigarettes cigarettes={api!.shootISmoke.cigarettes} />
- <View style={styles.main}>{renderText()}</View>
+ <View style={styles.main}>
+ {renderText()}
+ <Frequency onChangeFrequency={() => {}} />
+ </View>
  </View>
  <View style={styles.cta}>
  {isTooFar && (
@@ -219,7 +201,6 @@ const styles = StyleSheet.create({
  smallButtons: {
  flexDirection: 'row',
  justifyContent: 'space-around',
- marginBottom: 2 * theme.spacing.normal,
  marginTop: theme.spacing.normal
  }
 });

App/Screens/Search/Search.tsx

@@ -25,10 +25,11 @@ import * as TE from 'fp-ts/lib/TaskEither';
 import * as t from 'io-ts';
 import { failure } from 'io-ts/lib/PathReporter';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { scale } from 'react-native-size-matters';
 import { NavigationInjectedProps } from 'react-navigation';
 import Sentry from 'sentry-expo';
 
-import { BackButton } from '../../components/BackButton';
+import { BackButton } from '../../components';
 import { Item } from './Item';
 import { SearchHeader } from './SearchHeader';
 import {
@@ -209,7 +210,7 @@ export function Search (props: SearchProps) {
  return (
  <View style={styles.container}>
  <BackButton
- onClick={() => props.navigation.pop()}
+ onPress={() => props.navigation.pop()}
  style={styles.backButton}
  />
  <SearchHeader onChangeSearch={handleChangeSearch} search={search} />
@@ -250,7 +251,7 @@ function renderSeparator () {
 const styles = StyleSheet.create({
  backButton: {
  ...theme.withPadding,
- marginVertical: 18
+ marginVertical: theme.spacing.normal
  },
  container: {
  flexGrow: 1
@@ -266,6 +267,6 @@ const styles = StyleSheet.create({
  separator: {
  backgroundColor: '#D2D2D2',
  height: 1,
- marginLeft: 17 + 22 + 17 // Margin + imgWidth + margin
+ marginLeft: scale(17 + 22 + 17) // Margin + imgWidth + margin
  }
 });

App/Screens/Search/SearchHeader/SearchHeader.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { Image, StyleSheet, TextInput } from 'react-native';
 
 import searchIcon from '../../../../assets/images/search.png';
-import { Banner } from '../../../components/Banner';
+import { Banner } from '../../../components';
 import { i18n } from '../../../localization';
 import * as theme from '../../../util/theme';
 

App/components/BackButton/BackButton.tsx

@@ -31,7 +31,7 @@ import * as theme from '../../util/theme';
 import { i18n } from '../../localization';
 
 interface BackButtonProps {
- onClick: (event: GestureResponderEvent) => void;
+ onPress: (event: GestureResponderEvent) => void;
  style?: StyleProp<ViewStyle>; // FIXME any
 }
 
@@ -42,7 +42,7 @@ export function BackButton (props: BackButtonProps) {
  <View style={style}>
  <TouchableOpacity
  hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
- onPress={props.onClick}
+ onPress={props.onPress}
  style={styles.backButton}
  >
  <Image source={backIcon} />