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}
+
);
};