const PageContainer = styled.div` height: 100vh; width: 100%; background-color: #0e0e10; display: flex; justify-content: center; align-items: center; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; border-radius: 8px; width: fit-content; `; const JoinContainer = styled.div` display: flex; justify-content: center; align-items: center; text: center; `; const JoinHeader = styled.div` display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1.5rem; padding-bottom: 1rem; padding-top: 1rem; `; const Text = 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; `; return ( <PageContainer> <PopupContainer> <JoinContainer> <JoinHeader> <Widget src={'calimero.near/widget/Calimero.DocsChain.Logo.DocsChainLogo'} props={{ justify: true, }} /> <Text>{props.popupText}</Text> </JoinHeader> </JoinContainer> </PopupContainer> </PageContainer> );