diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index e7f1a637..ee334406 100644
--- a/src/components/SideBar/Item.js
+++ b/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 && {icon}}
-
+ {icon && (
+
+ {icon}
+
+ )}
+
{children}
{desc && (
@@ -108,6 +126,11 @@ function Item({
)}
+ {highlight && (
+
+
+
+ )}
)
}
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index 797a54a0..17f7e8ea 100644
--- a/src/components/SideBar/index.js
+++ b/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 {
render() {
- const { t, accounts, openModal } = this.props
+ const { t, accounts, openModal, updateStatus } = this.props
return (
@@ -76,7 +80,7 @@ class SideBar extends PureComponent {
{t('sidebar:menu')}
- } linkTo="/">
+ } linkTo="/" highlight={updateStatus === 'downloaded'}>
{t('dashboard:title')}
} modal={MODAL_SEND}>