const ChannelListContainer = styled.div` background-color: #0e0e10; @media (max-width: 1024px) { width: 100%; } `; const ChannelListItem = styled.div` display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; :hover { color: #ffffff; } :hover { background-color: #25252a; } cursor: pointer; `; const TextMedium = styled.div` font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; `; const NameContainer = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; return ( <ChannelListContainer> {props.channels.map((channel) => ( <ChannelListItem key={channel.name} selected={props.selectedChannelId === channel.name} onClick={() => props.selectChannel(channel)} style={{ backgroundColor: props.selectedChannelId === channel.name ? "#25252a" : "#0E0E10", }} > <div style={{ color: channel.unreadMessages.count > 0 || props.selectedChannelId === channel.name ? "#FFFFFF" : "#777583", }} > <NameContainer> <i className="bi bi-hash"></i> <TextMedium>{channel.name}</TextMedium> </NameContainer> </div> {channel.unreadMessages.mentions > 0 && ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.UnreadMessagesBadge`} props={{ messageCount: channel.unreadMessages.mentions, backgroundColor: "#FF5E5E", }} /> )} </ChannelListItem> ))} </ChannelListContainer> );