diff --git a/client/components/ProgressBar.js b/client/components/ProgressBar.js index 730cae3..0ec874a 100644 --- a/client/components/ProgressBar.js +++ b/client/components/ProgressBar.js @@ -9,8 +9,10 @@ export default class ProgressBar extends React.Component { render() { const failed = this.props.value < 0; + const inProgress = this.props.value < 1 && this.props.value > 0; const classes = classnames('progress-bar', { 'progress-bar-failed': failed, + 'progress-bar-in-progress': inProgress, 'progress-bar-small': this.props.small }) diff --git a/client/components/UploadPage.js b/client/components/UploadPage.js index a53d717..4b118c6 100644 --- a/client/components/UploadPage.js +++ b/client/components/UploadPage.js @@ -70,7 +70,7 @@ export default class UploadPage extends React.Component { numCompleted++ } } - + keys.reverse() return
@@ -80,7 +80,7 @@ export default class UploadPage extends React.Component {

This link will work as long as this page is open.

- { Object.keys(this.state.peerProgress).map((key) => { + { keys.map((key) => { return })}
diff --git a/css/index.styl b/css/index.styl index 363dafe..b5986e9 100644 --- a/css/index.styl +++ b/css/index.styl @@ -6,6 +6,7 @@ light-blue = #40C0CB light-gray = #EEE light-green = #AEE239 light-red = #E23430 +light-yellow = #FFE476 red = #C40D08 @keyframes rotate { @@ -200,6 +201,18 @@ p { } } + &.progress-bar-in-progress { + + .progress-bar-inner { + background: #FFCC00 + box-shadow: inset 0 1px 1px light-yellow + } + + .progress-bar-text { + color: black + } + } + &.progress-bar-small { height: 30px width: 50%