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, }, ]