diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index 0742e4e3..bd3e6b4e 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -18,8 +18,10 @@ const Wrapper = styled.div` z-index: 10; display: flex; align-items: center; + padding: 0px 25px; background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; background: ${props => (props.isSelected ? colors.WHITE : 'transparent')}; + cursor: pointer; border-radius: 4px 0 0 0; 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; `} + ${props => props.disabled && css` + cursor: default; + `} + ${props => props.isHoverable && !props.disabled && css` &:hover { 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` flex: 1 1 auto; padding-left: 18px; @@ -73,7 +66,6 @@ const Status = styled.div` `; const IconWrapper = styled.div` - padding-right: 25px; display: flex; flex: 1 0 0; justify-content: flex-end; @@ -115,23 +107,19 @@ const DeviceHeader = ({ isHoverable={isHoverable} disabled={disabled} className={className} + onClick={onClickWrapper} > - - - - - - - {device.instanceLabel} - {getStatusName(status)} - - - {icon && !disabled && isAccessible && icon} - - + + + + + + {device.instanceLabel} + {getStatusName(status)} + + + {icon && !disabled && isAccessible && icon} + ); };