const DropdownSelector = styled.div` display: flex; column-gap: 0.5rem; align-items: center; cursor: pointer; padding-left: 0.875rem; padding-top: 0.5rem; `; const SelectedChannelName = styled.h4` color: #fff; /* Heading/H4 */ font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120%; /* 28.8px */ `; const RotatableIconSelector = styled.i` transition: transform 5s ease; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; cursor: pointer; color: #777583; ${({ open }) => open ? "transform: rotate(180deg);" : "transform: rotate(0deg);"} `; return ( <DropdownSelector onClick={() => { if (!props.isDMSelected) { props.onDetailsClick(); } }} > <SelectedChannelName>{props.channelSelected}</SelectedChannelName> {!props.isDMSelected && ( <RotatableIconSelector open={props.channelDetailsOpen} className="bi bi-chevron-up" /> )} </DropdownSelector> );