arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00
Code Issues Releases Wiki Activity

removed unnecessary wrapper in DeviceHeader

Browse Source
This commit is contained in:
slowbackspace 2019-01-24 18:46:18 +01:00
parent e29bfb3e78
commit 4a60403fab
1 changed files with 18 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/DeviceHeader/index.js
View File

@ -18,8 +18,10 @@ const Wrapper = styled.div`
z-index: 10; z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0px 25px;
background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')};
background: ${props => (props.isSelected ? colors.WHITE : 'transparent')}; background: ${props => (props.isSelected ? colors.WHITE : 'transparent')};
cursor: pointer;
border-radius: 4px 0 0 0; border-radius: 4px 0 0 0;
box-shadow: ${props => (props.disabled ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.04)')}; box-shadow: ${props => (props.disabled ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.04)')};
@ -28,6 +30,10 @@ const Wrapper = styled.div`
box-shadow: none; box-shadow: none;
`} `}
${props => props.disabled && css`
cursor: default;
`}
${props => props.isHoverable && !props.disabled && css` ${props => props.isHoverable && !props.disabled && css`
&:hover { &:hover {
background: ${colors.GRAY_LIGHT}; background: ${colors.GRAY_LIGHT};
@ -35,19 +41,6 @@ const Wrapper = styled.div`
`} `}
`; `;
const ClickWrapper = styled.div`
width: 100%;
display: flex;
padding-left: 25px;
height: 100%;
align-items: center;
cursor: pointer;
${props => props.disabled && css`
cursor: default;
`}
`;
const LabelWrapper = styled.div` const LabelWrapper = styled.div`
flex: 1 1 auto; flex: 1 1 auto;
padding-left: 18px; padding-left: 18px;
@ -73,7 +66,6 @@ const Status = styled.div`
`; `;
const IconWrapper = styled.div` const IconWrapper = styled.div`
padding-right: 25px;
display: flex; display: flex;
flex: 1 0 0; flex: 1 0 0;
justify-content: flex-end; justify-content: flex-end;
@ -115,23 +107,19 @@ const DeviceHeader = ({
isHoverable={isHoverable} isHoverable={isHoverable}
disabled={disabled} disabled={disabled}
className={className} className={className}
onClick={onClickWrapper}
> >
<ClickWrapper <ImageWrapper>
disabled={disabled} <Dot color={getStatusColor(status)} />
onClick={onClickWrapper} <TrezorImage model={getVersion(device)} />
> </ImageWrapper>
<ImageWrapper> <LabelWrapper>
<Dot color={getStatusColor(status)} /> <Name>{device.instanceLabel}</Name>
<TrezorImage model={getVersion(device)} /> <Status title={getStatusName(status)}>{getStatusName(status)}</Status>
</ImageWrapper> </LabelWrapper>
<LabelWrapper> <IconWrapper>
<Name>{device.instanceLabel}</Name> {icon && !disabled && isAccessible && icon}
<Status title={getStatusName(status)}>{getStatusName(status)}</Status> </IconWrapper>
</LabelWrapper>
<IconWrapper>
{icon && !disabled && isAccessible && icon}
</IconWrapper>
</ClickWrapper>
</Wrapper> </Wrapper>
); );
}; };