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>

package.json

@@ -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",

src/components/AppLayout/MobileNotSupported/index.tsx

@@ -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>
+  )
+}

src/components/AppLayout/index.tsx

@@ -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 => (
+}): React.ReactElement => {
-  <Container>
+  const [mobileNotSupportedClosed, setMobileNotSupportedClosed] = useState(false)
-    <HeaderWrapper>
+
-      <Header />
+  const closeMobileNotSupported = () => setMobileNotSupportedClosed(true)
-    </HeaderWrapper>
+
-    <BodyWrapper>
+  return (
-      <SidebarWrapper>
+    <Container>
-        <Sidebar
+      <HeaderWrapper>
-          items={sidebarItems}
+        <Header />
-          safeAddress={safeAddress}
+      </HeaderWrapper>
-          safeName={safeName}
+      <BodyWrapper>
-          balance={balance}
+        <SidebarWrapper>
-          granted={granted}
+          <Sidebar
-          onToggleSafeList={onToggleSafeList}
+            items={sidebarItems}
-          onReceiveClick={onReceiveClick}
+            safeAddress={safeAddress}
-          onNewTransactionClick={onNewTransactionClick}
+            safeName={safeName}
-        />
+            balance={balance}
-      </SidebarWrapper>
+            granted={granted}
-      <ContentWrapper>
+            onToggleSafeList={onToggleSafeList}
-        <div>{children}</div>
+            onReceiveClick={onReceiveClick}
-        <Footer />
+            onNewTransactionClick={onNewTransactionClick}
-      </ContentWrapper>
+          />
-    </BodyWrapper>
+        </SidebarWrapper>
-  </Container>
+        <ContentWrapper>
-)
+          <div>{children}</div>
+          <Footer />
+        </ContentWrapper>
+      </BodyWrapper>
+
+      {!mobileNotSupportedClosed && <MobileNotSupported onClose={closeMobileNotSupported} />}
+    </Container>
+  )
+}
 
 export default Layout

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"