Add success/fail color to the progress bar in the swap modal (#436)

atomiclabs · Jul 20, 2018 · 5e7512d · 5e7512d
1 parent af14a6b
commit 5e7512d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/app/renderer/components/Progress.js b/app/renderer/components/Progress.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {classNames} from 'react-extras';
 import './Progress.scss';
 
-const Progress = ({value, showLabel, hideWhenZero, ...props}) => {
+const Progress = ({value, color, showLabel, hideWhenZero, ...props}) => {
 	if (value > 1 || value < 0) {
 		throw new TypeError('Expected a value in the range 0...1');
 	}
@@ -17,7 +17,7 @@ const Progress = ({value, showLabel, hideWhenZero, ...props}) => {
 
 	return (
 		<div {...props} className={className}>
-			<div className="Progress__bar" style={{width: percentageFormatted}}>
+			<div className="Progress__bar" style={{width: percentageFormatted, background: color}}>
 				{showLabel &&
 					<div className="Progress__label">{percentageFormatted}</div>
 				}

diff --git a/app/renderer/components/Progress.scss b/app/renderer/components/Progress.scss
@@ -10,7 +10,7 @@
 		width: 0;
 		height: 5px;
 		background: var(--progress-gradient);
-		transition: width 0.5s ease-in-out;
+		transition: width 0.5s, background 0.5s;
 	}
 
 	&__label {

diff --git a/app/renderer/components/SwapDetails.js b/app/renderer/components/SwapDetails.js
@@ -125,7 +125,13 @@ class SwapDetails extends React.Component {
 							</div>
 						</div>
 						<div className="section progress">
-							<Progress value={swap.progress}/>
+							<Progress
+								value={swap.progress}
+								color={
+									(swap.status === 'completed' && 'var(--success-color)') ||
+									(swap.status === 'failed' && 'var(--error-color)')
+								}
+							/>
 							<p>
 								{title(swap.statusFormatted)}
 								{(swap.status === 'failed' && swap.error) && (