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:
parent
f1ffb5d147
commit
31be5b1993
|
@ -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",
|
||||
|
|
|
@ -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 |
|
@ -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
|
||||
|
|
12
yarn.lock
12
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue