src/boost/BoostConsoleScreen.js

@@ -17,6 +17,7 @@ import { CommonStyle } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
 import BoostTabBar from './BoostTabBar';
 import i18n from '../common/services/i18n.service';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * News feed list component
@@ -77,19 +78,21 @@ export default class BoostConsoleScreen extends Component {
     }
 
     const tabs = (<BoostTabBar />);
-
-    return <FlatList
-              ListHeaderComponent={tabs}
-              ListEmptyComponent={empty}
-              data={this.props.boost.list.entities.slice()}
-              renderItem={this.renderBoost}
-              keyExtractor={item => item.rowKey}
-              onRefresh={this.refresh}
-              refreshing={this.props.boost.list.refreshing}
-              onEndReached={this.loadFeed}
-              onEndReachedThreshold={0}
-              style={styles.listView}
-            />
+    const theme = ThemedStyles.style;
+    return (
+      <FlatList
+        ListHeaderComponent={tabs}
+        ListEmptyComponent={empty}
+        data={this.props.boost.list.entities.slice()}
+        renderItem={this.renderBoost}
+        keyExtractor={item => item.rowKey}
+        onRefresh={this.refresh}
+        refreshing={this.props.boost.list.refreshing}
+        onEndReached={this.loadFeed}
+        onEndReachedThreshold={0}
+        style={[theme.backgroundSecondary, theme.flexContainer]}
+      />
+    );
   }
 
   /**
@@ -118,10 +121,6 @@ export default class BoostConsoleScreen extends Component {
 }
 
 const styles = StyleSheet.create({
-  listView: {
-    backgroundColor: '#FFF',
-    flex: 1,
-  },
   buttons: {
     alignItems: 'center',
   },

src/boost/BoostTabBar.js

-import React, {
-    Component
-  } from 'react';
+import React, { Component } from 'react';
 
-  import {
-    inject,
-    observer
-  } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 
-  import {
-    Text,
-    TouchableOpacity,
-    StyleSheet,
-    View
-  } from 'react-native';
+import { Text, TouchableOpacity, StyleSheet, View } from 'react-native';
 
-  import { CommonStyle } from '../styles/Common';
-  import colors from '../styles/Colors';
-  import i18n from '../common/services/i18n.service';
+import { CommonStyle } from '../styles/Common';
+import colors from '../styles/Colors';
+import i18n from '../common/services/i18n.service';
+import ThemedStyles from '../styles/ThemedStyles';
 
-  /**
-   * Newsfeed top bar
-   */
-  @inject('boost')
-  @observer
-  export default class BoostTabBar extends Component {
-
-    selected(txt) {
-      const filter = this.props.boost.filter;
-      return filter == txt ? styles.tabSelected : null;
-    }
+/**
+ * Newsfeed top bar
+ */
+export default
+@inject('boost')
+@observer
+class BoostTabBar extends Component {
+  selected(txt) {
+    const filter = this.props.boost.filter;
+    return filter === txt ? styles.tabSelected : null;
+  }
 
-    render() {
-      return (
-        <View style={styles.container}>
-          <View style={styles.topbar}>
-            <TouchableOpacity style={[styles.tab, this.selected('peer')]} onPress={() => this.props.boost.setFilter('peer')}>
-              <Text style={CommonStyle.fontXS}>{i18n.t('boosts.tabOffers')}</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={[styles.tab, this.selected('newsfeed')]} onPress={() => this.props.boost.setFilter('newsfeed')}>
-              <Text style={CommonStyle.fontXS}>{i18n.t('boosts.tabNewsfeed')}</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={[styles.tab, this.selected('content')]} onPress={() => this.props.boost.setFilter('content')}>
-              <Text style={CommonStyle.fontXS}>{i18n.t('boosts.tabSidebar')}</Text>
-            </TouchableOpacity>
-          </View>
+  render() {
+    return (
+      <View style={[styles.container, ThemedStyles.style.backgroundSecondary]}>
+        <View style={styles.topbar}>
+          <TouchableOpacity
+            style={[styles.tab, this.selected('peer')]}
+            onPress={() => this.props.boost.setFilter('peer')}>
+            <Text style={CommonStyle.fontS}>{i18n.t('boosts.tabOffers')}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.tab, this.selected('newsfeed')]}
+            onPress={() => this.props.boost.setFilter('newsfeed')}>
+            <Text style={CommonStyle.fontS}>
+              {i18n.t('boosts.tabNewsfeed')}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.tab, this.selected('content')]}
+            onPress={() => this.props.boost.setFilter('content')}>
+            <Text style={CommonStyle.fontS}>{i18n.t('boosts.tabSidebar')}</Text>
+          </TouchableOpacity>
         </View>
-      )
-    }
+      </View>
+    );
   }
