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; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120%; @media (max-width: 1024px) { font-size: 18px; font-weight: 400; } } `; const RotatableIconSelector = styled.i` font-size: 1.25rem; @media (max-width: 1024px) { display: none; } cursor: pointer; color: #777583; `; const MobileCogIcon = styled.i` display: none; @media (max-width: 1024px) { display: block; } cursor: pointer; color: #777583; font-size: 0.8rem; padding-bottom: 4px; `; return ( <DropdownSelector onClick={() => { if (!props.isDMSelected) { props.onDetailsClick(); } }} > <SelectedChannelName>{props.channelSelected}</SelectedChannelName> {!props.isDMSelected && ( <> <RotatableIconSelector open={props.channelDetailsOpen} className={`${ props.channelDetailsOpen ? "bi bi-chevron-down" : "bi bi-chevron-up" }`} /> <MobileCogIcon className="bi bi-info-circle-fill" /> </> )} </DropdownSelector> );