diff --git a/src/components/DeviceInteraction/DeviceInteractionStep.js b/src/components/DeviceInteraction/DeviceInteractionStep.js
index 9b77fb4a..3ba0fb8a 100644
--- a/src/components/DeviceInteraction/DeviceInteractionStep.js
+++ b/src/components/DeviceInteraction/DeviceInteractionStep.js
@@ -177,10 +177,10 @@ class DeviceInteractionStep extends PureComponent<
isPrecedentActive={isPrecedentActive}
isError={isError}
>
- {step.icon}
+ {step.icon}
{title && (
-
+
{title}
)}
diff --git a/src/components/DeviceInteraction/components.js b/src/components/DeviceInteraction/components.js
index 3477110a..10a6bcb3 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.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 }) => (
-
+export const IconContainer = ({
+ children,
+ isTransparent,
+}: {
+ children: any,
+ isTransparent: boolean,
+}) => (
+
{children}
)
@@ -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 }) => (
diff --git a/src/components/DeviceInteraction/stories.js b/src/components/DeviceInteraction/stories.js
index 4ddca24c..13feab77 100644
--- a/src/components/DeviceInteraction/stories.js
+++ b/src/components/DeviceInteraction/stories.js
@@ -22,7 +22,7 @@ const MockIcon = styled.div`
border-radius: 50%;
`
-const mockIcon =
+const mockIcon =
class Wrapper extends React.Component {
_ref = null
@@ -48,8 +48,7 @@ class Wrapper extends React.Component {
{
id: 'deviceConnect',
title: 'Connect your device',
- icon: ,
- desc: 'If you dont connect your device, we wont be able to read on it',
+ icon: ,
render: ({ onSuccess, onFail }) => (
diff --git a/src/components/EnsureDeviceApp.js b/src/components/EnsureDeviceApp.js
index 7685c77c..23385b67 100644
--- a/src/components/EnsureDeviceApp.js
+++ b/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 =
+const usbIcon =
const Bold = props =>
const mapStateToProps = state => ({
@@ -107,7 +107,7 @@ class EnsureDeviceApp extends Component<{
{
id: 'address',
title: this.renderOpenAppTitle,
- icon: Icon ? : null,
+ icon: Icon ? : null,
run: this.openAppInteractionHandler,
},
]}
diff --git a/src/components/GenuineCheck.js b/src/components/GenuineCheck.js
index fd333647..e083ce24 100644
--- a/src/components/GenuineCheck.js
+++ b/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 =
+const usbIcon =
const homeIcon =
-const eyeIcon =
+const genuineCheckIcon =
const mapStateToProps = state => ({
device: getCurrentDevice(state),
@@ -133,7 +133,7 @@ class GenuineCheck extends PureComponent {
{' on your device'}
),
- icon: eyeIcon,
+ icon: genuineCheckIcon,
run: this.checkGenuineInteractionHandler,
},
]