for #1404

src/components/BotNavBarMixin.js

@@ -1,11 +1,13 @@
 // @flow
 
 import React from 'react';
-import {Text, Clipboard, StyleSheet} from 'react-native';
+import {Clipboard, TouchableOpacity, Image} from 'react-native';
 import {Actions} from 'react-native-router-flux';
 import botFactory from '../factory/botFactory';
 import {colors} from '../constants';
 import ButtonWithPopover from './ButtonWithPopover';
+import {k} from './Global';
+import {RText} from './common';
 
 // Mixin for DRY principle, check article:
 // http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
@@ -21,44 +23,43 @@ const BotNavBarMixin = superclass =>
           onLongPress={() => Clipboard.setString(bot.address)}
           // @TODO: need a way to call scrollToEnd on a ref in the mixin implementer
           onPress={() => scale === 0 && Actions.refresh({scale: 0.5})}
-          popover={<Text style={{fontFamily: 'Roboto-Regular', color: 'white', fontSize: 14}}>Address copied to clipboard</Text>}
+          popover={
+            <RText color={colors.WHITE} size={14}>
+              Address copied to clipboard
+            </RText>
+          }
         >
-          <Text
+          <RText
             numberOfLines={map ? 1 : 2}
             adjustsFontSizeToFit
             minimumFontScale={0.8}
+            weight='Medium'
+            size={18}
+            color={colors.DARK_PURPLE}
             style={{
-              fontFamily: 'Roboto-Medium',
-              fontSize: 18,
               textAlign: 'center',
-              color: colors.DARK_PURPLE,
             }}
           >
             {bot.title}
-          </Text>
-          {map &&
-            <Text adjustsFontSizeToFit minimumFontScale={0.6} numberOfLines={1} style={styles.address}>
+          </RText>
+          {map && (
+            <RText adjustsFontSizeToFit minimumFontScale={0.6} numberOfLines={1} weight='Light' size={14} color={colors.DARK_PURPLE} style={{textAlign: 'center'}}>
               {bot.address}
-            </Text>}
+            </RText>
+          )}
         </ButtonWithPopover>
       );
     };
 
-    static rightTitle = ({item}) => {
+    static rightButton = ({item}) => {
       const bot = botFactory.create({id: item});
       const isOwn = !bot.owner || bot.owner.isOwn;
-      return isOwn || bot.isPublic ? 'Share' : ' ';
-    };
-
-    static onRight = ({item}) => {
-      const bot = botFactory.create({id: item});
-      const isOwn = !bot.owner || bot.owner.isOwn;
-      isOwn || bot.isPublic ? Actions.botShareSelectFriends({item}) : null;
+      return isOwn || bot.isPublic ? (
+        <TouchableOpacity onPress={() => Actions.botShareSelectFriends({item})} style={{marginRight: 20 * k}}>
+          <Image source={require('../../images/shareIcon.png')} />
+        </TouchableOpacity>
+      ) : null;
     };
   };
 
 export default BotNavBarMixin;
-
-const styles = StyleSheet.create({
-  address: {textAlign: 'center', fontFamily: 'Roboto-Light', fontSize: 14, color: colors.DARK_PURPLE},
-});