+}
 
-  //TODO: move to common style
-  const styles = StyleSheet.create({
-    container: {
-      height: 30,
-      display: 'flex',
-      flexDirection: 'row',
-      paddingTop: 5,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-      borderBottomColor: '#EEE',
-      backgroundColor: '#FFF',
-      shadowColor: 'black',
-      shadowOpacity: 0.1,
-      shadowRadius: StyleSheet.hairlineWidth,
-      shadowOffset: {
-        height: StyleSheet.hairlineWidth,
-      },
-      elevation: 4
-    },
-    topbar: {
-      flex: 1,
-      justifyContent: 'space-between',
-      flexDirection: 'row',
-    },
-    button: {
-      padding: 8,
-    },
-    tab: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderBottomWidth: 2,
-      borderBottomColor: '#FFF',
+//TODO: move to common style
+const styles = StyleSheet.create({
+  container: {
+    height: 30,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingTop: 5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#EEE',
+    shadowColor: 'black',
+    shadowOpacity: 0.1,
+    shadowRadius: StyleSheet.hairlineWidth,
+    shadowOffset: {
+      height: StyleSheet.hairlineWidth,
     },
-    tabSelected: {
-      borderBottomColor: colors.primary,
-    }
-  });
+    elevation: 4,
+  },
+  topbar: {
+    flex: 1,
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+  button: {
+    padding: 8,
+  },
+  tab: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomWidth: 2,
+    borderBottomColor: '#FFF',
+  },
+  tabSelected: {
+    borderBottomColor: colors.primary,
+  },
+});

src/boost/creator/BoostScreen.js

@@ -34,6 +34,7 @@ import BlockchainWalletService from '../../blockchain/wallet/BlockchainWalletSer
 import FeaturesService from '../../common/services/features.service';
 import readableError from '../../common/helpers/readable-error';
 import i18n from '../../common/services/i18n.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 class VisibleError extends Error {
   visible = true;
@@ -78,26 +79,7 @@ export default class BoostScreen extends Component {
     allowedTypes: {}
   };
 
