Mobile mode Status modal (#154)

packages/DApp/src/components/ConnectButton.tsx

@@ -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;
+  }
 `

packages/DApp/src/components/Modal.tsx

@@ -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;