Remove highlight color of DeviceInteraction when finished

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}

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)};

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}