Design update of the update notifier banner

src/components/DashboardPage/index.js

@@ -24,6 +24,7 @@ import { getCounterValueCode, localeSelector } from 'reducers/settings'
 import { updateOrderAccounts } from 'actions/accounts'
 import { saveSettings } from 'actions/settings'
 
+import UpdateNotifier from 'components/UpdateNotifier'
 import BalanceInfos from 'components/BalanceSummary/BalanceInfos'
 import BalanceSummary from 'components/BalanceSummary'
 import Box from 'components/base/Box'
@@ -139,6 +140,7 @@ class DashboardPage extends PureComponent<Props, State> {
 
     return (
       <Box flow={7}>
+        <UpdateNotifier mt={-5} />
         <Box horizontal alignItems="flex-end">
           <Box grow>
             <Text color="dark" ff="Museo Sans" fontSize={7}>

src/components/UpdateNotifier.js

@@ -3,7 +3,6 @@
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import { compose } from 'redux'
-import { Motion, spring } from 'react-motion'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 
@@ -12,6 +11,8 @@ import { sendEvent } from 'renderer/events'
 import type { State } from 'reducers'
 import type { UpdateStatus } from 'reducers/update'
 
+import { radii } from 'styles/theme'
+
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 
@@ -28,18 +29,15 @@ const mapStateToProps = (state: State) => ({
 })
 
 const Container = styled(Box).attrs({
-  p: 1,
+  py: 1,
+  px: 3,
   bg: 'wallet',
   color: 'white',
   style: p => ({
     transform: `translate3d(0, ${p.offset}%, 0)`,
   }),
 })`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
+  border-radius: ${radii[1]}px;
 `
 
 class UpdateNotifier extends PureComponent<Props> {
@@ -57,12 +55,14 @@ class UpdateNotifier extends PureComponent<Props> {
         return (
           <Box horizontal flow={2}>
             <Text fontWeight="bold">{t('update:newVersionReady')}</Text>
-            <Text
-              style={{ cursor: 'pointer' }}
-              onClick={() => sendEvent('msg', 'updater:quitAndInstall')}
-            >
-              {t('update:relaunch')}
-            </Text>
+            <Box ml="auto">
+              <Text
+                style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                onClick={() => sendEvent('msg', 'updater:quitAndInstall')}
+              >
+                {t('update:relaunch')}
+              </Text>
+            </Box>
           </Box>
         )
       default:
@@ -71,18 +71,14 @@ class UpdateNotifier extends PureComponent<Props> {
   }
 
   render() {
-    const { updateStatus } = this.props
+    const { updateStatus, ...props } = this.props
 
     const isToggled = updateStatus === 'downloaded'
-    return (
-      <Motion
-        style={{
-          offset: spring(isToggled ? 0 : -100),
-        }}
-      >
-        {m => <Container offset={m.offset}>{this.renderStatus()}</Container>}
-      </Motion>
-    )
+
+    if (!isToggled) {
+      return null
+    }
+    return <Container {...props}>{this.renderStatus()}</Container>
   }
 }
 

src/components/layout/Default.js

@@ -23,7 +23,6 @@ import AppRegionDrag from 'components/AppRegionDrag'
 import IsUnlocked from 'components/IsUnlocked'
 import SideBar from 'components/SideBar'
 import TopBar from 'components/TopBar'
-import UpdateNotifier from 'components/UpdateNotifier'
 
 const Container = styled(GrowScroll).attrs({
   p: 6,
@@ -87,7 +86,6 @@ class Default extends Component<Props> {
 
             <Box shrink grow bg="lightGrey" color="grey" relative>
               <TopBar />
-              <UpdateNotifier />
               <Container innerRef={n => (this._scrollContainer = n)} onScroll={this.handleScroll}>
                 <Route path="/" exact component={DashboardPage} />
                 <Route path="/settings" component={SettingsPage} />