Remove the hacky getPalette function and use the theme instead.

master
Tom Hacohen 6 years ago
parent 4bf8896931
commit 51e436be2e

@ -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: {

@ -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)));

@ -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: {

@ -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}
</div>
);
};
});

@ -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}) => {
<h2 style={style.headerText}>{props.text}</h2>
</div>
);
};
});

Loading…
Cancel
Save