diff options
author | vantezzen <hello@vantezzen.io> | 2019-10-24 15:55:22 +0200 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-10-24 15:55:22 +0200 |
commit | bacb5b940333f7e3af9f9d978d1d72c75f1aa321 (patch) | |
tree | 50c8ecb3d08e997106e48d1de5b904a2dba30991 /src/features/trialStatusBar/components/ProgressBar.js | |
parent | Merge translations (diff) | |
parent | Switch to beta version (diff) | |
download | ferdium-app-bacb5b940333f7e3af9f9d978d1d72c75f1aa321.tar.gz ferdium-app-bacb5b940333f7e3af9f9d978d1d72c75f1aa321.tar.zst ferdium-app-bacb5b940333f7e3af9f9d978d1d72c75f1aa321.zip |
Merge branch 'develop' into l10n_develop
Diffstat (limited to 'src/features/trialStatusBar/components/ProgressBar.js')
-rw-r--r-- | src/features/trialStatusBar/components/ProgressBar.js | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/src/features/trialStatusBar/components/ProgressBar.js b/src/features/trialStatusBar/components/ProgressBar.js new file mode 100644 index 000000000..41b74d396 --- /dev/null +++ b/src/features/trialStatusBar/components/ProgressBar.js | |||
@@ -0,0 +1,45 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | |||
6 | const styles = theme => ({ | ||
7 | root: { | ||
8 | background: theme.trialStatusBar.progressBar.background, | ||
9 | width: '25%', | ||
10 | maxWidth: 200, | ||
11 | height: 8, | ||
12 | display: 'flex', | ||
13 | alignItems: 'center', | ||
14 | borderRadius: theme.borderRadius, | ||
15 | overflow: 'hidden', | ||
16 | }, | ||
17 | progress: { | ||
18 | background: theme.trialStatusBar.progressBar.progressIndicator, | ||
19 | width: ({ percent }) => `${percent}%`, | ||
20 | height: '100%', | ||
21 | }, | ||
22 | }); | ||
23 | |||
24 | @injectSheet(styles) @observer | ||
25 | class ProgressBar extends Component { | ||
26 | static propTypes = { | ||
27 | classes: PropTypes.object.isRequired, | ||
28 | }; | ||
29 | |||
30 | render() { | ||
31 | const { | ||
32 | classes, | ||
33 | } = this.props; | ||
34 | |||
35 | return ( | ||
36 | <div | ||
37 | className={classes.root} | ||
38 | > | ||
39 | <div className={classes.progress} /> | ||
40 | </div> | ||
41 | ); | ||
42 | } | ||
43 | } | ||
44 | |||
45 | export default ProgressBar; | ||