refactor: sidebar changes for higher contrast
This commit is contained in:
parent
1fbed2c965
commit
89def68756
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue