REF: make provideEntropy looks fine on desktop

This commit is contained in:
Ivan Vershigora 2020-09-20 11:23:28 +03:00 committed by Overtorment
parent 71cd5592fe
commit 4d4b5ca914
2 changed files with 10 additions and 5 deletions

View file

@ -2741,6 +2741,7 @@ const tabsStyles = StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
tabRoot: { tabRoot: {
flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
borderColor: 'white', borderColor: 'white',
@ -2749,7 +2750,7 @@ const tabsStyles = StyleSheet.create({
}); });
export const BlueTabs = ({ active, onSwitch, tabs }) => ( export const BlueTabs = ({ active, onSwitch, tabs }) => (
<View style={tabsStyles.root}> <View style={[tabsStyles.root, isIpad && { marginBottom: 30 }]}>
{tabs.map((Tab, i) => ( {tabs.map((Tab, i) => (
<TouchableOpacity <TouchableOpacity
key={i} key={i}
@ -2760,7 +2761,6 @@ export const BlueTabs = ({ active, onSwitch, tabs }) => (
borderColor: BlueCurrentTheme.colors.buttonAlternativeTextColor, borderColor: BlueCurrentTheme.colors.buttonAlternativeTextColor,
borderBottomWidth: 2, borderBottomWidth: 2,
}, },
{ width: width / tabs.length },
]} ]}
> >
<Tab active={active === i} /> <Tab active={active === i} />

View file

@ -1,7 +1,7 @@
import React, { useReducer, useState } from 'react'; import React, { useReducer, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import BN from 'bignumber.js'; import BN from 'bignumber.js';
import { Dimensions, View, ScrollView, Text, Image, TouchableOpacity, StyleSheet } from 'react-native'; import { View, ScrollView, Text, Image, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
import { Icon } from 'react-native-elements'; import { Icon } from 'react-native-elements';
import { useNavigation, useRoute, useTheme } from '@react-navigation/native'; import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
@ -115,6 +115,8 @@ Coin.propTypes = {
}; };
const Dice = ({ push, sides }) => { const Dice = ({ push, sides }) => {
const { width } = useWindowDimensions();
const diceWidth = width / 4;
const diceIcon = i => { const diceIcon = i => {
switch (i) { switch (i) {
case 1: case 1:
@ -136,7 +138,7 @@ const Dice = ({ push, sides }) => {
<ScrollView contentContainerStyle={styles.diceContainer}> <ScrollView contentContainerStyle={styles.diceContainer}>
{[...Array(sides)].map((_, i) => ( {[...Array(sides)].map((_, i) => (
<TouchableOpacity key={i} onPress={() => push(getEntropy(i, sides))}> <TouchableOpacity key={i} onPress={() => push(getEntropy(i, sides))}>
<View style={styles.diceRoot}> <View style={[styles.diceRoot, { width: diceWidth }]}>
{sides === 6 ? ( {sides === 6 ? (
<Icon style={styles.diceIcon} name={diceIcon(i + 1)} size={70} color="grey" type="font-awesome-5" /> <Icon style={styles.diceIcon} name={diceIcon(i + 1)} size={70} color="grey" type="font-awesome-5" />
) : ( ) : (
@ -286,6 +288,8 @@ const styles = StyleSheet.create({
borderColor: BlueCurrentTheme.colors.lightButton, borderColor: BlueCurrentTheme.colors.lightButton,
margin: 10, margin: 10,
padding: 10, padding: 10,
maxWidth: 200,
maxHeight: 200,
}, },
coinImage: { coinImage: {
aspectRatio: 1, aspectRatio: 1,
@ -301,8 +305,9 @@ const styles = StyleSheet.create({
paddingBottom: 100, paddingBottom: 100,
}, },
diceRoot: { diceRoot: {
width: Dimensions.get('window').width / 4,
aspectRatio: 1, aspectRatio: 1,
maxWidth: 200,
maxHeight: 200,
}, },
dice: { dice: {
margin: 3, margin: 3,