diff --git a/src/App.tsx b/src/App.tsx index 3b27d94..30209fd 100644 --- a/src/App.tsx +++ b/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: { diff --git a/src/SideMenu/index.tsx b/src/SideMenu/index.tsx index 76a3ca4..d3f0785 100644 --- a/src/SideMenu/index.tsx +++ b/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 { @@ -48,6 +50,7 @@ class SideMenu extends React.PureComponent { } 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 {
-
+
{username}
@@ -116,6 +119,6 @@ const mapStateToProps = (state: StoreState, props: PropsType) => { }; }; -export default withRouter(connect( +export default withTheme()(withRouter(connect( mapStateToProps -)(SideMenu)); +)(SideMenu))); diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx index 67ba915..717ae24 100644 --- a/src/components/LoginForm.tsx +++ b/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: { diff --git a/src/components/PimItemHeader.tsx b/src/components/PimItemHeader.tsx index 78b0c9c..a9f8f77 100644 --- a/src/components/PimItemHeader.tsx +++ b/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'), - color: getPalette('alternateTextColor'), + backgroundColor: (props.backgroundColor !== undefined) ? + 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}
); -}; +}); diff --git a/src/components/SecondaryHeader.tsx b/src/components/SecondaryHeader.tsx index 0c3804e..65f2e38 100644 --- a/src/components/SecondaryHeader.tsx +++ b/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'), - color: getPalette('alternateTextColor'), + backgroundColor: props.theme.palette.primary.main, + color: props.theme.palette.primary.contrastText, padding: 15, textAlign: 'center' as any, }, @@ -20,4 +20,4 @@ export default (props: {text: string}) => {

{props.text}

); -}; +});