import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; import injectSheet from 'react-jss'; const styles = theme => ({ root: { background: theme.trialStatusBar.progressBar.background, width: '25%', maxWidth: 200, height: 8, display: 'flex', alignItems: 'center', borderRadius: theme.borderRadius, overflow: 'hidden', }, progress: { background: theme.trialStatusBar.progressBar.progressIndicator, width: ({ percent }) => `${percent}%`, height: '100%', }, }); @injectSheet(styles) @observer class ProgressBar extends Component { static propTypes = { classes: PropTypes.object.isRequired, percent: PropTypes.number.isRequired, }; render() { const { classes, } = this.props; return (