Reimplement TopBar

src/components/TopBar.js

@@ -0,0 +1,42 @@
+// @flow
+import React from "react";
+
+import AppBar from "material-ui/AppBar";
+import Toolbar from "material-ui/Toolbar";
+import Typography from "material-ui/Typography";
+import { CircularProgress } from "material-ui/Progress";
+
+export type TopBarProps = {
+  title: string,
+  connected: boolean
+};
+
+export type TopBarState = {
+
+};
+
+export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+  constructor(props: TopBarProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <AppBar position="static">
+        <Toolbar>
+          {this.renderConnectionIndicator()}
+          <Typography type="title">{this.props.title}</Typography>
+        </Toolbar>
+      </AppBar>
+    );
+  }
+
+  renderConnectionIndicator() {
+    if (this.props.connected) {
+      return (<i style={{fontSize: 48}} className="mdi mdi-map"></i>);
+    }
+    return (
+      <CircularProgress size={48} style={{color: "rgba(0, 0, 0, 0.54)"}} />
+    );
+  }
+}