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