message: Add lock icon to connect interface
diff: @@ -11,6 +11,7 @@ import TickerTapeHover from 'react/components/UI/TickerTapeHover';
  import { inputPadding } from 'react/components/UI/Inputs';
  import { baseMixin as baseTextMixin } from 'react/components/UI/Text';
  import Badge from 'react/components/UI/Badge';
  +
  import LockIconWithBorder from 'react/components/UI/LockIconWithBorder';
  const Container = styled.div.attrs({
  @@ -30,8 +31,6 @@ const Container = styled.div.attrs({
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  - display: flex;
  - justify-content: space-between;
  &:hover {
  z-index: 1;
  @@ -80,11 +79,22 @@ const HoverableInner = styled(TickerTapeHover).attrs({
  offsetBuffer: 32,
  })`
  padding: ${inputPadding}; // TODO
  - display: flex;
  - justify-content: space-between;
  `;
  -const PathContainer = styled.div``;
  +const LockContainer = styled.div`
  + background: linear-gradient(to left, ${props => props.theme.colors.gray.hint} 90%, ${props => props.theme.colors.utility.transparent});
  + position: absolute;
  + top: 50%;
  + right: 0;
  + padding: 0 0.5em;
  + text-align: center;
  + transform: translateY(-50%);
  + z-index: 1;
  +
  + ${props => props.hidden && `
  + display: none;
  + `};
  +`;
  const Separator = styled.div`
  display: inline-block;
  @@ -112,6 +122,15 @@ export default class SelectableChannel extends Component {
  state = {
  isSelected: false,
  + isHovered: false,
  + }
  +
  + handleMouseEnter = () => {
  + this.setState({ isHovered: true });
  + }
  +
  + handleMouseLeave = () => {
  + this.setState({ isHovered: false });
  }
  toggleSelection = () => {
  @@ -125,7 +144,7 @@ export default class SelectableChannel extends Component {
  }
  render() {
  - const { isSelected } = this.state;
  + const { isSelected, isHovered } = this.state;
  const {
  channel: {
  title, visibility, owner, owner: { name },
  @@ -133,9 +152,8 @@ export default class SelectableChannel extends Component {
  } = this.props;
  return (
  - <Container onClick={this.toggleSelection} data-selected={isSelected}>
  + <Container onClick={this.toggleSelection} data-selected={isSelected} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
  <HoverableInner>
  - <PathContainer>
  {name}
  {owner.__typename === 'Group' &&
  @@ -150,9 +168,12 @@ export default class SelectableChannel extends Component {
  visibility={visibility}
  dangerouslySetInnerHTML={{ __html: title }}
  />
  - </PathContainer>
  </HoverableInner>
  - <LockIconWithBorder />
  + {visibility === 'private' &&
  + <LockContainer>
  + <LockIconWithBorder hidden={isHovered || isSelected} />
  + </LockContainer>
  + }
  </Container>
  );
  }
  