Updated UI to the design

src/components/DashboardPage/index.js

@@ -3,7 +3,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import uniq from 'lodash/uniq'
 import { compose } from 'redux'
-import IconExternalLink from 'icons/ExternalLink'
+import IconNanoX from 'icons/device/NanoX'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import { push } from 'react-router-redux'
@@ -94,12 +94,13 @@ class DashboardPage extends PureComponent<Props> {
           <TopBanner
             content={{
               message: t('banners.promoteMobile'),
-              Icon: IconExternalLink,
+              Icon: IconNanoX,
               right: (
                 <FakeLink onClick={() => openURL(urls.nanoX)}>{t('common.learnMore')}</FakeLink>
               ),
             }}
-            bannerId={'promoteMobile'}
+            status={'dark'}
+            bannerId={'promoteMobile2'}
             dismissable
           />
         </TopBannerContainer>

src/components/TopBanner.js

@@ -65,7 +65,7 @@ class TopBanner extends PureComponent<Props> {
         <RightContainer>{right}</RightContainer>
         {dismissable && (
           <CloseContainer onClick={this.onDismiss}>
-            <IconCross size={16} />
+            <IconCross size={14} />
           </CloseContainer>
         )}
       </Container>
@@ -86,6 +86,7 @@ const IconContainer = styled.div`
 
 const colorForStatus = {
   error: 'alertRed',
+  dark: '#142533',
 }
 
 const Container = styled(Box).attrs({
@@ -120,10 +121,10 @@ const CloseContainer = styled(Box).attrs({
   margin-left: 10px;
   cursor: pointer;
   &:hover {
-    color: ${p => p.theme.colors.graphite};
+    color: #eee;
   }
 
   &:active {
-    color: ${p => p.theme.colors.graphite};
+    color: #eee;
   }
 `

src/icons/device/NanoX.js

@@ -0,0 +1,30 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size = 30, ...p }: { size: number }) => (
+  <svg viewBox="0 0 6 16" height={size} width={size} {...p}>
+    <defs>
+      <path
+        id="a"
+        d="M5.75 6.835a3.509 3.509 0 0 0-1.5-1.105V1.75h-2.5v3.98a3.509 3.509 0 0 0-1.5 1.105V1.666C.25.884.884.25 1.666.25h2.668c.782 0 1.416.634 1.416 1.416v5.169zm-1.5 7.415V9.5a1.25 1.25 0 1 0-2.5 0v4.75h2.5zM3 6.75A2.75 2.75 0 0 1 5.75 9.5v4.834c0 .782-.634 1.416-1.416 1.416H1.666A1.416 1.416 0 0 1 .25 14.334V9.5A2.75 2.75 0 0 1 3 6.75z"
+      />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#000"
+        fillRule="nonzero"
+        d="M5.75 6.835a3.509 3.509 0 0 0-1.5-1.105V1.75h-2.5v3.98a3.509 3.509 0 0 0-1.5 1.105V1.666C.25.884.884.25 1.666.25h2.668c.782 0 1.416.634 1.416 1.416v5.169zm-1.5 7.415V9.5a1.25 1.25 0 1 0-2.5 0v4.75h2.5zM3 6.75A2.75 2.75 0 0 1 5.75 9.5v4.834c0 .782-.634 1.416-1.416 1.416H1.666A1.416 1.416 0 0 1 .25 14.334V9.5A2.75 2.75 0 0 1 3 6.75z"
+      />
+      <g>
+        <mask id="b" fill="#fff">
+          <use xlinkHref="#a" />
+        </mask>
+        <use fill="#FFF" xlinkHref="#a" />
+        <g fill="#FFF" mask="url(#b)">
+          <path d="M-5 0h16v16H-5z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+)

src/icons/device/index.js

@@ -1,2 +1,3 @@
 export Blue from './Blue'
 export NanoS from './NanoS'
+export NanoX from './NanoX'