Mobile mode Status modal (#154)
This commit is contained in:
parent
1e59fad524
commit
b5eaacdcc7
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue