Merge pull request #394 from MortalKastor/auto-update

Auto update polish

electron-builder.yml

@@ -1,7 +1,5 @@
 appId: com.ledger.live
 
-buildDependenciesFromSource: true
-
 protocols:
   name: Ledger Live
   schemes:

package.json

@@ -92,6 +92,7 @@
     "rxjs": "^6.2.0",
     "rxjs-compat": "^6.1.0",
     "semaphore": "^1.1.0",
+    "secp256k1": "3.3.1",
     "smooth-scrollbar": "^8.2.7",
     "source-map": "0.7.2",
     "source-map-support": "^0.5.4",

src/components/SideBar/Item.js

@@ -32,18 +32,23 @@ const Container = styled(Tabbable).attrs({
   ff: 'Open Sans|SemiBold',
   flow: 3,
   horizontal: true,
-  px: 3,
+  pl: 3,
 })`
   cursor: pointer;
   color: ${p => p.theme.colors.dark};
-  opacity: ${p => (p.isActive ? 1 : 0.4)};
   background: ${p => (p.isActive ? p.theme.colors.lightGrey : '')};
   height: ${p => (p.big ? 50 : 36)}px;
   outline: none;
 
+  .desaturate {
+    opacity: ${p => (p.isActive ? 1 : 0.4)};
+  }
+
   &:hover,
   &:focus {
-    opacity: 1;
+    .desaturate {
+      opacity: 1;
+    }
 
     svg {
       color: ${p => p.theme.colors[p.iconActiveColor] || p.iconActiveColor};
@@ -51,6 +56,13 @@ const Container = styled(Tabbable).attrs({
   }
 `
 
+const Bullet = styled.div`
+  background: ${p => p.theme.colors.wallet};
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+`
+
 type Props = {
   iconActiveColor?: string,
   children: string,
@@ -59,6 +71,7 @@ type Props = {
   desc?: string | null,
   icon?: Node | null,
   big?: boolean,
+  highlight?: boolean,
   location: Location,
   push: Function,
   openModal: Function,
@@ -75,6 +88,7 @@ function Item({
   location,
   modal,
   openModal,
+  highlight,
 }: Props) {
   const { pathname } = location
   const isActive = linkTo
@@ -99,8 +113,12 @@ function Item({
             : void 0
       }
     >
-      {icon && <Box color={isActive ? iconActiveColor : void 0}>{icon}</Box>}
-      <Box justifyContent="center">
+      {icon && (
+        <Box color={isActive ? iconActiveColor : void 0} className="desaturate">
+          {icon}
+        </Box>
+      )}
+      <Box justifyContent="center" className="desaturate">
         <Text fontSize={4}>{children}</Text>
         {desc && (
           <Box color="graphite" fontSize={3}>
@@ -108,6 +126,11 @@ function Item({
           </Box>
         )}
       </Box>
+      {highlight && (
+        <Box flex="1" align="flex-end" pr={2}>
+          <Bullet />
+        </Box>
+      )}
     </Container>
   )
 }

src/components/SideBar/index.js

@@ -14,6 +14,8 @@ import type { T } from 'types/common'
 
 import { openModal } from 'reducers/modals'
 import { getVisibleAccounts } from 'reducers/accounts'
+import { getUpdateStatus } from 'reducers/update'
+import type { UpdateStatus } from 'reducers/update'
 
 import IconManager from 'icons/Manager'
 import IconPieChart from 'icons/PieChart'
@@ -56,10 +58,12 @@ type Props = {
   t: T,
   accounts: Account[],
   openModal: Function,
+  updateStatus: UpdateStatus,
 }
 
 const mapStateToProps = state => ({
   accounts: getVisibleAccounts(state),
+  updateStatus: getUpdateStatus(state),
 })
 
 const mapDispatchToProps: Object = {
@@ -68,7 +72,7 @@ const mapDispatchToProps: Object = {
 
 class SideBar extends PureComponent<Props> {
   render() {
-    const { t, accounts, openModal } = this.props
+    const { t, accounts, openModal, updateStatus } = this.props
 
     return (
       <Container bg="white">
@@ -76,7 +80,7 @@ class SideBar extends PureComponent<Props> {
           <Box flow={4}>
             <CapsSubtitle>{t('sidebar:menu')}</CapsSubtitle>
             <Box px={4} flow={2}>
-              <Item icon={<IconPieChart size={16} />} linkTo="/">
+              <Item icon={<IconPieChart size={16} />} linkTo="/" highlight={updateStatus === 'downloaded'}>
                 {t('dashboard:title')}
               </Item>
               <Item icon={<IconSend size={16} />} modal={MODAL_SEND}>

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>
+)

static/i18n/en/update.yml

@@ -1,2 +1,2 @@
-newVersionReady: A new version is ready to be installed.
-relaunch: Re-launch app now
+newVersionReady: A new update is available.
+relaunch: Update now