-  /**
-   * Modal navigation
-   */
-  static navigationOptions = ({ navigation }) => ({
-    header: (
-      <View style={[CommonStyle.backgroundLight, CommonStyle.rowJustifyStart, { paddingTop: 16 }]}>
-        <Text style={[styles.titleText, CommonStyle.flexContainer, CommonStyle.padding2x]}>{i18n.t('boost')}</Text>
-        <Icon size={36} name="ios-close" onPress={() => navigation.goBack()} style={CommonStyle.padding2x} />
-      </View>
-    ),
-    transitionConfig: {
-      isModal: true
-    }
-  });
-
-  /**
-   * On component will mount
-   */
-  componentWillMount() {
-
+  componentDidMount() {
     if (!FeaturesService.has('crypto')) {
       FeaturesService.showAlert();
       return this.props.navigation.goBack();
@@ -107,9 +89,7 @@ export default class BoostScreen extends Component {
       .then(rates => {
         this.setState({ rates });
       });
-  }
 
-  componentDidMount() {
     this.buildAllowedTypes();
   }
 
@@ -590,8 +570,10 @@ export default class BoostScreen extends Component {
       amountTitle = i18n.t('boosts.whatIsYourOffer');
     }
 
+    const theme = ThemedStyles.style;
+
     return (
-      <ScrollView style={[CommonStyle.flexContainer, CommonStyle.backgroundLight, CommonStyle.padding2x]}>
+      <ScrollView style={[CommonStyle.flexContainer, theme.backgroundSecondary, CommonStyle.padding2x]}>
         <Text style={[styles.subtitleText, CommonStyle.paddingBottom]}>{i18n.t('boosts.boostType')}</Text>
         <TypeSelector onChange={this.changeType} value={this.state.type} allowedTypes={this.state.allowedTypes} />
 
@@ -685,7 +667,6 @@ const styles = StyleSheet.create({
     fontSize: 14
   },
   changeTarget: {
-    color: colors.greyed,
     fontSize: 12
   },
   error: {

src/boost/creator/PaymentSelector.js

@@ -12,6 +12,7 @@ import currency from '../../common/helpers/currency';
 import Touchable from '../../common/components/Touchable';
 import FeaturesService from '../../common/services/features.service';
 import i18n from '../../common/services/i18n.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Type Selector
@@ -36,12 +37,12 @@ export default class PaymentSelector extends PureComponent {
    */
   getOption(method, text, value, selected) {
     const isSelected = this.props.value === method;
-    const colorStlye = isSelected ? CommonStyle.colorDark : CommonStyle.colorMedium;
+    const colorStlye = isSelected ? ThemedStyles.style.colorPrimaryText : ThemedStyles.colorSecondaryText;
     return (
       <Touchable style={[CommonStyle.flexContainer, CommonStyle.paddingRight]} onPress={() => this.change(method)}>
         <View>
           <Text style={[CommonStyle.fontXL, colorStlye]}>{currency(!isNaN(value) ? value : 0, method, 'prefix')}</Text>
-          <Text style={[CommonStyle.fontXS, colorStlye]}>{text}</Text>
+          <Text style={[CommonStyle.fontS, colorStlye]}>{text}</Text>
           {isSelected && false && selected}
         </View>
       </Touchable>

src/boost/creator/TypeSelector.js

@@ -11,6 +11,7 @@ import {
 
 import { CommonStyle } from '../../styles/Common';
 import i18n from '../../common/services/i18n.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Type Selector
@@ -35,13 +36,13 @@ export default class TypeSelector extends PureComponent {
    */
   getOption(type, title, subtitle, selected) {
     const isSelected = this.props.value === type,
-      colorStyle = isSelected ? CommonStyle.colorDark : CommonStyle.colorMedium;
+      colorStyle = isSelected ? [ThemedStyles.style.colorPrimaryText, ThemedStyles.style.bold] : ThemedStyles.colorSecondaryText;
 
     return (
       <TouchableOpacity style={[CommonStyle.flexContainer, CommonStyle.paddingRight]} onPress={() => this.change(type)}>
         <View>
           <Text style={[CommonStyle.fontXL, colorStyle]}>{title}</Text>
-          <Text style={[CommonStyle.fontXS, colorStyle]}>{subtitle}</Text>
+          <Text style={[CommonStyle.fontS, colorStyle]}>{subtitle}</Text>
           {isSelected && selected}
         </View>
       </TouchableOpacity>
@@ -52,7 +53,7 @@ export default class TypeSelector extends PureComponent {
    * Render
    */
   render() {
-    const selected = <Text style={[CommonStyle.fontS, CommonStyle.colorPrimary]}>{i18n.t('boosts.selected')}</Text>,
+    const selected = <Text style={[CommonStyle.fontM, CommonStyle.colorPrimary]}>{i18n.t('boosts.selected')}</Text>,
       NewsfeedPartial = this.getOption('newsfeed', i18n.t('boosts.feeds'), i18n.t('boosts.feedsDescription'), selected),
       P2pPartial = this.getOption('p2p', i18n.t('boosts.offers'), i18n.t('boosts.offersDescription'), selected),
       ContentPartial = this.getOption('content',  i18n.t('boosts.sidebars'), i18n.t('boosts.sidebarsDescription'), selected),

src/discovery/DiscoveryScreen.js

@@ -173,7 +173,7 @@ class DiscoveryScreen extends Component {
     switch (this.props.discovery.filters.type ) {
       case 'images':
         change.changed.forEach(c => {
-          if (c.item.isGif()) {
+          if (c.item.isGif && c.item.isGif()) {
             c.item.setVisible(c.isViewable);
           }
         })

src/groups/GroupsListScreen.js

@@ -27,6 +27,7 @@ import GroupsListItem from './GroupsListItem';
 import withPreventDoubleTap from '../common/components/PreventDoubleTap';
 import { withErrorBoundary } from '../common/components/ErrorBoundary';
 import i18n from '../common/services/i18n.service';
+import ThemedStyles from '../styles/ThemedStyles';
 
 DebouncedGroupsListItem = withErrorBoundary(withPreventDoubleTap(GroupsListItem, "Can't show this group"));
 
@@ -107,7 +108,7 @@ export default class GroupsListScreen extends Component {
         refreshing={list.refreshing}
         onEndReached={this.loadMore}
         // onEndReachedThreshold={0}
-        style={styles.list}
+        style={[styles.list, ThemedStyles.style.backgroundSecondary]}
         initialNumToRender={12}
         removeClippedSubviews={true}
       />
@@ -141,6 +142,5 @@ const styles = StyleSheet.create({
     borderTopWidth: 0,
     borderBottomWidth: 0,
     marginTop: 0,
-    backgroundColor: '#FFF'
   }
 });

src/navigation/NavigationStack.js

@@ -58,6 +58,7 @@ import ThemedStyles from '../styles/ThemedStyles';
 import { View } from 'react-native';
 import MessengerScreen from '../messenger/MessengerScreen';
 import Topbar from '../topbar/Topbar';
+import i18n from '../common/services/i18n.service';
 
 
 const hideHeader = {headerShown: false};
@@ -103,7 +104,7 @@ const AppStack = function(props) {
       <AppStackNav.Screen name="GroupView" component={GroupViewScreen} options={hideHeader}/>
       <AppStackNav.Screen name="Wallet" component={WalletScreen}/>
       <AppStackNav.Screen name="BlogList" component={BlogsListScreen}/>
-      <AppStackNav.Screen name="BoostConsole" component={BoostConsoleScreen}/>
+      <AppStackNav.Screen name="BoostConsole" component={BoostConsoleScreen} options={{title: i18n.t('boost')}}/>
       <AppStackNav.Screen name="BlogView" component={BlogsViewScreen} options={hideHeader}/>
       <AppStackNav.Screen name="WireFab" component={FabScreen}/>
       <AppStackNav.Screen name="WalletHistory" component={WalletHistoryScreen}/>

src/wallet/WalletOverviewView.js

@@ -76,7 +76,6 @@ const styles = StyleSheet.create({
   },
   view: {
     flex: 1,
-    backgroundColor: 'white',
   },
   cell: {
     paddingTop: 8,
@@ -98,7 +97,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
     // fontWeight: '800',
     fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
-    color: '#444',
     flex: 1,
   }
 });

src/wallet/WalletScreen.js

@@ -29,6 +29,7 @@ import { CommonStyle } from '../styles/Common';
 import FeaturesService from '../common/services/features.service';
 import shareService from "../share/ShareService";
 import i18n from '../common/services/i18n.service';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Wallet screen
@@ -71,7 +72,7 @@ export default class WalletScreen extends Component {
   render() {
     return (
       <View style={CommonStyle.flexContainer}>
-        <ScrollView style={ styles.mainContainer }
+        <ScrollView style={ ThemedStyles.style.backgroundSecondary }
           keyboardShouldPersistTaps='always'>
           <WalletBalanceTokens navigation={this.props.navigation}/>
           <WalletOverviewView />
@@ -80,7 +81,7 @@ export default class WalletScreen extends Component {
 
             <TouchableOpacity style={styles.itemContainer} onPress={ () => this.props.navigation.navigate('Transactions')} >
               <View style={styles.iconContainer}>
-                <Icon name="history" size={24} style={ styles.icon } />
+                <Icon name="history" size={24} style={ ThemedStyles.style.colorIcon } />
               </View>
               <View style={styles.item}>
                 <Text style={styles.title}>{i18n.t('wallet.transactionsTitle')}</Text>
@@ -90,7 +91,7 @@ export default class WalletScreen extends Component {
 
             { FeaturesService.has('crypto') && <TouchableOpacity style={styles.itemContainer} onPress={ () => this.props.navigation.navigate('Withdraw')} >
               <View style={styles.iconContainer}>
-                <Icon name="local-atm" size={24} style={ styles.icon } />
+                <Icon name="local-atm" size={24} style={ ThemedStyles.style.colorIcon } />
               </View>
               <View style={styles.item}>
                 <Text style={styles.title}>{i18n.t('wallet.withdrawTitle')}</Text>
@@ -100,7 +101,7 @@ export default class WalletScreen extends Component {
 
             <TouchableOpacity style={styles.itemContainer} onPress={ () => this.props.navigation.navigate('Contributions')} >
               <View style={styles.iconContainer}>
-                <Icon name="stars" size={24} style={ styles.icon } />
+                <Icon name="stars" size={24} style={ ThemedStyles.style.colorIcon } />
               </View>
               <View style={styles.item}>
                 <Text style={styles.title}>{i18n.t('wallet.contributionsTitle')}</Text>
@@ -110,7 +111,7 @@ export default class WalletScreen extends Component {
 
             {FeaturesService.has('crypto') && <TouchableOpacity style={styles.itemContainer} onPress={ () => this.props.navigation.navigate('BlockchainWallet') }>
               <View style={styles.iconContainer}>
-                <Icon name="settings" size={24} style={ styles.icon } />
+                <Icon name="settings" size={24} style={ ThemedStyles.style.colorIcon } />
               </View>
               <View style={styles.item}>
                 <Text style={styles.title}>{i18n.t('wallet.addressesTitle')}</Text>
@@ -120,7 +121,7 @@ export default class WalletScreen extends Component {
 
             <TouchableOpacity style={styles.itemContainer} onPress={ () => shareService.invite(this.props.user.me.guid)} >
               <View style={styles.iconContainer}>
-                <Icon name="share" size={24} style={ styles.icon } />
+                <Icon name="share" size={24} style={ ThemedStyles.style.colorIcon } />
               </View>
               <View style={styles.item}>
                 <Text style={styles.title}>{i18n.t('wallet.inviteFriend')}</Text>
@@ -140,16 +141,12 @@ const styles = StyleSheet.create({
     paddingTop: 0,
     fontSize: 13,
     paddingTop: 20,
-    color: '#888',
   },
   iconContainer: {
     width: 36,
     flexDirection: 'column',
     justifyContent: 'center',
   },
-  icon: {
-    color: '#455a64',
-  },
   points: {
     paddingTop: 20,
     color: 'green',
@@ -159,11 +156,9 @@ const styles = StyleSheet.create({
   title: {
     fontWeight: 'bold',
     fontFamily: 'Roboto',
-    color: '#444',
   },
   subtitle: {
     fontSize: 12,
-    color: '#888'
   },
   itemContainer: {
     padding: 16,
@@ -175,8 +170,5 @@ const styles = StyleSheet.create({
   },
   datailsContainer: {
     padding: 16,
-  },
-  mainContainer: {
-    backgroundColor: '#fff'
   }
 });

src/wallet/balances/WalletBalanceTokens.js

@@ -42,7 +42,9 @@ export default class WalletBalanceTokens extends Component {
    */
   componentWillUnmount() {
     // clear data to free memory
-    this.wallet.ledger.list.clearList();
+
+    this.props.wallet.ledger.list.clearList();
+
     if (this.disposeEnter) {
       this.disposeEnter();
     }
@@ -120,11 +122,9 @@ const styles = StyleSheet.create({
   addressesLabel: {
     fontWeight: '700',
     fontFamily: 'Roboto',
-    color: '#444',
   },
   addressesAddress: {
     fontSize: 8,
-    color: '#888',
   },
   addressesBalance: {
     textAlign: 'right',
@@ -136,7 +136,6 @@ const styles = StyleSheet.create({
   addressesEthBalance: {
     fontSize: 12,
     fontWeight: '400',
-    color: '#444'
   },
   logo: {
     width: 100,
@@ -156,6 +155,5 @@ const styles = StyleSheet.create({
     fontSize: 32,
     fontWeight: '700',
     fontFamily: 'Roboto',
-    color: '#444',
   }
 });