FIX: Button size for large devices

This commit is contained in:
marcosrdz 2020-08-10 19:21:02 -04:00 committed by Overtorment
parent 7ac5fccc34
commit 06bca3ae3a
3 changed files with 19 additions and 23 deletions

View File

@ -22,6 +22,7 @@ import {
Platform,
FlatList,
TextInput,
PixelRatio,
} from 'react-native';
import Clipboard from '@react-native-community/clipboard';
import LinearGradient from 'react-native-linear-gradient';
@ -1366,33 +1367,31 @@ export class BlueTransactionOutgoingIcon extends Component {
}
}
const sendReceiveScanButtonFontSize = PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26);
export class BlueReceiveButtonIcon extends Component {
render() {
return (
<TouchableOpacity {...this.props}>
<TouchableOpacity {...this.props} style={{ flex: 0.5 }}>
<View
style={{
flex: 1,
minWidth: 130,
backgroundColor: BlueCurrentTheme.colors.buttonBackgroundColor,
}}
>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<View
style={{
minWidth: 30,
minHeight: 30,
left: 5,
backgroundColor: 'transparent',
transform: [{ rotate: '-45deg' }],
alignItems: 'center',
marginBottom: -11,
marginRight: 8,
}}
>
<Icon
{...this.props}
name="arrow-down"
size={16}
size={sendReceiveScanButtonFontSize}
type="font-awesome"
color={BlueCurrentTheme.colors.buttonAlternativeTextColor}
/>
@ -1400,8 +1399,8 @@ export class BlueReceiveButtonIcon extends Component {
<Text
style={{
color: BlueCurrentTheme.colors.buttonAlternativeTextColor,
fontSize: (isIpad && 10) || 16,
fontWeight: '500',
fontSize: sendReceiveScanButtonFontSize,
left: 5,
backgroundColor: 'transparent',
}}
@ -1418,14 +1417,12 @@ export class BlueReceiveButtonIcon extends Component {
export class BlueScanButton extends Component {
render() {
return (
<TouchableOpacity {...this.props}>
<TouchableOpacity {...this.props} style={{ flex: 1 }}>
<View
style={{
flex: 1,
minWidth: 130,
backgroundColor: BlueCurrentTheme.colors.buttonBackgroundColor,
paddingRight: 20,
paddingLeft: 20,
}}
>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
@ -1439,12 +1436,12 @@ export class BlueScanButton extends Component {
marginLeft: -8,
}}
>
<Image style={{}} source={BlueCurrentTheme.scanImage} />
<Image resizeMode="stretch" source={BlueCurrentTheme.scanImage} />
</View>
<Text
style={{
color: BlueCurrentTheme.colors.buttonAlternativeTextColor,
fontSize: (isIpad && 10) || 16,
fontSize: sendReceiveScanButtonFontSize,
fontWeight: '600',
left: 5,
backgroundColor: 'transparent',
@ -1462,11 +1459,10 @@ export class BlueScanButton extends Component {
export class BlueSendButtonIcon extends Component {
render() {
return (
<TouchableOpacity {...this.props} testID="SendButton">
<TouchableOpacity {...this.props} testID="SendButton" style={{ flex: 0.5 }}>
<View
style={{
flex: 1,
minWidth: 130,
backgroundColor: BlueCurrentTheme.colors.buttonBackgroundColor,
alignItems: 'center',
}}
@ -1474,18 +1470,16 @@ export class BlueSendButtonIcon extends Component {
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View
style={{
minWidth: 30,
minHeight: 30,
left: 5,
backgroundColor: 'transparent',
transform: [{ rotate: '225deg' }],
marginBottom: 11,
marginRight: 8,
}}
>
<Icon
{...this.props}
name="arrow-down"
size={16}
size={sendReceiveScanButtonFontSize}
type="font-awesome"
color={BlueCurrentTheme.colors.buttonAlternativeTextColor}
/>
@ -1493,7 +1487,7 @@ export class BlueSendButtonIcon extends Component {
<Text
style={{
color: BlueCurrentTheme.colors.buttonAlternativeTextColor,
fontSize: (isIpad && 10) || 16,
fontSize: sendReceiveScanButtonFontSize,
fontWeight: '500',
backgroundColor: 'transparent',
}}

View File

@ -675,13 +675,13 @@ const styles = StyleSheet.create({
fontWeight: '600',
},
scanButton: {
flexDirection: 'row',
alignSelf: 'center',
backgroundColor: 'transparent',
position: 'absolute',
width: '40%',
bottom: 30,
borderRadius: 30,
minHeight: 48,
height: '7%',
overflow: 'hidden',
},
listHeader: {

View File

@ -163,12 +163,14 @@ const styles = StyleSheet.create({
},
floatButtons: {
flexDirection: 'row',
alignSelf: 'center',
backgroundColor: 'transparent',
position: 'absolute',
alignSelf: 'center',
bottom: 30,
borderRadius: 30,
minHeight: 48,
width: '60%',
flex: 1,
height: '7%',
overflow: 'hidden',
},
});