first commit

src/containers/App.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+// = styles =
+// 3rd
+import 'styles/bootstrap.scss';
+// custom
+import 'styles/layout.scss';
+import 'styles/theme.scss';
+import 'styles/ui.scss';
+import 'styles/app.scss';
+
+import lightTheme from './themes/lightTheme';
+import darkTheme from './themes/darkTheme';
+import grayTheme from './themes/grayTheme';
+
+
+injectTapEventPlugin(); // Needed for onTouchTap for Material UI
+
+
+class App extends Component {
+  componentDidMount() {}
+
+  render() {
+    const { layoutBoxed, navCollapsed, navBehind, fixedHeader, sidebarWidth, theme } = this.props;
+    let materialUITheme;
+    switch (theme) {
+      case 'gray':
+        materialUITheme = grayTheme;
+        break;
+      case 'dark':
+        materialUITheme = darkTheme;
+        break;
+      default:
+        materialUITheme = lightTheme;
+    }
+
+    return (
+      <MuiThemeProvider muiTheme={getMuiTheme(materialUITheme)}>
+        <div id="app-inner">
+          <div className="preloaderbar hide"><span className="bar" /></div>
+          <div
+            className={classnames('app-main full-height', {
+              'fixed-header': fixedHeader,
+              'nav-collapsed': navCollapsed,
+              'nav-behind': navBehind,
+              'layout-boxed': layoutBoxed,
+              'theme-gray': theme === 'gray',
+              'theme-dark': theme === 'dark',
+              'sidebar-sm': sidebarWidth === 'small',
+              'sidebar-lg': sidebarWidth === 'large'})
+                    }>
+            {this.props.children}
+          </div>
+        </div>
+      </MuiThemeProvider>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  layoutBoxed: state.settings.layoutBoxed,
+  navCollapsed: state.settings.navCollapsed,
+  navBehind: state.settings.navBehind,
+  fixedHeader: state.settings.fixedHeader,
+  sidebarWidth: state.settings.sidebarWidth,
+  theme: state.settings.theme,
+});
+
+module.exports = connect(
+  mapStateToProps
+)(App);

src/containers/themes/darkTheme.js

@@ -0,0 +1,33 @@
+import {
+  cyan700,
+  grey600,
+  green600, green400, green200,
+  fullWhite,
+} from 'material-ui/styles/colors';
+import {fade} from 'material-ui/utils/colorManipulator';
+import spacing from 'material-ui/styles/spacing';
+
+// $dark:                  #333C44 !default; // darken Blue 100 > #343E46
+// $theme_dark_text_color:       rgba(255,255,255,.7);
+
+export default {
+  spacing,
+  fontFamily: 'Roboto, sans-serif',
+  borderRadius: 2,
+  palette: {
+    primary1Color: cyan700,
+    primary2Color: cyan700,
+    primary3Color: grey600,
+    accent1Color: green600,
+    accent2Color: green400,
+    accent3Color: green200,
+    textColor: 'rgba(255,255,255,.7)',
+    secondaryTextColor: fade(fullWhite, 0.54),
+    alternateTextColor: '#333C44',
+    canvasColor: '#333C44',
+    borderColor: fade(fullWhite, 0.15),
+    disabledColor: fade(fullWhite, 0.3),
+    pickerHeaderColor: fade(fullWhite, 0.12),
+    clockCircleColor: fade(fullWhite, 0.12),
+  },
+};

src/containers/themes/grayTheme.js

@@ -0,0 +1,33 @@
+import {
+  cyan700,
+  grey600,
+  green600, green200, green400,
+  fullWhite,
+} from 'material-ui/styles/colors';
+import {fade} from 'material-ui/utils/colorManipulator';
+import spacing from 'material-ui/styles/spacing';
+
+// $theme_gray_sidebar_bg_color: grayscale($theme_dark_sidebar_bg_color); // or 3c3c3c
+// $theme_dark_text_color:       rgba(255,255,255,.7);
+
+export default {
+  spacing,
+  fontFamily: 'Roboto, sans-serif',
+  borderRadius: 2,
+  palette: {
+    primary1Color: cyan700,
+    primary2Color: cyan700,
+    primary3Color: grey600,
+    accent1Color: green600,
+    accent2Color: green400,
+    accent3Color: green200,
+    textColor: 'rgba(255,255,255,.7)',
+    secondaryTextColor: fade(fullWhite, 0.54),
+    alternateTextColor: '#3c3c3c',
+    canvasColor: '#3c3c3c',
+    borderColor: fade(fullWhite, 0.15),
+    disabledColor: fade(fullWhite, 0.3),
+    pickerHeaderColor: fade(fullWhite, 0.12),
+    clockCircleColor: fade(fullWhite, 0.12),
+  },
+};

src/containers/themes/lightTheme.js

@@ -0,0 +1,36 @@
+import {
+  cyan500, cyan700,
+  green400,
+  grey100, grey300, grey400, grey500,
+  white, darkBlack, fullBlack,
+} from 'material-ui/styles/colors';
+import {fade} from 'material-ui/utils/colorManipulator';
+import spacing from 'material-ui/styles/spacing';
+
+/**
+ *  Light Theme is the default theme used in material-ui. It is guaranteed to
+ *  have all theme variables needed for every component. Variables not defined
+ *  in a custom theme will default to these values.
+ */
+export default {
+  spacing,
+  fontFamily: 'Roboto, sans-serif',
+  borderRadius: 2,
+  palette: {
+    primary1Color: cyan500,
+    primary2Color: cyan700,
+    primary3Color: grey400,
+    accent1Color: green400,
+    accent2Color: grey100,
+    accent3Color: grey500,
+    textColor: darkBlack,
+    secondaryTextColor: fade(darkBlack, 0.54),
+    alternateTextColor: white,
+    canvasColor: white,
+    borderColor: grey300,
+    disabledColor: fade(darkBlack, 0.3),
+    pickerHeaderColor: cyan500,
+    clockCircleColor: fade(darkBlack, 0.07),
+    shadowColor: fullBlack,
+  },
+};