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;
+  border-radius: ${radii[1]}px;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
 `
 
 class UpdateNotifier extends PureComponent<Props> {
@@ -57,13 +55,15 @@ class UpdateNotifier extends PureComponent<Props> {
         return (
           <Box horizontal flow={2}>
             <Text fontWeight="bold">{t('update:newVersionReady')}</Text>
+            <Box ml="auto">
               <Text
-              style={{ cursor: 'pointer' }}
+                style={{ cursor: 'pointer', textDecoration: 'underline' }}
                 onClick={() => sendEvent('msg', 'updater:quitAndInstall')}
               >
                 {t('update:relaunch')}
               </Text>
             </Box>
+          </Box>
         )
       default:
         return null
@@ -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
+    if (!isToggled) {
-        style={{
+      return null
-          offset: spring(isToggled ? 0 : -100),
+    }
-        }}
+    return <Container {...props}>{this.renderStatus()}</Container>
-      >
-        {m => <Container offset={m.offset}>{this.renderStatus()}</Container>}
-      </Motion>
-    )
   }
 }
 

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} />