Switch maps when connecting

2 files changed, 18 insertions, 2 deletions

diff --git a/app/components/Connect.css b/app/components/Connect.css
index b494e9ab3c..a47c4d07b7 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -9,9 +9,21 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: url(../assets/images/map/connecting@2x.png);
   background-size: cover;
   background-position: 0 -72px;
+  transition: 0.5s all ease-in-out;
+}
+
+.connect__map--connecting {
+  background-image: url(../assets/images/map/connecting@2x.png);
+}
+
+.connect__map--connected {
+  background-image: url(../assets/images/map/connected@2x.png);
+}
+
+.connect__map--disconnected {
+  background-image: url(../assets/images/map/not-connected@2x.png);
 }
 
 .connect__container {
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 83e49e3c2d..4ab942407b 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -64,6 +64,10 @@ export default class Connect extends Component {
     }
   }
 
+  mapClass() {
+    return ['connect__map', 'connect__map--' + this.props.connect.status].join(' ');
+  }
+
   render() {
     const preferredServer = this.props.settings.preferredServer;
     const serverName = this.serverName(preferredServer);
@@ -76,7 +80,7 @@ export default class Connect extends Component {
         <Header style={ this.headerStyle() } showSettings={ true } onSettings={ ::this.onSettings } />
         <Container>
           <div className="connect">
-            <div className="connect__map"></div>
+            <div className={ this.mapClass() }></div>
             <div className="connect__container">
 
               <div className="connect__status">