Here's my App.js file, I don't see any changes in the theme.
import 'babel-polyfill';
import React, { Component } from 'react';
import { Admin, Delete, Resource } from 'admin-on-rest';
import buildApolloClient from './aorApolloClient';
import './App.css';
import authClient from './authClient';
import sagas from './sagas';
import themeReducer from './themeReducer';
import Login from './Login';
import Layout from './Layout';
import Menu from './Menu';
import { Dashboard } from './dashboard';
import customRoutes from './routes';
import translations from './i18n';
import { VisitorList, VisitorEdit, VisitorDelete, VisitorIcon } from './visitors';
import { CommandList, CommandEdit, CommandIcon } from './commands';
import { ProductList, ProductCreate, ProductEdit, ProductIcon } from './products';
import { CategoryList, CategoryEdit, CategoryIcon } from './categories';
import { SegmentList, SegmentIcon } from './segments';
import { ReviewList, ReviewEdit, ReviewIcon } from './reviews';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {
blue400, blue700,
pinkA200,
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';
const myTheme = {
spacing: spacing,
fontFamily: 'Roboto, sans-serif',
palette: {
primary1Color: blue400,
primary2Color: blue700,
primary3Color: grey400,
accent1Color: pinkA200,
accent2Color: grey100,
accent3Color: grey500,
textColor: darkBlack,
alternateTextColor: white,
canvasColor: white,
borderColor: grey300,
disabledColor: fade(darkBlack, 0.3),
pickerHeaderColor: blue400,
clockCircleColor: fade(darkBlack, 0.07),
shadowColor: fullBlack,
},
}
class App extends Component {
constructor() {
super();
this.state = { restClient: null };
}
componentWillMount() {
buildApolloClient()
.then(restClient => this.setState({ restClient }));
}
render() {
if (!this.state.restClient) {
return <div>Loading</div>;
}
return (
<Admin
title="Cruceritis HQ"
restClient={this.state.restClient}
customReducers={{ theme: themeReducer }}
theme={getMuiTheme(myTheme)}
customSagas={sagas}
customRoutes={customRoutes}
authClient={authClient}
dashboard={Dashboard}
loginPage={Login}
appLayout={Layout}
menu={Menu}
messages={translations}
locale="es"
>
<Resource name="Customer" list={VisitorList} edit={VisitorEdit} remove={VisitorDelete} icon={VisitorIcon} />
<Resource name="Command" list={CommandList} edit={CommandEdit} remove={Delete} icon={CommandIcon} options={{ label: 'Orders' }} />
<Resource name="Product" list={ProductList} create={ProductCreate} edit={ProductEdit} remove={Delete} icon={ProductIcon} />
<Resource name="Category" list={CategoryList} edit={CategoryEdit} remove={Delete} icon={CategoryIcon} />
<Resource name="Review" list={ReviewList} edit={ReviewEdit} icon={ReviewIcon} />
<Resource name="Segment" list={SegmentList} icon={SegmentIcon} />
<Resource name="CommandItem" />
</Admin>
);
}
}
export default App;
I'm clueless at what I might be doing wrong...