Feat: add AppStore button in the footer

src/components/AppLayout/Footer/index.tsx

@@ -2,6 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
 import * as React from 'react'
 import { useDispatch } from 'react-redux'
+import AppstoreButton from 'src/components/AppstoreButton'
 
 import GnoButtonLink from 'src/components/layout/ButtonLink'
 import Link from 'src/components/layout/Link'
@@ -16,6 +17,7 @@ const useStyles = makeStyles({
     flexShrink: '1',
     flexWrap: 'wrap',
     justifyContent: 'center',
+    alignItems: 'center',
     margin: '0 auto',
     maxWidth: '100%',
     padding: `20px ${sm} 20px`,
@@ -87,6 +89,8 @@ const Footer = (): React.ReactElement => {
       >
         {appVersion}
       </Link>
+      <span className={classes.sep}>|</span>
+      <AppstoreButton light placement="footer" />
     </footer>
   )
 }

src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx

@@ -26,9 +26,6 @@ const styles = () => ({
   justifyCenter: {
     justifyContent: 'center',
   },
-  appStore: {
-    height: '35px',
-  },
 })
 
 const StyledCard = styled(Card)`

src/components/AppLayout/Header/components/ProviderDetails/PairingDetails.tsx

@@ -11,6 +11,7 @@ import Row from 'src/components/layout/Row'
 import usePairing from 'src/logic/wallets/pairing/hooks/usePairing'
 import { initPairing, isPairingModule } from 'src/logic/wallets/pairing/utils'
 import { useGetPairingUri } from 'src/logic/wallets/pairing/hooks/useGetPairingUri'
+import AppstoreButton from 'src/components/AppstoreButton'
 
 const StyledDivider = styled(Divider)`
   width: calc(100% + 40px);
@@ -63,13 +64,7 @@ const PairingDetails = ({ classes }: { classes: Record<string, string> }): React
       </Row>
 
       <Row className={classes.justifyCenter}>
-        <a href="https://apps.apple.com/us/app/gnosis-safe/id1515759131">
-          <img
-            src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1599436800&h=93244e063e3bdf5b5b9f93aff647da09"
-            alt="Download on the App Store"
-            className={classes.appStore}
-          />
-        </a>
+        <AppstoreButton placement="pairing" />
       </Row>
     </>
   )

src/components/AppLayout/index.tsx

@@ -1,14 +1,12 @@
 import { useState } from 'react'
 import styled from 'styled-components'
-import { useLocation, matchPath } from 'react-router-dom'
 
 import { ListItemType } from 'src/components/List'
 
 import Header from './Header'
 import Footer from './Footer'
 import Sidebar from './Sidebar'
 import { MobileNotSupported } from './MobileNotSupported'
-import { SAFE_ROUTES, WELCOME_ROUTE } from 'src/routes/routes'
 import useDarkMode from 'src/logic/hooks/useDarkMode'
 
 const Container = styled.div`
@@ -93,15 +91,10 @@ const Layout: React.FC<Props> = ({
   sidebarItems,
 }): React.ReactElement => {
   const [mobileNotSupportedClosed, setMobileNotSupportedClosed] = useState(false)
-  const { pathname } = useLocation()
   useDarkMode()
 
   const closeMobileNotSupported = () => setMobileNotSupportedClosed(true)
 
-  const hasFooter = !!matchPath(pathname, {
-    path: [SAFE_ROUTES.SETTINGS, WELCOME_ROUTE],
-  })
-
   return (
     <Container>
       <HeaderWrapper>
@@ -122,7 +115,7 @@ const Layout: React.FC<Props> = ({
         </SidebarWrapper>
         <ContentWrapper>
           <div>{children}</div>
-          {hasFooter && <Footer />}
+          <Footer />
         </ContentWrapper>
       </BodyWrapper>
 

src/components/AppstoreButton/index.tsx

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react'
+import AppstoreLightBadge from 'src/assets/icons/appstore-light.png'
+import AppstoreDarkBadge from 'src/assets/icons/appstore-dark.svg'
+
+enum LINKS {
+  footer = 'https://apps.apple.com/app/apple-store/id1515759131?pt=119497694&ct=Web%20App%20Footer&mt=8',
+  pairing = 'https://apps.apple.com/us/app/gnosis-safe/id1515759131',
+}
+
+type AppstoreButtonProps = {
+  light?: boolean
+  placement: 'footer' | 'pairing'
+}
+
+const AppstoreButton = (props: AppstoreButtonProps): ReactElement => {
+  return (
+    <a href={LINKS[props.placement]} target="_blank" rel="noreferrer">
+      <img
+        src={props.light ? AppstoreLightBadge : AppstoreDarkBadge}
+        alt="Download on the App Store"
+        style={{
+          display: 'block',
+          height: `${props.light ? 30 : 35}px`,
+        }}
+      />
+    </a>
+  )
+}
+
+export default AppstoreButton