const Overlay = styled.div` left: 12px; right: 12px; bottom: 0px; top: 40px; position: absolute; z-index: 20; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; border-radius: 8px; width: 489px; `; const OverlayContainerSettingsPopup = styled.div` width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.75); display: flex; justify-content: center; align-items: center; `; const CloseButton = styled.div` color: #fff; :hover { color: #5765f2; } position: absolute; right: 1rem; cursor: pointer; `; const ChannelTitle = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; `; const ChannelName = (props) => { return ( <ChannelTitle> <i class="bi bi-hash"></i> {props.channelName} </ChannelTitle> ); }; return ( <Overlay> <PopupContainer> <CloseButton onClick={props.handleCloseSettingsPopup}> <i class="bi bi-x-lg"></i> </CloseButton> <ChannelName channelName={props.channelName} /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Settings.TabSwitch`} props={{ selected: props.selectedTab, onSwitch: props.onSwitch, userCount: props.userCount, }} /> {props.aboutSelected ? ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Settings.AboutDetails`} props={{ dateCreated: props.dateCreated, manager: props.manager, handleLeaveChannel: props.handleLeaveChannel, }} /> ) : ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Settings.MemberDetails`} props={{ componentOwnerId: props.componentOwnerId, userList: props.userList, addMember: props.addMember, }} /> )} </PopupContainer> </Overlay> );