...
 
......@@ -21,6 +21,7 @@ import withPreventDoubleTap from '../common/components/PreventDoubleTap';
import { CommonStyle as CS } from '../styles/Common';
import { FLAG_SUBSCRIBE, FLAG_MESSAGE, FLAG_EDIT_CHANNEL, FLAG_WIRE } from '../common/Permissions';
import ChannelModeSelector from './ChannelModeSelector';
import ThemedStyles from '../styles/ThemedStyles';
const ButtonCustom = withPreventDoubleTap(Button);
......@@ -154,7 +155,7 @@ class ChannelActions extends Component {
{ showSubscribe &&
<ButtonCustom
onPress={this.toggleSubscription}
containerStyle={[CS.rowJustifyCenter, CS.marginLeft0x]}
containerStyle={[CS.rowJustifyCenter, CS.marginLeft]}
accessibilityLabel={i18n.t('channel.subscribeMessage')}
text={i18n.t('channel.subscribe')}
testID="SubscribeButton"
......@@ -163,7 +164,7 @@ class ChannelActions extends Component {
{ showMessage &&
<ButtonCustom
onPress={ this.navToConversation }
containerStyle={[CS.rowJustifyCenter, CS.marginLeft0x]}
containerStyle={[CS.rowJustifyCenter, CS.marginLeft]}
accessibilityLabel={i18n.t('channel.sendMessage')}
text={i18n.t('channel.message')}
testID="SendMessageButton"
......@@ -172,7 +173,7 @@ class ChannelActions extends Component {
{ showEdit &&
<ButtonCustom
onPress={this.onEditAction}
containerStyle={[CS.rowJustifyCenter, CS.marginLeft0x]}
containerStyle={[CS.rowJustifyCenter, CS.marginLeft]}
accessibilityLabel={this.props.editing ? i18n.t('channel.saveChanges') : i18n.t('channel.editChannel')}
text={this.props.editing ? i18n.t('save') : i18n.t('edit')}
loading={this.props.saving}
......@@ -186,20 +187,20 @@ class ChannelActions extends Component {
<ButtonCustom
onPress={ this.openWire }
accessibilityLabel="Wire Button"
containerStyle={[CS.rowJustifyCenter]}
containerStyle={[CS.rowJustifyCenter, CS.marginLeft]}
textStyle={[CS.marginLeft, CS.marginRight]}
icon="ios-flash"
text="Wire"
testID="WireButton"
>
<Icon name='ios-flash' size={18} style={[CS.marginLeft, CS.colorPrimary]} />
<Icon name='ios-flash' size={16} style={[CS.marginLeft, ThemedStyles.style.colorPrimaryText]} />
</ButtonCustom>
}
{ !isOwner &&
<ButtonCustom
onPress={ this.showActionSheet }
accessibilityLabel={i18n.t('more')}
containerStyle={[CS.rowJustifyCenter]}
containerStyle={[CS.rowJustifyCenter, CS.marginLeft]}
textStyle={[CS.marginLeft, CS.marginRight]}
icon="ios-flash"
text={i18n.t('more')}
......
......@@ -81,20 +81,20 @@ class Toolbar extends Component {
<View style={[styles.container, theme.backgroundPrimary]}>
<View style={styles.topbar}>
<TouchableOpacity style={styles.button} onPress={this.filterFeed} testID="FeedButton">
<Icon name="list" size={ICON_SIZE} style={[styles.icon, filter == 'feed' ? theme.colorLink : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'feed' ? theme.colorLink : theme.colorIcon]}>{i18n.t('feed').toUpperCase()}</Text>
<Icon name="list" size={ICON_SIZE} style={[styles.icon, filter == 'feed' ? theme.colorIconActive : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'feed' ? theme.colorIconActive : theme.colorIcon]}>{i18n.t('feed').toUpperCase()}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={this.filterImages} testID="ImagesButton">
<IonIcon name="md-image" size={ICON_SIZE} style={[styles.icon, filter == 'images' ? theme.colorLink : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'images' ? theme.colorLink : theme.colorIcon]}>{i18n.t('images').toUpperCase()}</Text>
<IonIcon name="md-image" size={ICON_SIZE} style={[styles.icon, filter == 'images' ? theme.colorIconActive : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'images' ? theme.colorIconActive : theme.colorIcon]}>{i18n.t('images').toUpperCase()}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={this.filterVideos} testID="VideosButton">
<IonIcon name="md-videocam" size={ICON_SIZE} style={[styles.icon, filter == 'videos' ? theme.colorLink : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'videos' ? theme.colorLink : theme.colorIcon]}>{i18n.t('videos').toUpperCase()}</Text>
<IonIcon name="md-videocam" size={ICON_SIZE} style={[styles.icon, filter == 'videos' ? theme.colorIconActive : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'videos' ? theme.colorIconActive : theme.colorIcon]}>{i18n.t('videos').toUpperCase()}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={this.filterBlogs} testID="BlogsButton">
<Icon name="subject" size={ICON_SIZE} style={[styles.icon, filter == 'blogs' ? theme.colorLink : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'blogs' ? theme.colorLink : theme.colorIcon]}>{i18n.t('blogs.blogs').toUpperCase()}</Text>
<Icon name="subject" size={ICON_SIZE} style={[styles.icon, filter == 'blogs' ? theme.colorIconActive : theme.colorIcon]} />
<Text style={[styles.buttontext, filter == 'blogs' ? theme.colorIconActive : theme.colorIcon]}>{i18n.t('blogs.blogs').toUpperCase()}</Text>
</TouchableOpacity>
{rewards}
{subscriptionRequests}
......
......@@ -11,7 +11,7 @@ import {
} from 'react-native';
import { ComponentsStyle } from '../../styles/Components';
import colors from '../../styles/Colors';
import ThemedStyles from '../../styles/ThemedStyles';
/**
* Custom Button component
......@@ -22,7 +22,6 @@ export default class Button extends Component {
* Default props
*/
static defaultProps = {
color: colors.primary,
loading: false
};
......@@ -31,12 +30,14 @@ export default class Button extends Component {
*/
static propTypes = {
text: PropTypes.string.isRequired
}
};
/**
* Render
*/
render() {
const theme = ThemedStyles.style;
const {
onPress,
textColor,
......@@ -51,16 +52,19 @@ export default class Button extends Component {
...extraProps
} = this.props;
let background = 'white';
let mainColor = color;
let background = ThemedStyles.getColor('primary_button');
let mainColor = color || ThemedStyles.getColor('primary_text');
if (inverted !== undefined) {
background = color;
mainColor = 'white';
background = mainColor;
mainColor = ThemedStyles.getColor('primary_button');
}
const style = {backgroundColor: background, borderRadius: 2};
const body = this.props.loading ?
<ActivityIndicator color={mainColor}/> :
<ActivityIndicator color={mainColor} /> :
<Text style={[{ color: textColor || mainColor }, textStyle]}> {this.props.text} </Text>;
const onButtonPress = this.props.loading ? null : onPress;
......@@ -71,7 +75,7 @@ export default class Button extends Component {
disabled={disabled}
underlayColor='transparent'
accessibilityLabel={accessibilityLabel}
style={[ComponentsStyle.commonButton, {borderColor: mainColor, backgroundColor: background}, containerStyle]}
style={[theme.rowJustifyCenter, theme.centered, theme.padding, style, containerStyle]}
{...extraProps}
>
{children}
......
......@@ -17,7 +17,6 @@ import ThemedStyles from '../../styles/ThemedStyles';
* Search Component
*/
export default class SearchView extends PureComponent {
/**
* Default props
*/
......
......@@ -81,7 +81,7 @@ export default class ToolbarItem extends PureComponent {
} = this.props;
if (selected) {
return (selectedTextStyle) ? [styles.buttonSelectedText, CommonStyle.fontS, ThemedStyles.style.colorLink, selectedTextStyle] : [styles.buttonSelectedText, CommonStyle.fontS, ThemedStyles.style.colorLink];
return (selectedTextStyle) ? [styles.buttonSelectedText, CommonStyle.fontS, ThemedStyles.style.colorIconActive, selectedTextStyle] : [styles.buttonSelectedText, CommonStyle.fontS, ThemedStyles.style.colorIconActive];
}
return (textStyle) ? [styles.buttonText, CommonStyle.fontS, textStyle] : [styles.buttonText, CommonStyle.fontS];
......@@ -104,7 +104,7 @@ export default class ToolbarItem extends PureComponent {
const size = iconSize || 18;
const iconContainerStyle = {height: size + 4};
const style = selected ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon;
const style = selected ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon;
if (!icon) {
return (
<View style={iconContainerStyle}>
......
......@@ -38,7 +38,7 @@ export const CODE_PUSH_TOKEN = '';
* Plataform dependant or fixed features
*/
export const MINDS_FEATURES = {
crypto: Platform.OS === 'ios' ? false : true,
crypto: Platform.OS === 'ios' ? true : true,
'onboarding-december-2019': true,
'navigation-2020': true,
};
......
......@@ -245,7 +245,7 @@ class DiscoveryScreen extends Component {
renderItem={renderRow}
ListFooterComponent={footer}
CollapsibleHeaderComponent={this.getHeaders()}
headerHeight={(GOOGLE_PLAY_STORE && discovery.filters.type !== 'channels') ? 94 : 144}
headerHeight={(GOOGLE_PLAY_STORE && discovery.filters.type !== 'channels' || discovery.filters.type === 'lastchannels') ? 94 : 144}
ListEmptyComponent={this.getEmptyList()}
keyExtractor={this.keyExtractor}
onEndReached={this.loadMore}
......@@ -337,60 +337,60 @@ class DiscoveryScreen extends Component {
<View style={CS.columnAlignCenter}>
<IonIcon
name="ios-infinite"
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'activities' ? ThemedStyles.style.colorLink : null ]}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'activities' ? ThemedStyles.style.colorIconActive : null ]}
size={ this.iconSize }
/>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'activities' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.all')}</Text>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'activities' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.all')}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeChannels } {...testID('Discovery Channels')}>
<View style={CS.columnAlignCenter}>
<Icon
name="people"
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'channels' ? ThemedStyles.style.colorLink : null ]}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'channels' ? ThemedStyles.style.colorIconActive : null ]}
size={ this.iconSize }
/>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'channels' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.channels')}</Text>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'channels' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.channels')}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeVideos } {...testID('Discovery Videos')}>
<View style={CS.columnAlignCenter}>
<IonIcon
name={this.state.showFeed !== false && filtersStore.type == 'videos' ? 'md-apps' : 'md-videocam'}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'videos' ? ThemedStyles.style.colorLink : null ]}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'videos' ? ThemedStyles.style.colorIconActive : null ]}
size={this.iconSize}
/>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'videos' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.videos')}</Text>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'videos' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.videos')}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeImages } {...testID('Discovery Images')}>
<View style={CS.columnAlignCenter}>
<IonIcon
name={this.state.showFeed !== false && filtersStore.type == 'images' ? 'md-apps' : 'md-photos'}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'images' ? ThemedStyles.style.colorLink : null ]}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'images' ? ThemedStyles.style.colorIconActive : null ]}
size={ this.iconSize }
/>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'images' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.images')}</Text>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'images' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.images')}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeBlogs } {...testID('Discovery Blogs')}>
<View style={CS.columnAlignCenter}>
<Icon
name="subject"
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'blogs' ? ThemedStyles.style.colorLink : null ]}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'blogs' ? ThemedStyles.style.colorIconActive : null ]}
size={ this.iconSize }
/>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'blogs' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.blogs')}</Text>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'blogs' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.blogs')}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeGroups } {...testID('Discovery Groups')}>
<View style={CS.columnAlignCenter}>
<Icon
name="group-work"
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'groups' ? ThemedStyles.style.colorLink : null ]}
style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'groups' ? ThemedStyles.style.colorIconActive : null ]}
size={ this.iconSize }
/>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'groups' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.groups')}</Text>
<Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'groups' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.groups')}</Text>
</View>
</TouchableHighlight>
</View>
......@@ -417,7 +417,7 @@ class DiscoveryScreen extends Component {
<DiscoveryFilters store={filtersStore} onTagsChange={this.onTagSelectionChange} onSelectOne={this.onSelectOne}/>
{/* {!discovery.searchtext && <TagsSubBar onChange={this.onTagSelectionChange}/>} */}
</View> :
<Text style={[CS.fontM, CS.backgroundPrimary, CS.colorWhite, CS.textCenter, CS.padding]}>{i18n.t('discovery.recentlyVisited')}</Text>;
<Text style={[CS.fontXL, ThemedStyles.style.backgroundTertiary, CS.textCenter, CS.padding2x]}>{i18n.t('discovery.recentlyVisited')}</Text>;
return (
<View style={[CS.shadow, ThemedStyles.style.backgroundSecondary]}>
......
......@@ -9,6 +9,7 @@ import {observer} from 'mobx-react';
import ExplicitOverlay from '../common/components/explicit/ExplicitOverlay';
import {CommonStyle as CS} from '../styles/Common';
import i18n from '../common/services/i18n.service';
import ThemedStyles from '../styles/ThemedStyles';
export default
@observer
......@@ -108,7 +109,7 @@ class DiscoveryTile extends Component {
<View
style={[
CS.positionAbsoluteTop,
CS.backgroundGreyed,
ThemedStyles.style.backgroundSeparator,
CS.centered,
styles.boundary,
]}>
......@@ -120,7 +121,7 @@ class DiscoveryTile extends Component {
<TouchableOpacity
onPress={this._onPress}
style={[this.state.style, styles.tile]}>
<View style={[CS.flexContainer, CS.backgroundGreyed]}>
<View style={[CS.flexContainer, ThemedStyles.style.backgroundSeparator]}>
{boundary}
<FastImage
source={url}
......
......@@ -36,9 +36,10 @@ import ThemedStyles from '../styles/ThemedStyles';
/**
* Newsfeed filters
*/
export default
@inject('hashtag')
@observer
export default class NewsfeedFilters extends Component {
class NewsfeedFilters extends Component {
sizeY = 60;
......@@ -110,7 +111,7 @@ export default class NewsfeedFilters extends Component {
return (
<View style={CS.rowJustifyStart}>
<TouchableHighlight
style={[CS.padding, CS.paddingLeft2x, CS.paddingRight2x, hashActive ? CS.backgroundPrimary : CS.backgroundLight, {borderBottomRightRadius:25, borderTopRightRadius:25}]}
style={[CS.padding, CS.paddingLeft2x, CS.paddingRight2x, hashActive ? CS.backgroundPrimary : themed.backgroundTertiary, {borderBottomRightRadius:25, borderTopRightRadius:25}]}
onPress={this.showDrawer}
underlayColor='#fff'
{...testID('Filter hashtags selector button')}
......@@ -118,10 +119,10 @@ export default class NewsfeedFilters extends Component {
<View style={[CS.rowJustifyStart, CS.centered]}>
<IconMC
name="pound"
style={[CS.centered, hashActive ? CS.colorWhite : CS.colorGreyed, {paddingTop:2}]}
style={[CS.centered, (hashActive ? themed.colorWhite : themed.colorTertiaryText), {paddingTop:2}]}
size={ 20 }
/>
{this.props.hashtag.hashtag ? <Text style={[CS.colorWhite, CS.fontM]}>{this.props.hashtag.hashtag}</Text> : null}
{this.props.hashtag.hashtag ? <Text style={[CS.colorIcon, CS.fontM]}>{this.props.hashtag.hashtag}</Text> : null}
</View>
</TouchableHighlight>
<View style={[CS.rowJustifySpaceEvenly, CS.flexContainer]}>
......@@ -135,10 +136,25 @@ export default class NewsfeedFilters extends Component {
<View style={[CS.rowJustifyCenter, CS.centered]}>
<Icon
name="whatshot"
style={[CS.centered, store.filter == 'hot' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : null), {paddingTop:2} ]}
style={[CS.centered, store.filter == 'hot' ? themed.colorIconActive : (disableHotLatest ? themed.colorSeparator : themed.colorIcon), {paddingTop:2} ]}
size={ 22 }
/>
{!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'hot' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : themed.colorIcon), CS.paddingLeft]}>{i18n.t('newsfeedFilters.hot')}</Text> : null}
{!this.props.hashtag.hashtag ? (
<Text
style={[
CS.fontM,
store.filter === 'hot'
? themed.colorIconActive
: (
disableHotLatest
? themed.colorSeparator
: themed.colorIcon
),
CS.paddingLeft,
]}>
{i18n.t('newsfeedFilters.hot')}
</Text>
) : null}
</View>
</TouchableHighlight>
<View style={CS.rowJustifyCenter}>
......@@ -146,10 +162,10 @@ export default class NewsfeedFilters extends Component {
<View style={[CS.rowJustifyCenter, CS.centered]}>
<Icon
name="trending-up"
style={[CS.centered, store.filter == 'top' ? themed.colorLink : themed.colorIcon, {paddingTop:2} ]}
style={[CS.centered, store.filter == 'top' ? themed.colorIconActive : themed.colorIcon, {paddingTop:2} ]}
size={ 22 }
/>
{!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'top' ? themed.colorLink : themed.colorIcon, CS.paddingLeft]}>{i18n.t('newsfeedFilters.top')}</Text> : null}
{!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'top' ? themed.colorIconActive : themed.colorIcon, CS.paddingLeft]}>{i18n.t('newsfeedFilters.top')}</Text> : null}
</View>
</TouchableHighlight>
{store.filter == 'top' &&
......@@ -158,10 +174,10 @@ export default class NewsfeedFilters extends Component {
button={
<TouchableHighlight style={[CS.padding]} onPress={this.showMenu} >
<View style={[CS.rowJustifyCenter, CS.centered]}>
<Text style={[CS.fontM, store.filter == 'top' ? themed.colorLink : themed.colorIcon, CS.paddingLeft, CS.paddingRight]}>{store.period}</Text>
<Text style={[CS.fontM, store.filter == 'top' ? themed.colorIconActive : themed.colorIcon, CS.paddingLeft, CS.paddingRight]}>{store.period}</Text>
<IonIcon
name="ios-arrow-down"
style={[CS.centered, store.filter == 'top' ? themed.colorLink : themed.colorIcon, {paddingTop:2} ]}
style={[CS.centered, store.filter == 'top' ? themed.colorIconActive : themed.colorIcon, {paddingTop:2} ]}
size={ 22 }
/>
</View>
......@@ -186,10 +202,10 @@ export default class NewsfeedFilters extends Component {
<View style={[CS.rowJustifyCenter, CS.centered]}>
<Icon
name="timelapse"
style={[CS.centered, store.filter == 'latest' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : themed.colorIcon), {paddingTop:2} ]}
style={[CS.centered, store.filter == 'latest' ? themed.colorIconActive : (disableHotLatest ? themed.colorSeparator : themed.colorIcon), {paddingTop:2} ]}
size={ 22 }
/>
{!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'latest' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : themed.colorIcon), CS.paddingLeft]}>{i18n.t('newsfeedFilters.latest')}</Text> : null}
{!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'latest' ? themed.colorIconActive : (disableHotLatest ? themed.colorSeparator : themed.colorIcon), CS.paddingLeft]}>{i18n.t('newsfeedFilters.latest')}</Text> : null}
</View>
</TouchableHighlight>
</View>
......
......@@ -39,6 +39,7 @@ import i18n from '../common/services/i18n.service';
import featuresService from '../common/services/features.service';
import FeedList from '../common/components/FeedList';
import { FLAG_CREATE_POST, FLAG_APPOINT_MODERATOR, FLAG_VIEW } from '../common/Permissions';
import ThemedStyles from '../styles/ThemedStyles';
/**
* Groups view screen
......@@ -221,7 +222,7 @@ export default class GroupViewScreen extends Component {
case 'desc':
const description = entities.decodeHTML(group.group.briefdescription).trim();
return (
<ScrollView style={CS.backgroundLight}>
<ScrollView>
{header}
<View style={CS.padding2x}>
<Tags navigation={this.props.navigation}>{description}</Tags>
......@@ -356,7 +357,7 @@ export default class GroupViewScreen extends Component {
null;
return (
<View style={CS.flexContainer}>
<View style={[CS.flexContainer, ThemedStyles.style.backgroundSecondary]}>
{showPosterFab && <CaptureFab navigation={this.props.navigation} group={group} /> }
{this.getList()}
{memberActionSheet}
......@@ -366,10 +367,6 @@ export default class GroupViewScreen extends Component {
}
const styles = StyleSheet.create({
listView: {
backgroundColor: '#FFF',
flex: 1,
},
gobackicon: {
position: 'absolute',
left: 0,
......
......@@ -83,9 +83,9 @@ class GroupsListItem extends Component {
*/
getButton = () => {
return this.props.group['is:member'] ? (
<Button text="Leave" onPress={this.leave} color={colors.darkGreyed} />
<Button text="Leave" onPress={this.leave} />
) : (
<Button text="Join" onPress={this.join} color={colors.darkGreyed} />
<Button text="Join" onPress={this.join} />
);
};
......
......@@ -32,6 +32,7 @@ import colors from '../../styles/Colors';
import i18n from '../../common/services/i18n.service';
import featuresService from '../../common/services/features.service';
import { FLAG_JOIN, FLAG_JOIN_GATHERING } from '../../common/Permissions';
import Button from '../../common/components/Button';
/**
* Group Header
......@@ -76,27 +77,27 @@ export default class GroupHeader extends Component {
if (!group['is:member']) {
return (
<TouchableHighlight
onPress={() => { store.join(group.guid) }}
underlayColor='transparent'
style={ComponentsStyle.bluebutton}
<Button
onPress={ () => { store.join(group.guid) } }
accessibilityLabel={i18n.t('groups.subscribeMessage')}
disabled={store.saving}
>
<Text style={CommonStyle.colorPrimary} ref="btntext"> {i18n.t('join')} </Text>
</TouchableHighlight>
containerStyle={[CommonStyle.rowJustifyCenter, CommonStyle.marginLeft]}
textStyle={[CommonStyle.marginLeft, CommonStyle.marginRight]}
icon="ios-flash"
text={i18n.t('join')}
loading={store.saving}
/>
);
} else {
return (
<TouchableHighlight
onPress={() => { store.leave(group.guid) }}
underlayColor='transparent'
style={ComponentsStyle.bluebutton}
<Button
onPress={ () => { store.leave(group.guid) } }
accessibilityLabel={i18n.t('groups.leaveMessage')}
disabled={store.saving}
>
<Text style={CommonStyle.colorPrimary} ref="btntext"> {i18n.t('leave')} </Text>
</TouchableHighlight>
containerStyle={[CommonStyle.rowJustifyCenter, CommonStyle.marginLeft]}
textStyle={[CommonStyle.marginLeft, CommonStyle.marginRight]}
icon="ios-flash"
text={i18n.t('leave')}
loading={store.saving}
/>
);
}
}
......
......@@ -37,7 +37,7 @@ class CommentsAction extends Component {
const canComment = this.props.entity.allow_comments && this.props.entity.can(FLAG_CREATE_COMMENT);
const color = canComment ? (this.props.entity['comments:count'] > 0 ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon) : CS.colorLightGreyed;
const color = canComment ? (this.props.entity['comments:count'] > 0 ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon) : CS.colorLightGreyed;
return (
<TouchableOpacityCustom style={[CS.flexContainer, CS.centered, CS.rowJustifyCenter]} onPress={this.openComments} testID={this.props.testID}>
......
......@@ -24,7 +24,7 @@ const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);
export default function({ entity, size = 20, vertical = false }) {
const color = entity.can(FLAG_REMIND)
? entity.reminds > 0
? ThemedStyles.style.colorLink
? ThemedStyles.style.colorIconActive
: ThemedStyles.style.colorIcon
: CS.colorLightGreyed;
......
......@@ -62,7 +62,7 @@ class ThumbUpAction extends Component {
const canVote = entity.can(FLAG_VOTE);
const color = canVote ? (this.voted ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon) : CS.colorLightGreyed;
const color = canVote ? (this.voted ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon) : CS.colorLightGreyed;
return (
<TouchableOpacityCustom
......
......@@ -14,6 +14,7 @@ import IonIcon from 'react-native-vector-icons/Ionicons';
import { CommonStyle } from '../../../styles/Common';
import featuresService from '../../../common/services/features.service';
import withPreventDoubleTap from '../../../common/components/PreventDoubleTap';
import ThemedStyles from '../../../styles/ThemedStyles';
// prevent double tap in touchable
const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);
......@@ -29,7 +30,7 @@ export default class WireAction extends PureComponent {
render() {
return (
<TouchableOpacityCustom style={[CommonStyle.flexContainer, CommonStyle.centered]} onPress={this.openWire}>
<IonIcon color='rgb(70, 144, 214)' name='ios-flash' size={40} />
<IonIcon style={ThemedStyles.style.colorIconActive} name='ios-flash' size={40} />
</TouchableOpacityCustom>
)
}
......
......@@ -34,19 +34,19 @@ export default class NotificacionsTopbar extends Component {
<View style={[styles.container, CommonStyle.shadow, ThemedStyles.style.backgroundSecondary]}>
<View style={styles.topbar}>
<View style={[styles.tab, bstyle, this.selected('all')]}>
<Icon name="bell" size={22} style={[styles.button, filter=='all' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={()=> this.props.notifications.setFilter('all')} />
<Icon name="bell" size={22} style={[styles.button, filter=='all' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]} onPress={()=> this.props.notifications.setFilter('all')} />
</View>
<View style={[styles.tab, bstyle, this.selected('tags')]}>
<Icon name="tag" size={22} style={[styles.button, filter == 'tags' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('tags')} />
<Icon name="tag" size={22} style={[styles.button, filter == 'tags' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('tags')} />
</View>
<View style={[styles.tab, bstyle, this.selected('comments')]}>
<MIcon name="chat-bubble" size={22} style={[styles.button, filter == 'comments' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('comments')} />
<MIcon name="chat-bubble" size={22} style={[styles.button, filter == 'comments' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('comments')} />
</View>
<View style={[styles.tab, bstyle, this.selected('boosts')]}>
<Icon name="trending-up" size={22} style={[styles.button, filter =='boosts' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('boosts')} />
<Icon name="trending-up" size={22} style={[styles.button, filter =='boosts' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('boosts')} />
</View>
<View style={[styles.tab, bstyle, this.selected('votes')]}>
<IonIcon name="md-thumbs-up" size={22} style={[styles.button, filter =='votes' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon ]} onPress={() => this.props.notifications.setFilter('votes')} />
<IonIcon name="md-thumbs-up" size={22} style={[styles.button, filter =='votes' ? ThemedStyles.style.colorIconActive : ThemedStyles.style.colorIcon ]} onPress={() => this.props.notifications.setFilter('votes')} />
</View>
</View>
</View>
......
......@@ -17,28 +17,36 @@ export const LIGHT_THEME = {
name: 'LIGHT',
primary_background: '#F5F5F5',
secondary_background: '#EFEFEF',
tertiary_background: '#E3E4E9',
primary_text: '#4F4F50',
secondary_text: '#939397',
button_backgound: '#5DBAC0',
button_border: '#D8D8D8',
separator: '#E6E6E6',
secondary_text: '#7D7D82',
tertiary_text: '#9B9B9B',
primary_button: '#5DBAC0',
primary_border: '#D8D8D8',
separator: '#323C3F',
done: '#4C92A4',
action: '#A5A5A5',
icon: '#777777',
icon: '#7D7D82',
icon_active: '#0085DD',
link: '#0091FF',
alert: '#E03C20',
};
export const DARK_THEME = {
name: 'DARK',
primary_background: '#252E31',
secondary_background: '#2D3639',
tertiary_background: '#404E53',
primary_text: '#FFFFFF',
secondary_text: '#AEB0B8',
button_backgound: '#5DBAC0',
button_border: '#404A4E',
tertiary_text: '#797B82',
primary_button: '#5DBAC0',
primary_border: '#404A4E',
separator: '#323C3F',
done: '#4C92A4',
action: '#A5A5A5',
icon: '#BEC0C1',
icon_active: '#0085DD',
link: '#0091FF',
alert: '#E03C20',
};
......@@ -129,7 +129,7 @@ class ThemedStylesStore {
background: 'transparent',
// card: theme.backgroundSecondary, // generates an error on ios
text: theme.primary_text,
primary: theme.icon
primary: theme.icon,
},
};
......@@ -161,7 +161,7 @@ class ThemedStylesStore {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch'
alignItems: 'stretch',
},
flexColumnCentered: {
flex: 1,
......@@ -172,19 +172,19 @@ class ThemedStylesStore {
},
rowJustifyEnd: {
flexDirection: 'row',
justifyContent: 'flex-end'
justifyContent: 'flex-end',
},
rowJustifyCenter: {
flexDirection: 'row',
justifyContent: 'center'
justifyContent: 'center',
},
rowJustifySpaceEvenly: {
flexDirection: 'row',
justifyContent: 'space-evenly'
justifyContent: 'space-evenly',
},
rowJustifyStart: {
flexDirection: 'row',
justifyContent: 'flex-start'
justifyContent: 'flex-start',
},
alignCenter: {
alignItems: 'center'
......@@ -196,129 +196,157 @@ class ThemedStylesStore {
justifyContent: 'center',
},
colorWhite: {
color: '#FFFFFF'
color: '#FFFFFF',
},
colorBlack: {
color: '#000000'
color: '#000000',
},
colorPrimaryText: {
color: theme.primary_text
color: theme.primary_text,
},
colorSecondaryText: {
color: theme.secondary_text
color: theme.secondary_text,
},
colorTertiaryText: {
color: theme.tertiary_text,
},
colorLink: {
color: theme.link
color: theme.link,
},
colorButton: {
color: theme.button_border
color: theme.button_border,
},
colorDone: {
color: theme.done
color: theme.done,
},
colorActionNew: {
color: theme.action
color: theme.action,
},
colorIcon: {
color: theme.icon
color: theme.icon,
},
colorIconActive: {
color: theme.icon_active,
},
colorSeparator: {
color: theme.separator
color: theme.separator,
},
colorAlert: {
color: theme.alert,
},
// backgrounds
backgroundWhite: {
backgroundColor: 'white'
backgroundColor: 'white',
},
backgroundBlack: {
backgroundColor: 'black'
backgroundColor: 'black',
},
backgroundTransparent: {
backgroundColor: 'transparent',
},
backgroundLink: {
backgroundColor: theme.link,
},
backgroundAlert: {
backgroundColor: theme.alert,
},
backgroundPrimary: {
backgroundColor: theme.primary_background,
},
backgroundSecondary: {
backgroundColor: theme.secondary_background,
},
backgroundButton: {
backgroundColor: theme.button_backgound,
backgroundTertiary: {
backgroundColor: theme.tertiary_background,
},
backgroundbButtonPrimary: {
backgroundColor: theme.primary_button,
},
backgroundButtonPrimary: {
backgroundColor: theme.primary_button,
},
backgroundSeparator: {
backgroundColor: theme.separator,
},
backgroundTransparent: {
backgroundColor: 'transparent'
backgroundIcon: {
backgroundColor: theme.icon,
},
backgroundIconActive: {
backgroundColor: theme.icon_active,
},
// borders
borderPrimary: {
borderColor: theme.primary_border,
},
// fonts
fontXS: {
fontSize: 10
fontSize: 10,
},
fontS: {
fontSize: 12
fontSize: 12,
},
fontM: {
fontSize: 14
fontSize: 14,
},
fontL: {
fontSize: 16
fontSize: 16,
},
fontXL: {
fontSize: 18
fontSize: 18,
},
fontXXL: {
fontSize: 24
fontSize: 24,
},
fontXXXL: {
fontSize: 30
fontSize: 30,
},
// text align
textRight: {
textAlign: 'right'
textAlign: 'right',
},
textLeft: {
textAlign: 'left'
textAlign: 'left',
},
textCenter: {
textAlign: 'center'
textAlign: 'center',
},
textJustify: {
textAlign: 'justify'
textAlign: 'justify',
},
fullWidth: {
width: '100%'
width: '100%',
},
halfWidth: {
width: '50%'
width: '50%',
},
bold: {
fontWeight: '700'
fontWeight: '700',
},
extraBold: {
// fontWeight: '800'
fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
},
fontThin: {
fontWeight: '200'
fontWeight: '200',
},
fontHairline: {
fontWeight: '100'
fontWeight: '100',
},
fontLight: {
fontWeight: '300'
fontWeight: '300',
},
fontNormal: {
fontWeight: '400'
fontWeight: '400',
},
fontMedium: {
fontWeight: '500'
fontWeight: '500',
},
fontSemibold: {
fontWeight: '600'
fontWeight: '600',
},
// onboarding
onboardingTitle: {
......@@ -341,7 +369,7 @@ class ThemedStylesStore {
linkNew: {
color: '#9B9B9B',
fontSize: 13,
lineHeight: 20
lineHeight: 20,
},
mindsLayoutBody: {
flex: 10,
......@@ -381,7 +409,7 @@ class ThemedStylesStore {
backgroundColor: 'transparent',
height: 50,
borderRadius: 2,
borderColor: theme.button_border,
borderColor: theme.primary_border,
borderWidth: 1,
lineHeight: 21,
},
......
......@@ -37,21 +37,23 @@ import logService from '../common/services/log.service';
import SubscriptionTierCarousel from './tiers/SubscriptionTierCarousel';
import PaymentMethodSelector from './methods/PaymentMethodSelector';
import BtcPayment from './methods/BtcPayment';
import PaymentMethodIcon from './methods/PaymentMethodIcon';
import Button from '../common/components/Button';
import numberFromat from '../common/helpers/number';
import StripeCardSelector from './methods/StripeCardSelector';
import ThemedStyles from '../styles/ThemedStyles';
/**
* Wire Fab Screen
*/
@inject('wire')
@inject('wallet')
export default
@inject('wallet', 'wire')
@observer
export default class FabScreen extends Component {
componentWillMount() {
class FabScreen extends Component {
/**
* constructor
*/
constructor(props) {
super(props);
this.paymethodRef = React.createRef();
if (!featuresService.has('crypto')) {
......@@ -87,7 +89,7 @@ export default class FabScreen extends Component {
}
setDefaults() {
const params = this.props.navigation.state.params;
const params = this.props.route.params;
const wire = this.props.wire;
const owner = wire.owner;
......@@ -105,7 +107,7 @@ export default class FabScreen extends Component {
}
getOwner() {
return this.props.navigation.state.params.owner;
return this.props.route.params.owner;
}
/**
......@@ -224,7 +226,8 @@ export default class FabScreen extends Component {
checkedColor={ colors.primary }
uncheckedIcon="circle-o"
uncheckedColor={ colors.greyed }
containerStyle={[CS.backgroundWhite, CS.noBorder]}
textStyle={ThemedStyles.style.colorPrimaryText}
containerStyle={[CS.noBorder, ThemedStyles.style.backgroundTransparent]}
/>:
<Text style={[CS.fontM, CS.textCenter, CS.marginTop2x, CS.marginBottom2x]}>{i18n.t('wire.willNotRecur', {currency: this.props.wire.currency.toUpperCase()})}</Text>
}
......@@ -240,7 +243,7 @@ export default class FabScreen extends Component {
disabled={buttonDisabled}
onPress={this.confirmSend}
textStyle={[CS.fontL, CS.padding]}
inverted
/>
</Fragment>
)
......@@ -261,7 +264,7 @@ export default class FabScreen extends Component {
const body = !this.props.wire.loaded ? <ActivityIndicator size={'large'} color={colors.primary}/> : this.getBody();
return (
<ScrollView contentContainerStyle={[CS.backgroundWhite, CS.paddingLeft2x, CS.paddingRight2x, CS.columnAlignCenter, CS.alignCenter, CS.flexContainer, CS.paddingTop2x]}>
<ScrollView contentContainerStyle={[ThemedStyles.style.backgroundSecondary, CS.paddingLeft2x, CS.paddingRight2x, CS.columnAlignCenter, CS.alignCenter, CS.flexContainer, CS.paddingTop2x]}>
<Icon size={40} name="ios-close" onPress={() => this.props.navigation.goBack()} style={[CS.marginRight3x, CS.marginTop3x, CS.positionAbsoluteTopRight]}/>
{icon}
{body}
......
......@@ -70,7 +70,7 @@ class WireStore {
@action
setOwner(owner: any) {
this.owner = owner;
this.guid = owner.guid || owner.entity_guid;
this.guid = owner ? (owner.guid || owner.entity_guid) : null;
}
async loadUserRewards(): Promise<any> {
......
......@@ -8,6 +8,7 @@ import testID from '../../common/helpers/testID';
import Colors from '../../styles/Colors';
import PaymentMethodIcon from './PaymentMethodIcon';
import { CommonStyle as CS } from '../../styles/Common';
import ThemedStyles from '../../styles/ThemedStyles';
type PropsType = {
button: React.Node,
......@@ -68,13 +69,13 @@ export default class PaymentMethodSelector extends React.PureComponent<PropsType
* Render
*/
render(): React.Node {
const theme = ThemedStyles.style;
return (
<View style={[CS.rowJustifySpaceEvenly, CS.fullWidth]}>
{this.methods.map((method: any, i: number): React.Node => (
<TouchableOpacity style={[CS.alignCenter, CS.padding ]} {...testID(`PAYMENT METHOD ${method.label}`)} key={i} onPress={method.handle}>
<PaymentMethodIcon value={method.label} size={30} style={(method.label.toLowerCase() === this.props.value) ? styles.selected : null} />
<Text style={[CS.fontL, (method.label.toLowerCase() === this.props.value) ? styles.selected : null]} >
<PaymentMethodIcon value={method.label} size={30} style={(method.label.toLowerCase() === this.props.value) ? theme.colorIconActive : theme.colorIcon} />
<Text style={[CS.fontL, (method.label.toLowerCase() === this.props.value) ? theme.colorIconActive : theme.colorIcon]} >
{method.label.toUpperCase()}
</Text>
</TouchableOpacity>
......@@ -82,10 +83,4 @@ export default class PaymentMethodSelector extends React.PureComponent<PropsType
</View>
);
}
}
const styles: any = StyleSheet.create({
selected: {
color: Colors.primary
}
})
\ No newline at end of file
}
\ No newline at end of file
......@@ -6,6 +6,7 @@ import featuresService from '../../common/services/features.service';
import { CommonStyle as CS } from '../../styles/Common';
import viewportPercentage from '../../common/helpers/viewportPercentage';
import i18n from '../../common/services/i18n.service';
import ThemedStyles from '../../styles/ThemedStyles';
const {value: slideWidth, viewportHeight} = viewportPercentage(75);
const {value: itemHorizontalMargin} = viewportPercentage(2);
......@@ -89,10 +90,10 @@ export default class SubscriptionTierCarousel extends PureComponent {
const text = recurring ? i18n.t('wire.amountMonth', {amount: amountText}) : amountText;
return (
<View key={`rewards${row.item.amount}`} style={[CS.rowJustifyCenter, CS.backgroundLightGreyed, CS.borderRadius5x, CS.padding2x, CS.border, CS.borderGreyed]}>
<View key={`rewards${row.item.amount}`} style={[CS.rowJustifyCenter, ThemedStyles.style.backgroundPrimary, CS.borderRadius5x, CS.padding2x, CS.border, ThemedStyles.style.borderButton]}>
<View style={CS.columnAlignCenter}>
<Text style={[CS.fontXXL, CS.fontMedium, CS.colorDark]}>{text}</Text>
<Text numberOfLines={5} style={[CS.fontL, CS.fontHairline, CS.colorDark]}>{row.item.description}</Text>
<Text style={[CS.fontXXL, CS.fontMedium]}>{text}</Text>
<Text numberOfLines={5} style={[CS.fontL, CS.fontMedium]}>{row.item.description}</Text>
</View>
</View>
);
......@@ -115,7 +116,7 @@ export default class SubscriptionTierCarousel extends PureComponent {
let current = this.rewards.findIndex(r => r.amount == this.props.amount && r.currency == this.props.currency);
return (
<View style={[]}>
<View>
<Pagination
dotsLength={this.rewards.length}
activeDotIndex={current === -1 ? 0 : current}
......
......@@ -8202,10 +8202,10 @@ react-native-safe-area-context@^0.7.2:
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.7.2.tgz#bec7f339eb1fd52716fd0ebe4ccc12645c7385ee"
integrity sha512-xdPFBt7usIKa4QYxRzNWFKeMbukRltFOAoFK0mqURm7wzxWH9Kg0rPyGzXXdgmAFTrT7Nz98h7Pc9/9Ue0TSJQ==
react-native-screens@^2.0.0-beta.8:
version "2.0.0-beta.7"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-beta.7.tgz#12f2bf09328c8e483d80fb9ff8d40fee0689a98c"
integrity sha512-NcnuyoxhPBvc3clAIlz7DmnvjUqUWG6UqdKjaiRP40H+tjQVVdges8N4dt98fRIHaDVtq4LJKj683g4H5PVJRA==
react-native-screens@^2.0.0-beta.7:
version "2.0.0-beta.8"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-beta.8.tgz#f302c5a93b1bf067739026dd64ac553145659ecd"
integrity sha512-UCu5to8SM52aLhmKQPcwQ0cXekFUdCza9VU76gDAsodJS3kvmNaCkjlSQ0eFucqYEhMqCCZ/fYxpdMbSsiYHGg==
dependencies:
debounce "^1.2.0"
......