Skip to content

Commit

Permalink
Update styles on mobile landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
asoong committed Oct 18, 2023
1 parent 60ca082 commit e94c0f4
Showing 1 changed file with 11 additions and 7 deletions.
18 changes: 11 additions & 7 deletions client/src/components/MobileLandingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ export const MobileLandingPage: React.FC = () => {
</Logo>

<ModalContainer>
<ThemedText.HeadlineMedium style={{ flex: '1', margin: 'auto', textAlign: 'center' }}>
<ThemedText.HeadlineSmall style={{ flex: '1', margin: 'auto', textAlign: 'center' }}>
Sorry!
</ThemedText.HeadlineMedium>
</ThemedText.HeadlineSmall>

<ThemedText.SubHeader style={{ flex: '1', margin: 'auto', textAlign: 'center' }}>
ZKP2P is not yet optimized for mobile devices. Please use a desktop for the best experience and join our Telegram for updates on mobile support.
Expand All @@ -45,16 +45,17 @@ export const MobileLandingPage: React.FC = () => {
};

const Container = styled.div`
height: calc(100vh - 76px);
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 32px;
position: relative;
overflow: hidden;
`;

const ModalContainer = styled.div`
width: 50%;
width: 65%;
max-width: 360px;
display: flex;
flex-direction: column;
Expand All @@ -65,11 +66,14 @@ const ModalContainer = styled.div`
align-items: center;
gap: 1.5rem;
justify-content: center;
margin-top: auto;
margin-bottom: auto;
`;

const Logo = styled.div`
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
img {
width: 44px;
height: 44px;
Expand Down

0 comments on commit e94c0f4

Please sign in to comment.