Added theme support

src/App.js

@@ -10,7 +10,9 @@ import {
   Link,
   Redirect
 } from 'react-router-dom';
-
+import { ThemeProvider } from '@material-ui/core/styles'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import Theme from './Theme.js'
 import Logo from './widgets/logo';
 import Ripples from 'react-ripples';
 import CreateGameView from './views/CreateGame';
@@ -25,7 +27,7 @@ import AlertMUITemplate from "react-alert-template-mui";
 import io from 'socket.io-client';
 import feathers from '@feathersjs/client';
 
-const socket = io('http://192.168.0.15:3030');
+const socket = io('http://localhost:3030');
 const Cookie = new Cookies();
 const feathersClient = feathers();
 feathersClient.configure(feathers.socketio(socket));
@@ -54,25 +56,27 @@ class App extends Component{
     }
 
     return (
-      <Provider template={AlertMUITemplate}>
-        <div className="appContainer">
-          <Router>
-            {redirect}
-            <Switch>
-            <Route path="/user/new" render={(props)=><InitializeUserView {...props} connection={socket} setUser={this.setUser}/>}/>
-            <Route path="/join/random" render={(props)=><JoiningStory {...props} userId={this.state.userId}/>}/>
-            <Route path="/story/:storyId" render={(props)=><StoryChat {...props} connection={socket} userId={this.state.userId}/>}/>
-              <Route path="/create">
-                <CreateGameView connection={socket} userId={this.state.userId}></CreateGameView>
-              </Route>
-              <Route path="/">
-                <HomeView></HomeView>
-              </Route>
-            </Switch>
-          </Router>
-        </div>
-      </Provider>
-
+      <ThemeProvider theme={Theme}>
+        <CssBaseline/>
+        <Provider template={AlertMUITemplate}>
+          <div className="appContainer">
+            <Router>
+              {redirect}
+              <Switch>
+              <Route path="/user/new" render={(props)=><InitializeUserView {...props} connection={socket} setUser={this.setUser}/>}/>
+              <Route path="/join/random" render={(props)=><JoiningStory {...props} userId={this.state.userId}/>}/>
+              <Route path="/story/:storyId" render={(props)=><StoryChat {...props} connection={socket} userId={this.state.userId}/>}/>
+                <Route path="/create">
+                  <CreateGameView connection={socket} userId={this.state.userId}></CreateGameView>
+                </Route>
+                <Route path="/">
+                  <HomeView></HomeView>
+                </Route>
+              </Switch>
+            </Router>
+          </div>
+        </Provider>
+      </ThemeProvider>
     );
   }
 }

src/Theme.js

@@ -0,0 +1,25 @@
+import {createMuiTheme} from '@material-ui/core/styles';
+import { colors } from '@material-ui/core';
+
+const theme = createMuiTheme({
+    palette: {
+        primary: {
+          light: '#484848',
+          main: '#212121',
+          dark: '#000000',
+          contrastText: '#000000',
+        },
+        secondary: {
+          light: '#5f5fc4',
+          main: '#283593',
+          dark: '#001064',
+          contrastText: '#ffffff',
+        },
+      },
+      typography: {
+        useNextVariants: true,
+        fontFamily: '"Times New Roman", Arial, Helvetica, sans-serif',
+     },
+})
+
+export default theme;

src/widgets/logo.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import '../App.css';
+import { withTheme } from '@material-ui/core/styles';
 
-function Logo() {
+function Logo(props) {
+  console.log(props);
   return (
     <div className="logo">
-        <div className="leftPortion">
+        <div className="leftPortion" style={{backgroundColor:'#e0e0e0'}}>
           <h1>O</h1>
         </div>
-        <div className="rightPortion">
+        <div className="rightPortion" style={{backgroundColor:props.theme.palette.secondary.main}}>
           <h1>W</h1>
         </div>
     </div>
   );
 }
 
-export default Logo;
+export default withTheme(Logo);