Feature/#1499 add mobile start (#1750)

* add modal, img and card

* add overlay and clean css

* fix breakpoint to 992px (screenMd)

* add mobileView  library

* add link to download app button

* close button styles

* fix close button on hover

* Remove polished rgba for material-ui fade

Co-authored-by: nicolas <nicosampler@users.noreply.github.com>
Co-authored-by: nicosampler <nf.dominguez.87@gmail.com>
Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
Agustín Longoni 2021-01-12 16:26:38 -03:00 committed by GitHub
parent f1ffb5d147
commit 31be5b1993
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 182 additions and 26 deletions

View File

@ -211,6 +211,7 @@
"qrcode.react": "1.0.0",
"query-string": "6.13.7",
"react": "16.13.1",
"react-device-detect": "^1.15.0",
"react-dom": "16.13.1",
"react-final-form": "^6.5.2",
"react-final-form-listeners": "^1.0.2",

View File

@ -0,0 +1,134 @@
import { Button, Text, Card, Icon } from '@gnosis.pm/safe-react-components'
import { fade } from '@material-ui/core/styles/colorManipulator'
import styled from 'styled-components'
import React, { ReactElement } from 'react'
import { MobileView } from 'react-device-detect'
import Phone from 'src/components/AppLayout/MobileStart/assets/phone@2x.png'
const Overlay = styled.div`
display: block;
position: absolute;
bottom: 0;
width: 100vw;
height: 100vh;
background-color: ${({ theme }) => fade(theme.colors.overlay.color, 0.75)};
z-index: 2147483009; /* on top of Intercom Button */
`
const ModalApp = styled.div`
position: fixed;
display: flex;
justify-content: space-between;
bottom: 0;
width: 100vw;
height: 260px;
background-color: ${({ theme }) => theme.colors.background};
box-shadow: 1px 2px 10px rgba(40, 54, 61, 0.18);
z-index: 2147483004; /* on top of Intercom Button */
padding: 20px 16px 0 16px;
`
const StyledCard = styled(Card)`
background-color: #fdfdfd;
/* width: 45vw; */
min-width: 245px;
height: 220px;
padding: 24px 58px 24px 24px;
box-sizing: border-box;
box-shadow: none;
display: flex;
justify-content: space-around;
flex-direction: column;
@media (max-width: 340px) {
padding: 16px;
min-width: 215px;
}
`
const StyledImg = styled.img`
margin: 24px -81px 0 -58px;
z-index: 1;
width: 45%;
height: auto;
object-fit: cover;
@media (max-width: 340px) {
display: none;
}
@media (min-width: 430px) {
width: 30%;
}
@media (min-width: 720px) {
width: 25%;
}
@media (min-width: 800px) {
width: 20%;
}
`
const StyledCloseIcon = styled(Icon)`
margin: 0 34px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background: ${({ theme }) => theme.colors.separator};
border-radius: 16px;
padding: 4px;
box-sizing: border-box;
}
@media (max-width: 340px) {
margin: 8px 34px 0 16px;
}
`
const StyledButton = styled(Button)`
background-color: transparent;
min-width: 0;
:hover {
background-color: transparent;
}
`
const StyledLink = styled.a`
text-decoration: none;
`
type Props = {
onClose: () => void
}
export const MobileNotSupported = ({ onClose }: Props): ReactElement => {
return (
<MobileView>
<Overlay>
<ModalApp>
<StyledCard>
<Text size="lg">The Safe Multisig web app is not optimized for mobile.</Text>
<Text size="lg">Get the mobile app for a better experience.</Text>
<Button size="md" color="primary" variant="contained">
<StyledLink target="_blank" href="https://gnosis-safe.io/#mobile" rel="noopener noreferrer">
<Text color="white" size="xl">
Get the App
</Text>
</StyledLink>
</Button>
</StyledCard>
<StyledImg src={Phone} alt="Phone" />
<StyledButton size="md" variant="outlined" color="primary" onClick={onClose}>
<StyledCloseIcon size="md" type="cross" />
</StyledButton>
</ModalApp>
</Overlay>
</MobileView>
)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -1,10 +1,11 @@
import React from 'react'
import React, { useState } from 'react'
import styled from 'styled-components'
import { ListItemType } from 'src/components/List'
import Header from './Header'
import Footer from './Footer'
import Sidebar from './Sidebar'
import { MobileNotSupported } from './MobileNotSupported'
const Container = styled.div`
height: 100vh;
@ -85,30 +86,38 @@ const Layout: React.FC<Props> = ({
onNewTransactionClick,
children,
sidebarItems,
}): React.ReactElement => (
<Container>
<HeaderWrapper>
<Header />
</HeaderWrapper>
<BodyWrapper>
<SidebarWrapper>
<Sidebar
items={sidebarItems}
safeAddress={safeAddress}
safeName={safeName}
balance={balance}
granted={granted}
onToggleSafeList={onToggleSafeList}
onReceiveClick={onReceiveClick}
onNewTransactionClick={onNewTransactionClick}
/>
</SidebarWrapper>
<ContentWrapper>
<div>{children}</div>
<Footer />
</ContentWrapper>
</BodyWrapper>
</Container>
)
}): React.ReactElement => {
const [mobileNotSupportedClosed, setMobileNotSupportedClosed] = useState(false)
const closeMobileNotSupported = () => setMobileNotSupportedClosed(true)
return (
<Container>
<HeaderWrapper>
<Header />
</HeaderWrapper>
<BodyWrapper>
<SidebarWrapper>
<Sidebar
items={sidebarItems}
safeAddress={safeAddress}
safeName={safeName}
balance={balance}
granted={granted}
onToggleSafeList={onToggleSafeList}
onReceiveClick={onReceiveClick}
onNewTransactionClick={onNewTransactionClick}
/>
</SidebarWrapper>
<ContentWrapper>
<div>{children}</div>
<Footer />
</ContentWrapper>
</BodyWrapper>
{!mobileNotSupportedClosed && <MobileNotSupported onClose={closeMobileNotSupported} />}
</Container>
)
}
export default Layout

View File

@ -16139,6 +16139,13 @@ react-dev-utils@^9.0.0:
strip-ansi "5.2.0"
text-table "0.2.0"
react-device-detect@^1.15.0:
version "1.15.0"
resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.15.0.tgz#5321f94ae3c4d51ef399b0502a6c739e32d0f315"
integrity sha512-ywjtWW04U7vaJK87IAFHhKozZhTPeDVWsfYx5CxQSQCjU5+fnMMxWZt9HnVWaNTqBEn6g8wCNWyqav7sXJrURg==
dependencies:
ua-parser-js "^0.7.23"
react-docgen-typescript-plugin@^0.6.2:
version "0.6.3"
resolved "https://registry.yarnpkg.com/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-0.6.3.tgz#664b22601df083597ecb1e60bd21beca60125fdf"
@ -19246,6 +19253,11 @@ u2f-api@0.2.7:
resolved "https://registry.yarnpkg.com/u2f-api/-/u2f-api-0.2.7.tgz#17bf196b242f6bf72353d9858e6a7566cc192720"
integrity sha512-fqLNg8vpvLOD5J/z4B6wpPg4Lvowz1nJ9xdHcCzdUPKcFE/qNCceV2gNZxSJd5vhAZemHr/K/hbzVA0zxB5mkg==
ua-parser-js@^0.7.23:
version "0.7.23"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.23.tgz#704d67f951e13195fbcd3d78818577f5bc1d547b"
integrity sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==
ultron@~1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"