Show a bullet point in the menu when ready to update

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