mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2024-11-20 02:09:10 +01:00
small visual polish on hodlhodl view
This commit is contained in:
ncoelho
Overtorment
parent
c0f3d99147
commit
029633cfdd
@ -13,8 +13,9 @@ import {
|
||||
Platform,
|
||||
Image,
|
||||
TextInput,
|
||||
ScrollView,
|
||||
} from 'react-native';
|
||||
import { BlueNavigationStyle, BlueLoading, BlueCard } from '../../BlueComponents';
|
||||
import { BlueNavigationStyle, BlueLoading, BlueCard, SafeBlueArea } from '../../BlueComponents';
|
||||
import PropTypes from 'prop-types';
|
||||
import { HodlHodlApi } from '../../class/hodl-hodl-api';
|
||||
import Modal from 'react-native-modal';
|
||||
@ -26,7 +27,8 @@ const METHOD_ANY = '_any';
|
||||
const styles = StyleSheet.create({
|
||||
grayDropdownText: {
|
||||
fontSize: 17,
|
||||
color: 'gray',
|
||||
fontWeight: "600",
|
||||
color: '#9AA0AA',
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
@ -47,8 +49,8 @@ const styles = StyleSheet.create({
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
minHeight: 150,
|
||||
height: 150,
|
||||
minHeight: 200,
|
||||
height: 200,
|
||||
},
|
||||
bottomModal: {
|
||||
justifyContent: 'flex-end',
|
||||
@ -68,11 +70,15 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
|
||||
grayDropdownTextContainer: {
|
||||
backgroundColor: '#ebebeb',
|
||||
backgroundColor: '#EEF0F4',
|
||||
borderRadius: 20,
|
||||
width: 100,
|
||||
height: 35,
|
||||
top: 10,
|
||||
top: 3,
|
||||
paddingLeft: 2,
|
||||
paddingBottom: 6,
|
||||
paddingTop: 6,
|
||||
paddingRight: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flex: 0.65,
|
||||
@ -80,9 +86,9 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
|
||||
grayTextContainerContainer: {
|
||||
backgroundColor: '#ebebeb',
|
||||
backgroundColor: '#EEF0F4',
|
||||
borderRadius: 20,
|
||||
height: 40,
|
||||
height: 44,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginTop: 15,
|
||||
@ -96,10 +102,11 @@ const styles = StyleSheet.create({
|
||||
blueText: {
|
||||
color: '#2f5fb3',
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
},
|
||||
allOffersText: {
|
||||
fontSize: 12,
|
||||
color: 'gray',
|
||||
color: '#9AA0AA',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 15,
|
||||
@ -109,20 +116,21 @@ const styles = StyleSheet.create({
|
||||
left: 5,
|
||||
color: '#0c2550',
|
||||
fontSize: 20,
|
||||
fontWeight: '100',
|
||||
fontWeight: '500',
|
||||
},
|
||||
nicknameText: {
|
||||
color: '#0c2550',
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
},
|
||||
blueTextContainer: {
|
||||
backgroundColor: '#ccddf9',
|
||||
backgroundColor: '#CCDDF9',
|
||||
borderRadius: 20,
|
||||
width: 110,
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
height: 34,
|
||||
height: 36,
|
||||
paddingLeft: 8,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
right: 4,
|
||||
@ -131,17 +139,17 @@ const styles = StyleSheet.create({
|
||||
|
||||
searchInputContainer: {
|
||||
flexDirection: 'row',
|
||||
borderColor: '#d2d2d2',
|
||||
borderBottomColor: '#d2d2d2',
|
||||
borderColor: '#EEF0F4',
|
||||
borderBottomColor: '#EEF0F4',
|
||||
borderWidth: 1.0,
|
||||
borderBottomWidth: 0.5,
|
||||
backgroundColor: '#f5f5f5',
|
||||
minHeight: 44,
|
||||
height: 44,
|
||||
backgroundColor: '#EEF0F4',
|
||||
minHeight: 48,
|
||||
height: 48,
|
||||
marginHorizontal: 20,
|
||||
alignItems: 'center',
|
||||
marginVertical: 8,
|
||||
borderRadius: 22,
|
||||
borderRadius: 26,
|
||||
width: '100%',
|
||||
},
|
||||
});
|
||||
@ -424,6 +432,7 @@ export default class HodlHodl extends Component {
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
|
||||
<View style={styles.modalContentShort}>
|
||||
<FlatList
|
||||
scrollEnabled={false}
|
||||
style={{ width: '100%' }}
|
||||
ItemSeparatorComponent={() => <View style={{ height: 0.5, width: '100%', backgroundColor: '#C8C8C8' }} />}
|
||||
data={[
|
||||
@ -437,8 +446,8 @@ export default class HodlHodl extends Component {
|
||||
onHideUnderlay={separators.unhighlight}
|
||||
onPress={() => this._onSidePress(item)}
|
||||
>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20 }}>
|
||||
<Text style={{ color: '#0c2550', fontWeight: this.state.side === item.code ? 'bold' : 'normal' }}>{item.name}</Text>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20, paddingBottom: 20 }}>
|
||||
<Text style={{ fontSize: 20, color: '#0c2550', fontWeight: this.state.side === item.code ? 'bold' : 'normal' }}>{item.name}</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
)}
|
||||
@ -471,6 +480,7 @@ export default class HodlHodl extends Component {
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
|
||||
<View style={styles.modalContentShort}>
|
||||
<FlatList
|
||||
scrollEnabled={false}
|
||||
style={{ width: '100%' }}
|
||||
ItemSeparatorComponent={() => <View style={{ height: 0.5, width: '100%', backgroundColor: '#C8C8C8' }} />}
|
||||
data={[
|
||||
@ -488,17 +498,17 @@ export default class HodlHodl extends Component {
|
||||
}}
|
||||
>
|
||||
<View style={{ backgroundColor: 'white' }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20 }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20, paddingBottom: 20 }}>
|
||||
<View style={{ paddingLeft: 10, flex: 1, flexDirection: 'row' }}>
|
||||
<Text style={{ color: '#0c2550' }}>{item.native_name}</Text>
|
||||
<View style={{ color: 'gray', right: 0, position: 'absolute' }}>
|
||||
<Text style={{ fontSize: 20, color: '#0c2550' }}>{item.native_name}</Text>
|
||||
<View style={{ color: '#9AA0AA', right: 0, position: 'absolute' }}>
|
||||
{item.code === 'currency' && (
|
||||
<Text style={{ color: 'gray' }}> {this.state.currency ? this.state.currency + ' >' : 'Detail >'} </Text>
|
||||
<Text style={{ fontSize: 18, color: '#9AA0AA' }}> {this.state.currency ? this.state.currency + ' ❯' : 'Detail ❯'} </Text>
|
||||
)}
|
||||
{item.code === 'method' && (
|
||||
<Text style={{ color: 'gray' }}>
|
||||
<Text style={{ fontSize: 20, color: '#9AA0AA' }}>
|
||||
{' '}
|
||||
{this.state.method ? this.getMethodName(this.state.method) + ' >' : 'Detail >'}
|
||||
{this.state.method ? this.getMethodName(this.state.method) + ' ❯' : 'Detail ❯'}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
@ -565,9 +575,10 @@ export default class HodlHodl extends Component {
|
||||
<TextInput
|
||||
onChangeText={text => this.setState({ countrySearchInput: text })}
|
||||
placeholder={'Search..'}
|
||||
placeholderTextColor="#9AA0AA"
|
||||
value={this.state.countrySearchInput || ''}
|
||||
numberOfLines={1}
|
||||
style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
|
||||
style={{ fontSize: 17, flex: 1, marginHorizontal: 8, minHeight: 33, paddingLeft: 6, paddingRight: 6 }}
|
||||
/>
|
||||
<Icon name="search" type="material" size={20} color="gray" containerStyle={{ left: -10 }} />
|
||||
</View>
|
||||
@ -583,9 +594,9 @@ export default class HodlHodl extends Component {
|
||||
onHideUnderlay={separators.unhighlight}
|
||||
>
|
||||
<View style={{ backgroundColor: 'white' }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20 }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20, paddingBottom: 20 }}>
|
||||
<View style={{ paddingLeft: 10 }}>
|
||||
<Text style={{ color: '#0c2550', fontWeight: item.code === this.state.country ? 'bold' : 'normal' }}>
|
||||
<Text style={{ fontSize: 20, color: '#0c2550', fontWeight: item.code === this.state.country ? 'bold' : 'normal' }}>
|
||||
{item.native_name}
|
||||
</Text>
|
||||
</View>
|
||||
@ -640,9 +651,10 @@ export default class HodlHodl extends Component {
|
||||
<TextInput
|
||||
onChangeText={text => this.setState({ currencySearchInput: text })}
|
||||
placeholder={'Search..'}
|
||||
placeholderTextColor="#9AA0AA"
|
||||
value={this.state.currencySearchInput || ''}
|
||||
numberOfLines={1}
|
||||
style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
|
||||
style={{ flex: 1, marginHorizontal: 8, minHeight: 33, paddingLeft: 6, paddingRight: 6 }}
|
||||
/>
|
||||
<Icon name="search" type="material" size={20} color="gray" containerStyle={{ left: -10 }} />
|
||||
</View>
|
||||
@ -658,10 +670,11 @@ export default class HodlHodl extends Component {
|
||||
onHideUnderlay={separators.unhighlight}
|
||||
>
|
||||
<View style={{ backgroundColor: 'white' }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20 }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20, paddingBottom: 20 }}>
|
||||
<View style={{ paddingLeft: 10 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: '#0c2550',
|
||||
fontWeight:
|
||||
item.code === this.state.currency || (item.code === CURRENCY_CODE_ANY && this.state.currency === false)
|
||||
@ -723,9 +736,10 @@ export default class HodlHodl extends Component {
|
||||
<TextInput
|
||||
onChangeText={text => this.setState({ methodSearchInput: text })}
|
||||
placeholder={'Search..'}
|
||||
placeholderTextColor="#9AA0AA"
|
||||
value={this.state.methodSearchInput || ''}
|
||||
numberOfLines={1}
|
||||
style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
|
||||
style={{ flex: 1, marginHorizontal: 8, minHeight: 33, paddingLeft: 6, paddingRight: 6 }}
|
||||
/>
|
||||
<Icon name="search" type="material" size={20} color="gray" containerStyle={{ left: -10 }} />
|
||||
</View>
|
||||
@ -741,10 +755,11 @@ export default class HodlHodl extends Component {
|
||||
onHideUnderlay={separators.unhighlight}
|
||||
>
|
||||
<View style={{ backgroundColor: 'white' }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20 }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20, paddingBottom: 20 }}>
|
||||
<View style={{ paddingLeft: 10 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: '#0c2550',
|
||||
fontWeight:
|
||||
item.id === this.state.method || (item.id === METHOD_ANY && this.state.method === false) ? 'bold' : 'normal',
|
||||
@ -766,7 +781,8 @@ export default class HodlHodl extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<SafeBlueArea>
|
||||
|
||||
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<Text style={styles.BottomLine}>Powered by HodlHodl®</Text>
|
||||
@ -778,7 +794,7 @@ export default class HodlHodl extends Component {
|
||||
}}
|
||||
>
|
||||
<Text style={styles.grayDropdownText}>{this.state.side === HodlHodlApi.FILTERS_SIDE_VALUE_SELL ? 'Buying' : 'Selling'}</Text>
|
||||
<Icon name="expand-more" type="material" size={22} color="gray" containerStyle={{ paddingLeft: 0 }} />
|
||||
<Icon name="expand-more" type="material" size={22} color="#9AA0AA" containerStyle={{ paddingLeft: 0, paddingRight: 0 }} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
@ -797,29 +813,31 @@ export default class HodlHodl extends Component {
|
||||
this.setState({ isFiltersModalVisible: true });
|
||||
}}
|
||||
>
|
||||
<Text style={styles.blueText}> Filters</Text>
|
||||
<Text style={styles.blueText}>Filters</Text>
|
||||
|
||||
<Icon name="filter-list" type="material" size={24} color="#2f5fb3" containerStyle={{ paddingLeft: 10 }} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</BlueCard>
|
||||
{(this.state.isLoading && <BlueLoading />) || (
|
||||
<ScrollView style={{ paddingHorizontal: 24 }}>
|
||||
<FlatList
|
||||
onRefresh={() => this._refresh()}
|
||||
refreshing={this.state.isLoading}
|
||||
style={{ height: '80%', marginTop: 10 }}
|
||||
contentContainerStyle={{ flex: 1, justifyContent: 'center', paddingHorizontal: 0 }}
|
||||
style={{ marginTop: 24, flex: 1 }}
|
||||
ItemSeparatorComponent={() => <View style={{ height: 0.5, width: '100%', backgroundColor: '#C8C8C8' }} />}
|
||||
data={this.state.offers}
|
||||
ListEmptyComponent={() => <Text>No offers. Try changing country or filters!</Text>}
|
||||
ListEmptyComponent={() => <Text style={{ textAlign: 'center', color: "#9AA0AA", paddingHorizontal: 16}}>No offers. Try to change "Near me" to Global offers!</Text>}
|
||||
renderItem={({ item, index, separators }) => (
|
||||
<TouchableHighlight
|
||||
onPress={() => this._onPress(item)}
|
||||
onShowUnderlay={separators.highlight}
|
||||
onHideUnderlay={separators.unhighlight}
|
||||
>
|
||||
<View style={{ backgroundColor: 'white' }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', paddingTop: 20 }}>
|
||||
<View style={{ backgroundColor: 'white', paddingTop: 16, paddingBottom: 16 }}>
|
||||
<View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row' }}>
|
||||
<View>
|
||||
<Image
|
||||
style={{ width: 40, height: 40, borderRadius: 40 }}
|
||||
@ -831,38 +849,43 @@ export default class HodlHodl extends Component {
|
||||
</View>
|
||||
<View style={{ paddingLeft: 10 }}>
|
||||
<Text style={styles.nicknameText}>{item.trader.login}</Text>
|
||||
<Text style={{ color: 'grey' }}>
|
||||
<Text style={{ color: '#9AA0AA' }}>
|
||||
{item.trader.trades_count > 0 ? Math.round(item.trader.rating * 100) + '%' : 'No rating'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={{ color: 'grey', paddingTop: 10 }}>{this.getItemText(item)}</Text>
|
||||
<Text style={{ color: '#9AA0AA', paddingTop: 10 }}>{this.getItemText(item)}</Text>
|
||||
|
||||
<View style={{ flex: 1, flexDirection: 'row', paddingTop: 10, paddingBottom: 10, alignItems: 'center' }}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#ebebeb',
|
||||
backgroundColor: '#EEF0F4',
|
||||
borderRadius: 20,
|
||||
width: 95,
|
||||
height: 22,
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
height: 26,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 14, color: 'gray' }}>{this.getItemPrice(item)}</Text>
|
||||
<Text style={{ fontWeight: "600", fontSize: 14, color: '#9AA0AA' }}>{this.getItemPrice(item)}</Text>
|
||||
</View>
|
||||
|
||||
<Text style={{ color: 'grey', fontSize: 12, paddingLeft: 10 }}>
|
||||
<Text style={{ color: '#9AA0AA', fontSize: 12, paddingLeft: 10 }}>
|
||||
Min/Max: {item.min_amount.replace('.00', '')} - {item.max_amount.replace('.00', '')} {item.currency_code}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</TouchableHighlight>
|
||||
|
||||
)}
|
||||
/>
|
||||
</ScrollView>
|
||||
)}
|
||||
</BlueCard>
|
||||
|
||||
|
||||
|
||||
{this.renderChooseSideModal()}
|
||||
|
||||
@ -873,7 +896,8 @@ export default class HodlHodl extends Component {
|
||||
{this.renderChooseCurrencyModal()}
|
||||
|
||||
{this.renderChooseMethodModal()}
|
||||
</View>
|
||||
|
||||
</SafeBlueArea>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user