Use Accordion in Connect

2 files changed, 10 insertions, 31 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 632b04ea21..0c13dc58ab 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -3,11 +3,11 @@
 import moment from 'moment';
 import * as React from 'react';
 import { Layout, Container, Header } from './Layout';
-import { Text, View, Animated, Styles, Types } from 'reactxp';
+import { Component, Text, View, Types } from 'reactxp';
 import Img from './Img';
 import { TransparentButton, GreenButton, RedButton, Label } from './styled';
+import Accordion from './Accordion';
 import styles from './ConnectStyles';
-import { colors } from '../config';
 
 import { BackendError } from '../lib/backend';
 import Map from './Map';
@@ -32,7 +32,7 @@ type ConnectState = {
   mapOffset: [number, number],
 };
 
-export default class Connect extends React.Component<ConnectProps, ConnectState> {
+export default class Connect extends Component<ConnectProps, ConnectState> {
   state = {
     showCopyIPMessage: false,
     mapOffset: [0, 0],
@@ -259,34 +259,13 @@ export default class Connect extends React.Component<ConnectProps, ConnectState>
     );
   }
 
-  _getBlockingMessageAnimation(animationValue: Animated.Value, toValue: number){
-    return Animated.timing(animationValue, {
-      toValue: toValue,
-      easing: Animated.Easing.InOut(),
-      duration: 250,
-      useNativeDriver: true,
-    });
-  }
-
-
   _renderIsBlockingInternetMessage() {
-    let messageHeight = 0;
-    let messageHeightValue = Animated.createValue(0);
-    if (this.props.connection.status === 'connecting') {
-      messageHeight = styles.blockingMessageHeight;
-    }
-
-    this._getBlockingMessageAnimation(messageHeightValue, messageHeight).start();
-
-    return <Animated.View style={
-      Styles.createAnimatedViewStyle({
-        height: messageHeight,
-        backgroundColor: colors.blue})} >
+    return <Accordion height={ (this.props.connection.status === 'connecting') ? 'auto' : 0 }>
       <Text style={styles.blocking_message}>
         <Text style={styles.blocking_icon}>&nbsp;</Text>
         <Text>BLOCKING INTERNET</Text>
       </Text>
-    </Animated.View>;
+    </Accordion>;
   }
 
   // Handlers
diff --git a/app/components/ConnectStyles.js b/app/components/ConnectStyles.js
index 030d33b07c..d857c94b9b 100644
--- a/app/components/ConnectStyles.js
+++ b/app/components/ConnectStyles.js
@@ -77,10 +77,11 @@ export default {
       fontSize: 12,
       fontWeight: '800',
       lineHeight: 17,
-      marginTop: 8,
-      marginLeft: 20,
-      marginRight: 20,
-      marginBottom: 8,
+      paddingTop: 8,
+      paddingLeft: 20,
+      paddingRight: 20,
+      paddingBottom: 8,
+      height: 36,
       color: colors.white60,
       backgroundColor: colors.blue,
     },
@@ -143,5 +144,4 @@ export default {
       marginBottom: 4,
     },
   }),
-  blockingMessageHeight: 36,
 };
\ No newline at end of file