Format remind me button better on small screens

brentvatne · Jul 6, 2017 · be0f11b · be0f11b
1 parent 6175110
commit be0f11b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/components/RemindMeButton.js b/components/RemindMeButton.js
@@ -10,11 +10,11 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import { connect } from 'react-redux';
 import { find } from 'lodash';
 
-import { Colors, Fonts } from '../constants';
+import { Colors, Fonts, Layout } from '../constants';
 import Reminders from '../utilities/Reminders';
 
 @connect((data, props) => RemindMeButton.getDataProps(data, props))
-export default class RemindMeButton extends React.Component {
+export default class RemindMeButton extends React.PureComponent {
   static getDataProps(data, props) {
     let reminder = find(
       data.reminders,
@@ -95,7 +95,9 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.clear,
     alignItems: 'center',
     justifyContent: 'center',
-    height: 34,
+    height: Layout.isSmallDevice ? 30 : 34,
+    marginLeft: Layout.isSmallDevice ? 20 : 0,
+    marginRight: Layout.isSmallDevice ? -5 : 0,
   },
   buttonContainer: {
     flexDirection: 'row',
@@ -111,7 +113,7 @@ const styles = StyleSheet.create({
   },
   text: {
     fontFamily: Fonts.type.medium,
-    fontSize: 11,
+    fontSize: Layout.isSmallDevice ? 9 : 11,
     color: Colors.red,
   },
   activeText: {

diff --git a/components/TalkFooter.js b/components/TalkFooter.js
@@ -2,8 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { format } from 'date-fns';
 
-import Colors from '../constants/Colors';
-import Layout from '../constants/Layout';
+import { Colors, Layout } from '../constants';
 import RemindMeButton from './RemindMeButton';
 
 export default class TalkFooter extends React.PureComponent {