Update notification banner style

src/components/UpdateNotifier.js

@@ -16,6 +16,8 @@ import { radii } from 'styles/theme'
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 
+import UpdateIcon from 'icons/Update'
+
 import type { T } from 'types/common'
 
 type Props = {
@@ -29,7 +31,7 @@ const mapStateToProps = (state: State) => ({
 })
 
 const Container = styled(Box).attrs({
-  py: 1,
+  py: '8px',
   px: 3,
   bg: 'wallet',
   color: 'white',
@@ -40,6 +42,11 @@ const Container = styled(Box).attrs({
   border-radius: ${radii[1]}px;
 `
 
+const NotifText = styled(Text).attrs({
+  ff: 'Open Sans|SemiBold',
+  fontSize: 4,
+})``
+
 class UpdateNotifier extends PureComponent<Props> {
   renderStatus() {
     const { updateStatus, t } = this.props
@@ -53,15 +60,16 @@ class UpdateNotifier extends PureComponent<Props> {
         return null
       case 'downloaded':
         return (
-          <Box horizontal flow={2}>
-            <Text fontWeight="bold">{t('update:newVersionReady')}</Text>
+          <Box horizontal flow={3}>
+            <UpdateIcon size={16} />
+            <NotifText>{t('update:newVersionReady')}</NotifText>
             <Box ml="auto">
-              <Text
+              <NotifText
                 style={{ cursor: 'pointer', textDecoration: 'underline' }}
                 onClick={() => sendEvent('msg', 'updater.quitAndInstall')}
               >
                 {t('update:relaunch')}
-              </Text>
+              </NotifText>
             </Box>
           </Box>
         )

src/icons/Update.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M.583 8a.75.75 0 0 1 1.5 0v4.667c0 .23.187.416.417.416h11c.23 0 .417-.186.417-.416V8a.75.75 0 1 1 1.5 0v4.667a1.917 1.917 0 0 1-1.917 1.916h-11a1.917 1.917 0 0 1-1.917-1.916V8zM7.25 2.167a.75.75 0 1 1 1.5 0V9.75a.75.75 0 1 1-1.5 0V2.167zM9.806 6.84a.75.75 0 1 1 1.061 1.06l-2.333 2.334a.75.75 0 0 1-1.061 0L5.14 7.9A.75.75 0 1 1 6.2 6.84l1.803 1.803L9.806 6.84z"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)