const HorizontalSeparatorLine = styled.div` background-color: "#BF4F74"; width: 317px; height: 1px; background-color: #282933; margin-top: 1rem; margin-bottom: 1rem; `; const SideMenu = styled.div` background-color: #0e0e10; padding-top: 1rem; width: 317px; `; return ( <SideMenu> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelsHeader`} props={{ title: "Channel", onChange: () => props.onChangeChannelDialog(!props.openCreateChannel), }} /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelList`} props={{ channelList: props.channelList, selectChannel: (id) => { props.onChangeChannelSettings(-1); props.onChannelSelected(id); props.onChangeDMSelected(""); }, selectedChannelId: props.selectedChannel, }} /> <HorizontalSeparatorLine /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.DMSideSelector`} props={{ componentOwnerId: props.componentOwnerId, onChange: () => props.onChangeOpenDMs(!props.directMessagesOpen), open: props.directMessagesOpen, userList: props.usersList, onSelectDM: (id) => { props.onChangeChannelSettings(-1); props.onChannelSelected(-1); props.onChangeDMSelected(id); }, selectedDM: props.selectedDM, }} /> </SideMenu> );