Improved ui on larger screens

screens/Tetris/TetrisScreen.js

@@ -199,7 +199,7 @@ class TetrisScreen extends React.Component<Props, State> {
                 <View style={{
                     flexDirection: 'row',
                     position: 'absolute',
-                    top: 10,
+                    top: 5,
                     left: 10,
                 }}>
                     <MaterialCommunityIcons
@@ -242,7 +242,8 @@ class TetrisScreen extends React.Component<Props, State> {
                 <Grid
                     width={this.logic.getWidth()}
                     height={this.logic.getHeight()}
-                    containerHeight={'80%'}
+                    containerMaxHeight={'80%'}
+                    containerMaxWidth={'60%'}
                     grid={this.state.grid}
                     backgroundColor={this.colors.tetrisBackground}
                 />
@@ -256,6 +257,8 @@ class TetrisScreen extends React.Component<Props, State> {
                     />
                 </View>
                 <View style={{
+                    position: 'absolute',
+                    bottom: 0,
                     flexDirection: 'row',
                     width: '100%',
                 }}>
@@ -288,6 +291,7 @@ class TetrisScreen extends React.Component<Props, State> {
                         onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
                         onPress={() => this.logic.pressedOut()}
                         style={{marginLeft: 'auto'}}
+                        color={this.colors.tetrisScore}
                     />
                 </View>
             </View>

screens/Tetris/components/Cell.js

@@ -27,6 +27,7 @@ class Cell extends React.PureComponent<Props> {
                     backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
                     borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
                     borderStyle: 'solid',
+                    borderRadius: 2,
                     borderWidth: 1,
                     aspectRatio: 1,
                 }}

screens/Tetris/components/Grid.js

@@ -11,7 +11,8 @@ type Props = {
     backgroundColor: string,
     height: number,
     width: number,
-    containerHeight: number|string,
+    containerMaxHeight: number|string,
+    containerMaxWidth: number|string,
 }
 
 class Grid extends React.Component<Props>{
@@ -33,6 +34,7 @@ class Grid extends React.Component<Props>{
         return(
             <View style={{
                 flexDirection: 'row',
+                backgroundColor: this.props.backgroundColor,
             }}>
                 {cells}
             </View>
@@ -51,11 +53,11 @@ class Grid extends React.Component<Props>{
         return (
             <View style={{
                 flexDirection: 'column',
-                height: this.props.containerHeight,
+                maxWidth: this.props.containerMaxWidth,
+                maxHeight: this.props.containerMaxHeight,
                 aspectRatio: this.props.width/this.props.height,
                 marginLeft: 'auto',
                 marginRight: 'auto',
-                backgroundColor: this.props.backgroundColor,
             }}>
                 {this.getGrid()}
             </View>

screens/Tetris/components/Preview.js

@@ -26,7 +26,8 @@ class Preview extends React.PureComponent<Props> {
                     width={this.props.next[i][0].length}
                     height={this.props.next[i].length}
                     grid={this.props.next[i]}
-                    containerHeight={50}
+                    containerMaxHeight={50}
+                    containerMaxWidth={50}
                     backgroundColor={'transparent'}
                 />
             );