const OverlayContainer = 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 LoadingContainer = styled.div` display: flex; justify-content: center; align-items: center;zz text: center; `; const LoadingHeader = styled.div` display: flex; flex-direction: column; justify-content: center; `; 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 ( <OverlayContainer> <PopupContainer> <LoadingContainer> <LoadingHeader> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Navbar.CurbLogo`} props={{ justify: true, }} /> <Text>Loading...</Text> </LoadingHeader> </LoadingContainer> </PopupContainer> </OverlayContainer> );