etesync/src/components/PimItemHeader.tsx

import * as React from 'react';

import { getPalette } from '../App';

export default (props: {text: string, backgroundColor?: string, children?: any}) => {
    const style = {
      header: {
        backgroundColor: (props.backgroundColor !== undefined) ? props.backgroundColor : getPalette('accent1Color'),
        color: getPalette('alternateTextColor'),
        padding: 15,
      },
      headerText: {
        marginTop: 10,
        marginBottom: 10,
      },
    };

    return (
      <div style={style.header}>
        <h2 style={style.headerText}>{props.text}</h2>
        {props.children}
      </div>
    );
};