From 45c1691bd1f177d4db96e3f4aad7dce411089cb3 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 27 Jun 2018 15:45:46 +0200
Subject: [PATCH] Remove highlight color of DeviceInteraction when finished

---
 src/components/DeviceInteraction/DeviceInteractionStep.js | 3 +++
 src/components/DeviceInteraction/components.js            | 2 +-
 src/components/DeviceInteraction/index.js                 | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/DeviceInteraction/DeviceInteractionStep.js b/src/components/DeviceInteraction/DeviceInteractionStep.js
index 5fe9a077..9b77fb4a 100644
--- a/src/components/DeviceInteraction/DeviceInteractionStep.js
+++ b/src/components/DeviceInteraction/DeviceInteractionStep.js
@@ -29,6 +29,7 @@ type Props = {
   isFirst: boolean,
   isLast: boolean,
   isActive: boolean,
+  isFinished: boolean,
   isPrecedentActive: boolean,
   isError: boolean,
   isSuccess: boolean,
@@ -152,6 +153,7 @@ class DeviceInteractionStep extends PureComponent<
       isFirst,
       isLast,
       isActive,
+      isFinished,
       isPrecedentActive,
       isSuccess,
       isError,
@@ -169,6 +171,7 @@ class DeviceInteractionStep extends PureComponent<
       <DeviceInteractionStepContainer
         isFirst={isFirst}
         isLast={isLast}
+        isFinished={isFinished}
         isSuccess={isSuccess}
         isActive={isActive}
         isPrecedentActive={isPrecedentActive}
diff --git a/src/components/DeviceInteraction/components.js b/src/components/DeviceInteraction/components.js
index a6cb01ae..fe678da4 100644
--- a/src/components/DeviceInteraction/components.js
+++ b/src/components/DeviceInteraction/components.js
@@ -27,7 +27,7 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({
   min-height: 80px;
   border: 1px solid ${p => p.theme.colors.fog};
   border-color: ${p =>
-    p.isError ? p.theme.colors.alertRed : p.isActive ? p.theme.colors.wallet : ''};
+    p.isError ? p.theme.colors.alertRed : p.isActive && !p.isFinished ? p.theme.colors.wallet : ''};
   border-top-color: ${p => (p.isFirst || p.isActive ? '' : 'transparent')};
   border-bottom-color: ${p => (p.isPrecedentActive ? 'transparent' : '')};
   border-bottom-left-radius: ${p => (p.isLast ? `${radii[1]}px` : 0)};
diff --git a/src/components/DeviceInteraction/index.js b/src/components/DeviceInteraction/index.js
index 5542aaaa..b11e038b 100644
--- a/src/components/DeviceInteraction/index.js
+++ b/src/components/DeviceInteraction/index.js
@@ -99,6 +99,7 @@ class DeviceInteraction extends PureComponent<Props, State> {
               isActive={i === stepIndex}
               isPassed={i < stepIndex}
               isSuccess={i < stepIndex || (i === stepIndex && isSuccess)}
+              isFinished={isSuccess}
               onSuccess={this.handleSuccess}
               onFail={this.handleFail}
               data={data}