Fix blocking message and spinner position

3 files changed, 16 insertions, 13 deletions

diff --git a/app/components/Accordion.js b/app/components/Accordion.js
index 0b2f2929d3..ca3eeb9883 100644
--- a/app/components/Accordion.js
+++ b/app/components/Accordion.js
@@ -59,8 +59,8 @@ export default class Accordion extends Component<AccordionProps, AccordionState>
   }
 
   render() {
-    const { height: _height, children, animationDuration: _animationDuration, ...otherProps } = this.props;
-    const containerStyles = [];
+    const { style: _style, height: _height, children, animationDuration: _animationDuration, ...otherProps } = this.props;
+    const containerStyles = [_style];
 
     if(this.state.animatedValue !== null) {
       const animatedStyle = Styles.createAnimatedViewStyle({
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 0c13dc58ab..47f28e6742 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -160,14 +160,16 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
         <View style={styles.container}>
 
           { this._renderIsBlockingInternetMessage() }
+
+          { /* show spinner when connecting */ }
+          { isConnecting ?
+            <View style={ styles.status_icon }>
+              <Img source="icon-spinner" height="60" width="60" alt="" ref={ this._updateMapOffset } />
+            </View>
+            : null
+          }
+
           <View style={styles.status}>
-            { /* show spinner when connecting */ }
-            { isConnecting ?
-              <View style={ styles.status_icon }>
-                <Img source="icon-spinner" height="60" width="60" alt="" ref={ this._updateMapOffset } />
-              </View>
-              : null
-            }
 
             <View style={ this.networkSecurityStyle() } testName='networkSecurityMessage'>{ this.networkSecurityMessage() }</View>
 
@@ -260,7 +262,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
   }
 
   _renderIsBlockingInternetMessage() {
-    return <Accordion height={ (this.props.connection.status === 'connecting') ? 'auto' : 0 }>
+    return <Accordion style={styles.blocking_container} height={ (this.props.connection.status === 'connecting') ? 'auto' : 0 }>
       <Text style={styles.blocking_message}>
         <Text style={styles.blocking_icon}>&nbsp;</Text>
         <Text>BLOCKING INTERNET</Text>
diff --git a/app/components/ConnectStyles.js b/app/components/ConnectStyles.js
index 5165a6a70c..d99098af6c 100644
--- a/app/components/ConnectStyles.js
+++ b/app/components/ConnectStyles.js
@@ -23,14 +23,14 @@ export default {
       flex: 1,
       position: 'relative', /* need this for z-index to work to cover map */
       zIndex: 1,
+
     },
     footer:{
       flex: 0,
       marginBottom: 16,
     },
     blocking_container: {
-      color: colors.white80,
-      overflow: 'hidden',
+      width: '100%',
       position: 'absolute',
     },
     blocking_icon: {
@@ -63,10 +63,11 @@ export default {
       flex: 1,
     },
     status_icon: {
+      position:'absolute',
       alignSelf: 'center',
       width: 60,
       height: 60,
-      marginBottom: 32,
+      marginTop: 94,
     },
   }),
   ...createTextStyles({