feat: add online and offline theme

Author: pyphilia

src/App.js

@@ -3,15 +3,17 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ReduxToastr from 'react-redux-toastr';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { MuiThemeProvider } from '@material-ui/core/styles';
 import { withTranslation } from 'react-i18next';
+import { Detector } from 'react-detect-offline';
 import Home from './Home';
 import VisitSpace from './components/VisitSpace';
 import SpacesNearby from './components/SpacesNearby';
 import Settings from './components/Settings';
 import LoadSpace from './components/LoadSpace';
 import SpaceScreen from './components/space/SpaceScreen';
 import DeveloperScreen from './components/developer/DeveloperScreen';
+import { OnlineTheme, OfflineTheme } from './themes';
 import {
   SETTINGS_PATH,
   SPACE_PATH,
@@ -31,16 +33,6 @@ import {
 import { DEFAULT_LANGUAGE } from './config/constants';
 import './App.css';
 
-const theme = createMuiTheme({
-  typography: {
-    useNextVariants: true,
-  },
-  palette: {
-    primary: { light: '#5050d2', main: '#5050d2', dark: '#5050d2' },
-    secondary: { light: '#eeeeee', main: '#eeeeee', dark: '#eeeeee' },
-  },
-});
-
 export class App extends Component {
   state = { height: 0 };
 
@@ -107,29 +99,42 @@ export class App extends Component {
 
   render() {
     const { height } = this.state;
+
     return (
-      <MuiThemeProvider theme={theme}>
-        <div>
-          <ReduxToastr
-            transitionIn="fadeIn"
-            preventDuplicates
-            transitionOut="fadeOut"
-          />
-        </div>
-        <Router>
-          <div className="app" style={{ height }}>
-            <Switch>
-              <Route exact path={HOME_PATH} component={Home} />
-              <Route exact path={SPACES_NEARBY_PATH} component={SpacesNearby} />
-              <Route exact path={VISIT_PATH} component={VisitSpace} />
-              <Route exact path={LOAD_SPACE_PATH} component={LoadSpace} />
-              <Route exact path={SETTINGS_PATH} component={Settings} />
-              <Route exact path={SPACE_PATH} component={SpaceScreen} />
-              <Route exact path={DEVELOPER_PATH} component={DeveloperScreen} />
-            </Switch>
-          </div>
-        </Router>
-      </MuiThemeProvider>
+      <Detector
+        render={({ online }) => (
+          <MuiThemeProvider theme={online ? OnlineTheme : OfflineTheme}>
+            <div>
+              <ReduxToastr
+                transitionIn="fadeIn"
+                preventDuplicates
+                transitionOut="fadeOut"
+              />
+            </div>
+            <Router>
+              <div className="app" style={{ height }}>
+                <Switch>
+                  <Route exact path={HOME_PATH} component={Home} />
+                  <Route
+                    exact
+                    path={SPACES_NEARBY_PATH}
+                    component={SpacesNearby}
+                  />
+                  <Route exact path={VISIT_PATH} component={VisitSpace} />
+                  <Route exact path={LOAD_SPACE_PATH} component={LoadSpace} />
+                  <Route exact path={SETTINGS_PATH} component={Settings} />
+                  <Route exact path={SPACE_PATH} component={SpaceScreen} />
+                  <Route
+                    exact
+                    path={DEVELOPER_PATH}
+                    component={DeveloperScreen}
+                  />
+                </Switch>
+              </div>
+            </Router>
+          </MuiThemeProvider>
+        )}
+      />
     );
   }
 }
@@ -147,10 +152,7 @@ const mapDispatchToProps = {
   dispatchGetGeolocationEnabled: getGeolocationEnabled,
 };
 
-const ConnectedApp = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App);
+const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);
 
 const TranslatedApp = withTranslation()(ConnectedApp);