Mobile mode Status modal (#154)

This commit is contained in:
Maria Rushkova 2021-07-26 13:17:35 +02:00 committed by GitHub
parent 1e59fad524
commit b5eaacdcc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 2 deletions

View File

@ -42,8 +42,11 @@ function StatusModal() {
return (
<StatusInfo>
<p>This DApp is only available for</p>
<StatusLogo src={statusLogo} />
<p>Secure Crypto Wallet & Messenger</p>
<StatusTextBlock>
<StatusLogo src={statusLogo} />
<p>{window.innerWidth > 600 ? 'Secure Crypto' : ''} Wallet & Messenger</p>
</StatusTextBlock>
<StatusLink href="https://status.im/get/" target="_blank">
Get Status
</StatusLink>
@ -58,11 +61,38 @@ const StatusInfo = styled(ColumnFlexDiv)`
line-height: 22px;
}
`
const StatusTextBlock = styled.div`
display: flex;
flex-direction: column;
align-items: center;
@media (max-width: 600px) {
flex-direction: row;
}
@media (max-width: 340px) {
flex-direction: column;
}
`
const StatusLogo = styled.img`
width: 120px;
height: 45px;
margin: 16px 0;
@media (max-width: 600px) {
width: 83px;
height: 31px;
margin: 8px 0;
margin-right: 8px;
}
`
const StatusLink = styled(LinkExternal)`
margin-top: 45px;
margin-bottom: 13px;
@media (max-width: 600px) {
margin-top: 16px;
}
`

View File

@ -39,6 +39,10 @@ const PopUpOverlay = styled.div`
z-index: 9999;
transition: all 0.3s;
overflow: auto;
@media (max-width: 600px) {
background-color: #898989;
}
`
const PopUpWindow = styled.div`
@ -50,11 +54,24 @@ const PopUpWindow = styled.div`
background-color: ${Colors.GrayLight};
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 6px;
@media (max-width: 600px) {
max-width: 320px;
padding: 16px;
}
@media (max-width: 375px) {
margin: 20vh 32px 2vh;
}
`
const PopUpHeader = styled.div`
display: flex;
position: relative;
margin-bottom: 32px;
@media (max-width: 600px) {
justify-content: center;
}
`
const PopUpHeading = styled.p`
font-weight: bold;