zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: sidebar changes for higher contrast

This commit is contained in:
André Neves 2019-01-20 13:57:27 -05:00
parent 1fbed2c965
commit 89def68756
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/sidebar.js
View File

@ -43,7 +43,7 @@ const StyledLink = styled(Link)`
color: ${/* eslint-disable-next-line max-len */ color: ${/* eslint-disable-next-line max-len */
props => (props.isActive props => (props.isActive
? props.theme.colors.sidebarItemActive ? props.theme.colors.sidebarItemActive
: props.theme.colors.sidebarHoveredItemLabel)}; : '#ddd')}
background-color: ${props => props.theme.colors.sidebarHoveredItem}; background-color: ${props => props.theme.colors.sidebarHoveredItem};
} }
`; `;
@ -54,7 +54,7 @@ const Icon = styled.img`
margin-right: 13px; margin-right: 13px;
${StyledLink}:hover & { ${StyledLink}:hover & {
filter: ${props => (props.isActive ? 'none' : 'brightness(200%)')}; filter: ${props => (props.isActive ? 'none' : 'brightness(300%)')};
} }
`; `;
@ -83,7 +83,7 @@ export const SidebarComponent = ({ options, location }: Props) => (
<Icon <Icon
isActive={isActive} isActive={isActive}
src={item.icon(isActive)} src={item.icon(isActive)}
alt={`Sidebar Icon ${item.route}`} alt={`${item.route}`}
/> />
{item.label} {item.label}
</StyledLink> </StyledLink>

9
app/theme.js
View File

@ -10,14 +10,15 @@ import { DARK } from './constants/themes';
const darkOne = '#F4B728'; const darkOne = '#F4B728';
const lightOne = '#ffffff'; const lightOne = '#ffffff';
const brandOne = '#000'; const brandOne = '#000';
const brandTwo = '#3B3B3F'; // const brandTwo = '#3B3B3F';
const brandThree = '#5d5d65';
const activeItem = '#F4B728'; const activeItem = '#F4B728';
const text = '#FFF'; const text = '#FFF';
const cardBackgroundColor = '#000'; const cardBackgroundColor = '#000';
const sidebarLogoGradientBegin = '#F4B728'; const sidebarLogoGradientBegin = '#F4B728';
const sidebarLogoGradientEnd = '#FFE240'; const sidebarLogoGradientEnd = '#FFE240';
const sidebarHoveredItem = '#1C1C1C'; const sidebarHoveredItem = '#1C1C1C';
const sidebarHoveredItemLabel = '#76767e'; const sidebarHoveredItemLabel = '#8e8e96';
const background = '#212124'; const background = '#212124';
const transactionSent = '#FF6C6C'; const transactionSent = '#FF6C6C';
const transactionReceived = '#6AEAC0'; const transactionReceived = '#6AEAC0';
@ -51,14 +52,14 @@ const appTheme = {
dark: lightOne, dark: lightOne,
}), }),
sidebarBg: brandOne, sidebarBg: brandOne,
sidebarItem: brandTwo, sidebarItem: brandThree,
sidebarItemActive: activeItem, sidebarItemActive: activeItem,
sidebarHoveredItem, sidebarHoveredItem,
sidebarHoveredItemLabel, sidebarHoveredItemLabel,
cardBackgroundColor, cardBackgroundColor,
text, text,
activeItem, activeItem,
inactiveItem: brandTwo, inactiveItem: brandThree,
sidebarLogoGradientBegin, sidebarLogoGradientBegin,
sidebarLogoGradientEnd, sidebarLogoGradientEnd,
background, background,