Polishing DeviceInteraction component

src/components/DeviceInteraction/DeviceInteractionStep.js

@@ -177,10 +177,10 @@ class DeviceInteractionStep extends PureComponent<
         isPrecedentActive={isPrecedentActive}
         isError={isError}
       >
-        <IconContainer>{step.icon}</IconContainer>
+        <IconContainer isTransparent={!isActive && !isSuccess}>{step.icon}</IconContainer>
         <Box py={4} justify="center" grow shrink>
           {title && (
-            <Box color={isActive && !isSuccess ? 'dark' : ''} ff="Open Sans|SemiBold">
+            <Box color={isActive || isSuccess ? 'dark' : ''} ff="Open Sans|SemiBold">
               {title}
             </Box>
           )}

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.isFinished ? p.theme.colors.wallet : ''};
+    p.isError ? p.theme.colors.alertRed : p.isActive || p.isSuccess ? 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)};
@@ -42,8 +42,22 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({
       : 'none'};
 `
 
-export const IconContainer = ({ children }: { children: any }) => (
-  <Box align="center" justify="center" style={{ width: 70 }}>
+export const IconContainer = ({
+  children,
+  isTransparent,
+}: {
+  children: any,
+  isTransparent: boolean,
+}) => (
+  <Box
+    align="center"
+    justify="center"
+    color="dark"
+    style={{
+      width: 70,
+      opacity: isTransparent ? 0.5 : 1,
+    }}
+  >
     {children}
   </Box>
 )
@@ -58,10 +72,10 @@ const SpinnerContainerWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: 350ms cubic-bezier(0.62, 0.28, 0.39, 0.94);
+  transition: 300ms cubic-bezier(0.62, 0.28, 0.39, 0.94);
   transition-property: transform opacity;
   opacity: ${p => (p.isVisible ? 1 : 0)};
-  transform: translate3d(0, ${p => (!p.isVisible ? -40 : 0)}px, 0);
+  transform: translate3d(0, ${p => (!p.isVisible ? -20 : 0)}px, 0);
 `
 
 export const SpinnerContainer = ({ isVisible }: { isVisible: boolean }) => (
@@ -72,7 +86,7 @@ export const SpinnerContainer = ({ isVisible }: { isVisible: boolean }) => (
 
 const SuccessContainerWrapper = styled(SpinnerContainerWrapper)`
   color: ${p => p.theme.colors.wallet};
-  transform: translate3d(0, ${p => (!p.isVisible ? 40 : 0)}px, 0);
+  transform: translate3d(0, ${p => (!p.isVisible ? 20 : 0)}px, 0);
 `
 
 export const SuccessContainer = ({ isVisible }: { isVisible: boolean }) => (
@@ -83,7 +97,7 @@ export const SuccessContainer = ({ isVisible }: { isVisible: boolean }) => (
 
 const ErrorContainerWrapper = styled(SpinnerContainerWrapper)`
   color: ${p => p.theme.colors.alertRed};
-  transform: translate3d(0, ${p => (!p.isVisible ? 40 : 0)}px, 0);
+  transform: translate3d(0, ${p => (!p.isVisible ? 20 : 0)}px, 0);
 `
 
 export const ErrorContainer = ({ isVisible }: { isVisible: boolean }) => (

src/components/DeviceInteraction/stories.js

@@ -22,7 +22,7 @@ const MockIcon = styled.div`
   border-radius: 50%;
 `
 
-const mockIcon = <MockIcon size={36} />
+const mockIcon = <MockIcon size={26} />
 
 class Wrapper extends React.Component<any> {
   _ref = null
@@ -48,8 +48,7 @@ class Wrapper extends React.Component<any> {
             {
               id: 'deviceConnect',
               title: 'Connect your device',
-              icon: <IconUsb size={36} />,
-              desc: 'If you dont connect your device, we wont be able to read on it',
+              icon: <IconUsb size={26} />,
               render: ({ onSuccess, onFail }) => (
                 <Box p={2} bg="lightGrey" mt={2} borderRadius={1}>
                   <Box horizontal flow={2}>

src/components/EnsureDeviceApp.js

@@ -27,7 +27,7 @@ import { getCurrentDevice } from 'reducers/devices'
 export const WrongAppOpened = createCustomErrorClass('WrongAppOpened')
 export const WrongDeviceForAccount = createCustomErrorClass('WrongDeviceForAccount')
 
-const usbIcon = <IconUsb size={36} />
+const usbIcon = <IconUsb size={30} />
 const Bold = props => <Text ff="Open Sans|Bold" {...props} />
 
 const mapStateToProps = state => ({
@@ -107,7 +107,7 @@ class EnsureDeviceApp extends Component<{
           {
             id: 'address',
             title: this.renderOpenAppTitle,
-            icon: Icon ? <Icon size={24} /> : null,
+            icon: Icon ? <Icon size={30} /> : null,
             run: this.openAppInteractionHandler,
           },
         ]}

src/components/GenuineCheck.js

@@ -24,7 +24,7 @@ import Text from 'components/base/Text'
 
 import IconUsb from 'icons/Usb'
 import IconHome from 'icons/Home'
-import IconEye from 'icons/Eye'
+import IconGenuineCheck from 'icons/GenuineCheck'
 
 const DeviceNotGenuineError = createCustomErrorClass('DeviceNotGenuine')
 
@@ -36,9 +36,9 @@ type Props = {
   device: ?Device,
 }
 
-const usbIcon = <IconUsb size={36} />
+const usbIcon = <IconUsb size={26} />
 const homeIcon = <IconHome size={24} />
-const eyeIcon = <IconEye size={24} />
+const genuineCheckIcon = <IconGenuineCheck size={24} />
 
 const mapStateToProps = state => ({
   device: getCurrentDevice(state),
@@ -133,7 +133,7 @@ class GenuineCheck extends PureComponent<Props> {
             {' on your device'}
           </Trans>
         ),
-        icon: eyeIcon,
+        icon: genuineCheckIcon,
         run: this.checkGenuineInteractionHandler,
       },
     ]