Update DeviceInteraction icons style

src/components/DeviceInteraction/components.js

@@ -12,6 +12,7 @@ import Spinner from 'components/base/Spinner'
 import IconCheck from 'icons/Check'
 import IconCross from 'icons/Cross'
 import IconExclamationCircle from 'icons/ExclamationCircle'
+import IconSmoothBorders from 'icons/SmoothBorders'
 
 export const DeviceInteractionStepContainer = styled(Box).attrs({
   horizontal: true,
@@ -34,6 +35,19 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({
   border-top-right-radius: ${p => (p.isFirst ? `${radii[1]}px` : 0)};
 `
 
+const AbsCenter = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const smoothBorders = <IconSmoothBorders size={28} />
+
 export const IconContainer = ({
   children,
   isTransparent,
@@ -42,15 +56,15 @@ export const IconContainer = ({
   isTransparent: boolean,
 }) => (
   <Box
-    align="center"
-    justify="center"
+    relative
     color="dark"
     style={{
       width: 70,
       opacity: isTransparent ? 0.5 : 1,
     }}
   >
-    {children}
+    <AbsCenter>{smoothBorders}</AbsCenter>
+    <AbsCenter>{children}</AbsCenter>
   </Box>
 )
 

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={30} />
+const usbIcon = <IconUsb size={18} />
 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={30} /> : null,
+            icon: Icon ? <Icon size={18} /> : 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 IconGenuineCheck from 'icons/GenuineCheck'
+import IconCheck from 'icons/Check'
 
 const DeviceNotGenuineError = createCustomErrorClass('DeviceNotGenuine')
 
@@ -36,9 +36,9 @@ type Props = {
   device: ?Device,
 }
 
-const usbIcon = <IconUsb size={26} />
-const homeIcon = <IconHome size={24} />
-const genuineCheckIcon = <IconGenuineCheck size={24} />
+const usbIcon = <IconUsb size={18} />
+const homeIcon = <IconHome size={18} />
+const genuineCheckIcon = <IconCheck size={18} />
 
 const mapStateToProps = state => ({
   device: getCurrentDevice(state),

src/icons/GenuineCheck.js

@@ -1,32 +0,0 @@
-// @flow
-
-import React, { Fragment } from 'react'
-
-const path = (
-  <Fragment>
-    <rect
-      x=".75"
-      y=".75"
-      width="24"
-      height="24"
-      rx="8"
-      fill="none"
-      fillRule="evenodd"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      transform="translate(4.75,4.75)"
-      width="100%"
-      height="100%"
-      fill="#000000"
-      d="m13.62 2.6083-8.2201 8.2201-3.0204-3.0204c-0.14644-0.14644-0.38388-0.14644-0.53034 0l-0.88388 0.88388c-0.14644 0.14644-0.14644 0.38388 0 0.53034l4.1694 4.1694c0.14644 0.14644 0.38388 0.14644 0.53034 0l9.3692-9.3692c0.14644-0.14644 0.14644-0.38387 0-0.53034l-0.88388-0.88388c-0.14644-0.14644-0.38388-0.14644-0.53031 0z"
-    />
-  </Fragment>
-)
-
-export default ({ size, ...p }: { size: number }) => (
-  <svg viewBox="0 0 25.5 25.5" height={size} width={size} {...p}>
-    {path}
-  </svg>
-)

src/icons/Home.js

@@ -4,29 +4,19 @@ import React, { Fragment } from 'react'
 
 const path = (
   <Fragment>
-    <rect
-      x=".75"
-      y=".75"
-      width="24"
-      height="24"
-      rx="8"
-      fill="none"
-      fillRule="evenodd"
-      stroke="currentColor"
-      strokeWidth="1.5"
+    <path
+      fill="currentColor"
+      d="m9.9609 0a1.0001 1.0001 0 0 0-0.57422 0.21094l-9 7a1.0001 1.0001 0 0 0-0.38672 0.78906v11c0 1.645 1.355 3 3 3h14c1.645 0 3-1.355 3-3v-11a1.0001 1.0001 0 0 0-0.38672-0.78906l-9-7a1.0001 1.0001 0 0 0-0.65234-0.21094zm0.039062 2.2676 8 6.2207v10.512c0 0.56413-0.43587 1-1 1h-14c-0.56413 0-1-0.43587-1-1v-10.512z"
     />
     <path
       fill="currentColor"
-      transform="translate(4.75,4.75)"
-      width="100%"
-      height="100%"
-      d="m2.75 6.3668v6.9665c0 0.32217 0.26117 0.58333 0.58333 0.58333h9.3333c0.32217 0 0.58333-0.26117 0.58333-0.58333v-6.9665l-5.25-4.0833zm-1.2105-0.95883 6-4.6667c0.27083-0.21065 0.65008-0.21065 0.92091 0l6 4.6667c0.18269 0.14209 0.28954 0.36057 0.28954 0.59201v7.3333c0 1.1506-0.93274 2.0833-2.0833 2.0833h-9.3333c-1.1506 0-2.0833-0.93274-2.0833-2.0833v-7.3333c0-0.23144 0.10685-0.44992 0.28954-0.59201zm5.2105 3.342v5.9167c0 0.41421-0.33579 0.75-0.75 0.75s-0.75-0.33579-0.75-0.75v-6.6667c0-0.41421 0.33579-0.75 0.75-0.75h4c0.41421 0 0.75 0.33579 0.75 0.75v6.6667c0 0.41421-0.33579 0.75-0.75 0.75-0.41421 0-0.75-0.33579-0.75-0.75v-5.9167z"
+      d="m7 10a1.0001 1.0001 0 0 0-1 1v10a1.0001 1.0001 0 1 0 2 0v-9h4v9a1.0001 1.0001 0 1 0 2 0v-10a1.0001 1.0001 0 0 0-1-1z"
     />
   </Fragment>
 )
 
 export default ({ size, ...p }: { size: number }) => (
-  <svg viewBox="0 0 25.5 25.5" height={size} width={size} {...p}>
+  <svg viewBox="0 0 20 22.014" height={size} width={size} {...p}>
     {path}
   </svg>
 )

src/icons/SmoothBorders.js

@@ -0,0 +1,18 @@
+// @flow
+
+import React from 'react'
+
+const inner = (
+  <path
+    d="m8.75 0.75h12c4.432 0 8 3.568 8 8v12c0 4.432-3.568 8-8 8h-12c-4.432 0-8-3.568-8-8v-12c0-4.432 3.568-8 8-8z"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 29.5 29.5" height={size} width={size} {...p}>
+    {inner}
+  </svg>
+)

src/icons/Usb.js

@@ -2,24 +2,15 @@
 
 import React from 'react'
 
-const group = (
-  <g fill="currentColor">
-    <path
-      fill="none"
-      d="m9 1h8c4.432 0 8 3.568 8 8v8c0 4.432-3.568 8-8 8h-8c-4.432 0-8-3.568-8-8v-8c0-4.432 3.568-8 8-8z"
-      fillRule="evenodd"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      fill="currentColor"
-      d="m19.79 9.65-2.94-2.94c-0.28-0.28-0.7-0.28-0.98 0l-2.45 2.45-1.05-0.98c-0.28-0.28-0.7-0.28-0.98 0l-3.01 3.01c-1.68 1.68-1.89 4.41-0.42 6.37l-1.75 1.75c-0.28 0.28-0.28 0.7 0 0.98s0.7 0.28 0.98 0l1.75-1.75c1.96 1.47 4.69 1.26 6.37-0.49l2.94-2.94c0.28-0.28 0.28-0.7 0-0.98l-0.98-0.98 2.52-2.45c0.28-0.28 0.28-0.77 0-1.05zm-5.46 7.42c-1.33 1.33-3.57 1.33-4.97 0-1.4-1.4-1.4-3.57 0-4.97l2.45-2.45 4.97 4.97zm2.03-4.9-1.96-1.96 1.96-1.96 1.96 1.96z"
-    />
-  </g>
+const inner = (
+  <path
+    transform="translate(-1 -.5)"
+    d="m14.79 3.65-2.94-2.94c-0.28-0.28-0.7-0.28-0.98 0l-2.45 2.45-1.05-0.98c-0.28-0.28-0.7-0.28-0.98 0l-3.01 3.01c-1.68 1.68-1.89 4.41-0.42 6.37l-1.75 1.75c-0.28 0.28-0.28 0.7 0 0.98s0.7 0.28 0.98 0l1.75-1.75c1.96 1.47 4.69 1.26 6.37-0.49l2.94-2.94c0.28-0.28 0.28-0.7 0-0.98l-0.98-0.98 2.52-2.45c0.28-0.28 0.28-0.77 0-1.05zm-5.46 7.42c-1.33 1.33-3.57 1.33-4.97 0-1.4-1.4-1.4-3.57 0-4.97l2.45-2.45 4.97 4.97zm2.03-4.9-1.96-1.96 1.96-1.96 1.96 1.96z"
+  />
 )
 
 export default ({ size, ...p }: { size: number }) => (
-  <svg viewBox="0 0 26 26" height={size} width={size} {...p}>
-    {group}
+  <svg viewBox="0 0 14 14" height={size} width={size} {...p}>
+    {inner}
   </svg>
 )