diff options
| -rw-r--r-- | app/components/Connect.css | 14 | ||||
| -rw-r--r-- | app/components/Connect.js | 6 |
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"> |