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 */
|
||||
props => (props.isActive
|
||||
? props.theme.colors.sidebarItemActive
|
||||
: props.theme.colors.sidebarHoveredItemLabel)};
|
||||
: '#ddd')}
|
||||
background-color: ${props => props.theme.colors.sidebarHoveredItem};
|
||||
}
|
||||
`;
|
||||
|
@ -54,7 +54,7 @@ const Icon = styled.img`
|
|||
margin-right: 13px;
|
||||
|
||||
${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
|
||||
isActive={isActive}
|
||||
src={item.icon(isActive)}
|
||||
alt={`Sidebar Icon ${item.route}`}
|
||||
alt={`${item.route}`}
|
||||
/>
|
||||
{item.label}
|
||||
</StyledLink>
|
||||
|
|
|
@ -10,14 +10,15 @@ import { DARK } from './constants/themes';
|
|||
const darkOne = '#F4B728';
|
||||
const lightOne = '#ffffff';
|
||||
const brandOne = '#000';
|
||||
const brandTwo = '#3B3B3F';
|
||||
// const brandTwo = '#3B3B3F';
|
||||
const brandThree = '#5d5d65';
|
||||
const activeItem = '#F4B728';
|
||||
const text = '#FFF';
|
||||
const cardBackgroundColor = '#000';
|
||||
const sidebarLogoGradientBegin = '#F4B728';
|
||||
const sidebarLogoGradientEnd = '#FFE240';
|
||||
const sidebarHoveredItem = '#1C1C1C';
|
||||
const sidebarHoveredItemLabel = '#76767e';
|
||||
const sidebarHoveredItemLabel = '#8e8e96';
|
||||
const background = '#212124';
|
||||
const transactionSent = '#FF6C6C';
|
||||
const transactionReceived = '#6AEAC0';
|
||||
|
@ -51,14 +52,14 @@ const appTheme = {
|
|||
dark: lightOne,
|
||||
}),
|
||||
sidebarBg: brandOne,
|
||||
sidebarItem: brandTwo,
|
||||
sidebarItem: brandThree,
|
||||
sidebarItemActive: activeItem,
|
||||
sidebarHoveredItem,
|
||||
sidebarHoveredItemLabel,
|
||||
cardBackgroundColor,
|
||||
text,
|
||||
activeItem,
|
||||
inactiveItem: brandTwo,
|
||||
inactiveItem: brandThree,
|
||||
sidebarLogoGradientBegin,
|
||||
sidebarLogoGradientEnd,
|
||||
background,
|
||||
|
|
Loading…
Reference in New Issue