Remove the hacky getPalette function and use the theme instead.

src/App.tsx

@@ -41,19 +41,6 @@ const muiTheme = createMuiTheme({
   }
 });
 
-// FIXME: get rid of this one
-export function getPalette(part: string): string {
-  const palette = {
-    primary1Color: amber[500],
-    primary2Color: amber[700],
-    accent1Color: lightBlue[500],
-    textColor: 'black',
-    alternateTextColor: 'white',
-  };
-
-  return palette[part] || '';
-}
-
 export const routeResolver = new RouteResolver({
   home: '',
   pim: {

src/SideMenu/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { List, ListItem, ListSubheader, ListDivider } from '../widgets/List';
+import { Theme, withTheme } from '@material-ui/core/styles';
 import ActionCode from '@material-ui/icons/Code';
 import ActionHome from '@material-ui/icons/Home';
 import ActionBugReport from '@material-ui/icons/BugReport';
@@ -13,7 +14,7 @@ const logo = require('../images/logo.svg');
 import SideMenuJournals from './SideMenuJournals';
 import ErrorBoundary from '../components/ErrorBoundary';
 
-import { routeResolver, getPalette } from '../App';
+import { routeResolver } from '../App';
 
 import { store, JournalsType, UserInfoData, StoreState, CredentialsData } from '../store';
 import { logout } from '../store/actions';
@@ -28,6 +29,7 @@ interface PropsType {
 type PropsTypeInner = RouteComponentProps<{}> & PropsType & {
   journals: JournalsType;
   userInfo: UserInfoData;
+  theme: Theme;
 };
 
 class SideMenu extends React.PureComponent<PropsTypeInner> {
@@ -48,6 +50,7 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
   }
 
   render() {
+    const { theme } = this.props;
     const username = (this.props.etesync && this.props.etesync.credentials.email) ?
       this.props.etesync.credentials.email
       : C.appName;
@@ -83,7 +86,7 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
       <div style={{ overflowX: 'hidden', width: 250}}>
         <div className="App-drawer-header">
           <img className="App-drawer-logo" src={logo} />
-          <div style={{color: getPalette('alternateTextColor')}} >
+          <div style={{ color: theme.palette.secondary.contrastText }} >
             {username}
           </div>
         </div>
@@ -116,6 +119,6 @@ const mapStateToProps = (state: StoreState, props: PropsType) => {
   };
 };
 
-export default withRouter(connect(
+export default withTheme()(withRouter(connect(
   mapStateToProps
-)(SideMenu));
+)(SideMenu)));

src/components/LoginForm.tsx

@@ -7,8 +7,6 @@ import Switch from '@material-ui/core/Switch';
 
 import ExternalLink from '../widgets/ExternalLink';
 
-import { getPalette } from '../App';
-
 import * as C from '../constants';
 
 interface FormErrors {
@@ -103,7 +101,6 @@ class LoginForm extends React.PureComponent {
       form: {
       },
       forgotPassword: {
-        color: getPalette('accent1Color'),
         paddingTop: 20,
       },
       textField: {

src/components/PimItemHeader.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 
-import { getPalette } from '../App';
+import { Theme, withTheme } from '@material-ui/core/styles';
 
-export default (props: {text: string, backgroundColor?: string, children?: any}) => {
+export default withTheme()((props: {text: string, backgroundColor?: string, children?: any, theme: Theme}) => {
     const style = {
       header: {
-        backgroundColor: (props.backgroundColor !== undefined) ? props.backgroundColor : getPalette('accent1Color'),
+        backgroundColor: (props.backgroundColor !== undefined) ?
-        color: getPalette('alternateTextColor'),
+          props.backgroundColor : props.theme.palette.secondary.main,
+        color: props.theme.palette.secondary.contrastText,
         padding: 15,
       },
       headerText: {
@@ -21,4 +22,4 @@ export default (props: {text: string, backgroundColor?: string, children?: any})
         {props.children}
       </div>
     );
-};
+});

src/components/SecondaryHeader.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import { getPalette } from '../App';
+import { Theme, withTheme } from '@material-ui/core/styles';
 
-export default (props: {text: string}) => {
+export default withTheme()((props: {text: string, theme: Theme}) => {
     const style = {
       header: {
-        backgroundColor: getPalette('primary1Color'),
+        backgroundColor: props.theme.palette.primary.main,
-        color: getPalette('alternateTextColor'),
+        color: props.theme.palette.primary.contrastText,
         padding: 15,
         textAlign: 'center' as any,
       },
@@ -20,4 +20,4 @@ export default (props: {text: string}) => {
         <h2 style={style.headerText}>{props.text}</h2>
       </div>
     );
-};
+});