for #1411

src/App.js

@@ -128,7 +128,8 @@ const dayNavBar = {
   },
   // headerMode: 'screen',
   navigationBarStyle: {
-    borderBottomWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.WARM_GREY,
     elevation: 1,
     backgroundColor: 'white',
     shadowColor: 'transparent',

src/components/BotDetails/AddBotButton.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet, Image} from 'react-native';
+import {Text, TouchableOpacity, StyleSheet, Image} from 'react-native';
 import {colors} from '../../constants';
 import {k} from '../Global';
 import {Actions} from 'react-native-router-flux';
@@ -12,25 +12,26 @@ type Props = {
   isSubscribed: boolean,
   isOwn: boolean,
   botId: string,
+  style: any,
 };
 
-const AddBotButton = ({subscribe, unsubscribe, isSubscribed, isOwn, botId}: Props) => {
+const AddBotButton = ({subscribe, unsubscribe, isSubscribed, isOwn, botId, style}: Props) => {
   let onPress, buttonStyle, image, text, textStyle;
   if (isOwn) {
     onPress = () => Actions.botEdit({item: botId});
-    buttonStyle = [styles.addBotButton, {backgroundColor: colors.WHITE}];
+    buttonStyle = [style, {backgroundColor: colors.WHITE}];
     image = require('../../../images/editPink.png');
     text = 'EDIT';
     textStyle = [styles.addBotText, {color: colors.PINK}];
   } else if (isSubscribed) {
     onPress = unsubscribe;
-    buttonStyle = [styles.addBotButton, {backgroundColor: colors.WHITE, borderColor: colors.GREY}];
+    buttonStyle = [style, {backgroundColor: colors.WHITE, borderColor: colors.GREY}];
     image = require('../../../images/iconCheckBotAdded.png');
     text = 'SAVED';
     textStyle = [styles.addBotText, {color: colors.PURPLE}];
   } else {
     onPress = subscribe;
-    buttonStyle = styles.addBotButton;
+    buttonStyle = style;
     image = require('../../../images/saveIcon.png');
     text = 'SAVE';
     textStyle = styles.addBotText;
@@ -46,17 +47,6 @@ const AddBotButton = ({subscribe, unsubscribe, isSubscribed, isOwn, botId}: Prop
 export default AddBotButton;
 
 const styles = StyleSheet.create({
-  addBotButton: {
-    flexDirection: 'row',
-    height: 40 * k,
-    flex: 1,
-    backgroundColor: colors.PINK,
-    borderRadius: 5 * k,
-    borderColor: colors.PINK,
-    borderWidth: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   addBotText: {
     fontSize: 13,
     letterSpacing: 0.6,

src/components/BotDetails/BotButtons.js

@@ -1,13 +1,15 @@
 // @flow
 
 import React from 'react';
-import {View, TouchableOpacity, Image, Clipboard} from 'react-native';
+import {StyleSheet, View, TouchableOpacity, Image, Clipboard} from 'react-native';
 import {k} from '../Global';
 import {observer} from 'mobx-react/native';
 import AddBotButton from './AddBotButton';
 import {Actions} from 'react-native-router-flux';
 import ActionSheet from 'react-native-actionsheet';
 import Bot from '../../model/Bot';
+import {colors} from '../../constants';
+import {RText} from '../common';
 
 type Props = {
   bot: Bot,
@@ -29,6 +31,7 @@ const nonOwnerActions = [
   {
     name: 'Report',
     action: ({bot}) => Actions.reportBot({botId: bot.id}),
+    destructive: true,
   },
   {name: 'Cancel', action: () => {}},
 ];
@@ -41,23 +44,56 @@ class BotButtons extends React.Component {
     if (!bot.owner) return null;
     const actions = bot.owner.isOwn ? ownerActions : nonOwnerActions;
     const isShareable = bot.isPublic || bot.owner.isOwn;
+    const destructiveIndex = actions.findIndex(a => a.destructive);
     return (
       <View style={{backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', flexDirection: 'row', padding: 15 * k, paddingBottom: 5 * k}}>
-        <AddBotButton {...this.props} isOwn={bot.owner.isOwn} botId={bot.id} />
-        {isShareable && (
-          <TouchableOpacity onPress={() => Actions.botShareSelectFriends({item: bot.id})} style={{paddingLeft: 15 * k}}>
-            <Image source={require('../../../images/shareButton.png')} />
-          </TouchableOpacity>
-        )}
-        <TouchableOpacity style={{paddingLeft: 15 * k}} onPress={() => this.actionSheet.show()}>
-          <Image source={require('../../../images/editButton.png')} />
-        </TouchableOpacity>
-        <ActionSheet ref={o => (this.actionSheet = o)} options={actions.map(a => a.name)} cancelButtonIndex={actions.length - 1} onPress={index => this.onTap(index, actions)} />
+        <AddBotButton style={styles.button} {...this.props} isOwn={bot.owner.isOwn} botId={bot.id} />
+        {isShareable && <ShareButton bot={bot} />}
+        <EditButton onPress={() => this.actionSheet.show()} />
+        <ActionSheet
+          ref={o => (this.actionSheet = o)}
+          options={actions.map(a => a.name)}
+          cancelButtonIndex={actions.length - 1}
+          onPress={index => this.onTap(index, actions)}
+          destructiveButtonIndex={destructiveIndex}
+        />
       </View>
     );
   }
 
   onTap = (index: number, actions: Object[]) => actions[index].action(this.props);
 }
 
+const ShareButton = ({bot}) => (
+  <TouchableOpacity onPress={() => Actions.botShareSelectFriends({item: bot.id})} style={[styles.button, {marginHorizontal: 15 * k}]}>
+    <Image source={require('../../../images/shareWhite.png')} resizeMode='contain' />
+    <RText size={13} color={colors.WHITE} style={{marginLeft: 5 * k}}>
+      SHARE
+    </RText>
+  </TouchableOpacity>
+);
+
+const EditButton = props => (
+  <TouchableOpacity style={[styles.button, {width: 44 * k, backgroundColor: colors.WHITE, flex: 0}]} {...props}>
+    <Image source={require('../../../images/editDots.png')} resizeMode='contain' />
+  </TouchableOpacity>
+);
+
 export default observer(BotButtons);
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    height: 40 * k,
+    flexDirection: 'row',
+    backgroundColor: colors.PINK,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 5 * k,
+    borderColor: colors.PINK,
+    borderWidth: 1,
+  },
+  buttonIcon: {
+    marginRight: 5 * k,
+  },
+});

src/components/BotNavBarMixin.js

@@ -31,7 +31,8 @@ const BotNavBarMixin = superclass =>
         >
           <RText
             numberOfLines={map ? 1 : 2}
-            adjustsFontSizeToFit
+            // must wait for solution to https://github.com/facebook/react-native/issues/14981
+            // adjustsFontSizeToFit
             minimumFontScale={0.8}
             weight='Medium'
             size={18}
@@ -43,7 +44,7 @@ const BotNavBarMixin = superclass =>
             {bot.title}
           </RText>
           {map && (
-            <RText adjustsFontSizeToFit minimumFontScale={0.6} numberOfLines={1} weight='Light' size={14} color={colors.DARK_PURPLE} style={{textAlign: 'center'}}>
+            <RText /* adjustsFontSizeToFit*/ minimumFontScale={0.6} numberOfLines={1} weight='Light' size={14} color={colors.DARK_PURPLE} style={{textAlign: 'center'}}>
               {bot.address}
             </RText>
           )}