From fdc064532070df0d599b1092e99beb147d99fe28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 5 Nov 2020 15:41:00 -0300
Subject: [PATCH 01/18] add cards and styles on texts

---
 src/components/layout/Page/index.module.scss  |  13 --
 .../welcome/components/Layout.module.scss     |   3 +-
 src/routes/welcome/components/Layout.tsx      | 111 +++++++++++++-----
 3 files changed, 82 insertions(+), 45 deletions(-)

diff --git a/src/components/layout/Page/index.module.scss b/src/components/layout/Page/index.module.scss
index 4e875b5de6..a04cdd49c8 100644
--- a/src/components/layout/Page/index.module.scss
+++ b/src/components/layout/Page/index.module.scss
@@ -7,19 +7,6 @@
   padding: 12px 0 0 0;
 }
 
-@media only screen and (max-width: #{$screenLg}px) {
-  .page {
-    padding: 72px $lg 0 $lg;
-  }
-}
-
-@media only screen and (min-width: #{$screenLg}px) and (max-width: 1360px) {
-  .page {
-    padding: 96px 120px 0 120px;
-  }
-}
-
-
 .center {
   align-self: center;
 }
diff --git a/src/routes/welcome/components/Layout.module.scss b/src/routes/welcome/components/Layout.module.scss
index 54a047655a..b8db1e0409 100644
--- a/src/routes/welcome/components/Layout.module.scss
+++ b/src/routes/welcome/components/Layout.module.scss
@@ -13,7 +13,8 @@
 
 .safeActions {
   display: flex;
-  justify-content: center;
+  justify-content: start;
+  margin-top: $xl;
 }
 
 .learnMoreLink {
diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index b3c73c71b2..b796ed6e76 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,7 +1,7 @@
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import * as React from 'react'
 
 import styles from './Layout.module.scss'
+import { Card, Title, Text, Divider } from '@gnosis.pm/safe-react-components'
 
 import ConnectButton from 'src/components/ConnectButton'
 import Block from 'src/components/layout/Block'
@@ -10,16 +10,42 @@ import Heading from 'src/components/layout/Heading'
 import Img from 'src/components/layout/Img'
 import Link from 'src/components/layout/Link'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
-import { marginButtonImg, secondary } from 'src/theme/variables'
+import { marginButtonImg } from 'src/theme/variables'
+import styled from 'styled-components'
 
 const plus = require('../assets/new.svg')
 const safe = require('../assets/safe.svg')
 
-const openIconStyle = {
-  height: '13px',
-  color: secondary,
-  marginBottom: '-2px',
-}
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+const StyledCardDouble = styled(Card)`
+  display: flex;
+  padding: 0;
+`
+
+const StyledCard = styled(Card)`
+  margin: 0 20px 0 0;
+  max-width: 33%;
+`
+const CardsCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+`
+
+/* const StyledDoubleCard = styled(Card)`
+  display: inline-block;
+  margin: 0 20px 0 0;
+  position: relative;
+`
+
+const StyledDivider = styled(Divider)`
+  left: 50%;
+  position: absolute;
+  margin: -24px 0 0 0;
+`  */
 
 const buttonStyle = {
   marginLeft: marginButtonImg,
@@ -61,30 +87,24 @@ export const LoadSafe = ({ provider, size }) => (
 const Welcome = ({ isOldMultisigMigration, provider }: any) => {
   const headingText = isOldMultisigMigration ? (
     <>
-      We will replicate the owner structure from your existing Gnosis MultiSig
-      <br />
-      to let you test the new interface.
-      <br />
-      As soon as you feel comfortable, start moving funds to your new Safe.
-      <br />{' '}
+      We will replicate the owner structure from your existing Gnosis MultiSig to let you test the new interface. As
+      soon as you feel comfortable, start moving funds to your new Safe.
     </>
   ) : (
     <>
-      Gnosis Safe Multisig is the most secure way to manage crypto funds
-      <br />
-      collectively. It is an improvement of the Gnosis MultiSig, which is used by more than 3000 teams
-      <br /> and stores over $1B USD worth of digital assets. Gnosis Safe Multisig features a modular
-      <br /> design, formally verified smart contracts and vastly improved user experience.{' '}
+      Gnosis Safe Multisig is the most trusted platform to manage <br /> digital assets on Ethereum. Here is how to get
+      started:{' '}
     </>
   )
   return (
     <Block className={styles.safe}>
-      <Heading align="center" margin="lg" tag="h1" weight="bold">
-        Welcome to
-        <br />
-        Gnosis Safe Multisig
-      </Heading>
-      <Heading align="center" margin="xl" tag="h3">
+      <Title size="md">Welcome to Gnosis Safe Multisig</Title>
+      {/* <Heading align="center" margin="lg" tag="h1" weight="bold">
+        Welcome to Gnosis Safe Multisig
+      </Heading> */}
+      <Title size="xs">{headingText}</Title>
+
+      {/* <Heading align="center" margin="xl" tag="h3">
         {headingText}
         <a
           className={styles.learnMoreLink}
@@ -95,15 +115,44 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
           Learn more
           <OpenInNew style={openIconStyle} />
         </a>
-      </Heading>
+      </Heading> */}
       {provider ? (
         <>
-          <Block className={styles.safeActions} margin="md">
-            <CreateSafe provider={provider} size="large" />
-          </Block>
-          <Block className={styles.safeActions} margin="md">
-            <LoadSafe provider={provider} size="large" />
-          </Block>
+          <Wrapper>
+            <StyledCard>
+              <Title size="xs">Connect wallet</Title>
+              <Text size="xl">
+                Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the
+                authentication factors.
+              </Text>
+              <Block className={styles.LoadSafe} margin="md" padding="lg">
+                <LoadSafe provider={provider} size="large" />
+              </Block>
+            </StyledCard>
+            <StyledCardDouble>
+              <CardsCol>
+                <Title size="xs">Create Safe</Title>
+                <Text size="xl">
+                  Create a new Safe Multisig that is controlled by one or multiple owners. <br />
+                  You will be required to pay a network fee for creating your new Safe.
+                </Text>
+                <Block className={styles.safeActions} margin="md">
+                  <CreateSafe provider={provider} size="large" />
+                </Block>
+              </CardsCol>
+              <Divider orientation="vertical" />
+              <CardsCol>
+                <Title size="xs">Load Safe</Title>
+                <Text size="xl">
+                  Create a new Safe Multisig that is controlled by one or multiple owners. <br />
+                  You will be required to pay a network fee for creating your new Safe.
+                </Text>
+                <Block className={styles.safeActions} margin="md">
+                  <LoadSafe provider={provider} size="large" />
+                </Block>
+              </CardsCol>
+            </StyledCardDouble>
+          </Wrapper>
         </>
       ) : (
         <Block className={styles.connectWallet} margin="md">

From 16432804d1e0c17ce96b2f5eedaa8da226cfad94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 24 Nov 2020 15:01:01 -0300
Subject: [PATCH 02/18] add styles and conten

---
 src/routes/welcome/components/Layout.tsx | 48 +++++++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index b796ed6e76..3da5a807c0 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import styles from './Layout.module.scss'
-import { Card, Title, Text, Divider } from '@gnosis.pm/safe-react-components'
+import { Card, Title, Text, Divider, ButtonLink } from '@gnosis.pm/safe-react-components'
 
 import ConnectButton from 'src/components/ConnectButton'
 import Block from 'src/components/layout/Block'
@@ -19,6 +19,7 @@ const safe = require('../assets/safe.svg')
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
+  justify-content: space-around;
 `
 const StyledCardDouble = styled(Card)`
   display: flex;
@@ -33,6 +34,7 @@ const CardsCol = styled.div`
   display: flex;
   flex-direction: column;
   padding: 24px;
+  width: 50%;
 `
 
 /* const StyledDoubleCard = styled(Card)`
@@ -47,6 +49,27 @@ const StyledDivider = styled(Divider)`
   margin: -24px 0 0 0;
 `  */
 
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 0 16px 0;
+
+  h5 {
+    margin: 0 16px;
+  }
+`
+
+const Dot = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  height: 36px;
+  width: 36px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: ${({ theme }) => theme.colors.white};
+`
 const buttonStyle = {
   marginLeft: marginButtonImg,
 }
@@ -120,18 +143,31 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
         <>
           <Wrapper>
             <StyledCard>
-              <Title size="xs">Connect wallet</Title>
+              <TitleWrapper>
+                <Dot>
+                  <Title size="xs">1</Title>
+                </Dot>
+                <Title size="xs">Connect wallet</Title>
+              </TitleWrapper>
               <Text size="xl">
                 Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the
                 authentication factors.
               </Text>
+              <ButtonLink textSize="xl" color="primary" iconType="externalLink">
+                Why do I need to connect wallet?
+              </ButtonLink>
               <Block className={styles.LoadSafe} margin="md" padding="lg">
                 <LoadSafe provider={provider} size="large" />
               </Block>
             </StyledCard>
             <StyledCardDouble>
               <CardsCol>
-                <Title size="xs">Create Safe</Title>
+                <TitleWrapper>
+                  <Dot>
+                    <Title size="xs">2</Title>
+                  </Dot>
+                  <Title size="xs">Create Safe</Title>
+                </TitleWrapper>
                 <Text size="xl">
                   Create a new Safe Multisig that is controlled by one or multiple owners. <br />
                   You will be required to pay a network fee for creating your new Safe.
@@ -142,10 +178,10 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
               </CardsCol>
               <Divider orientation="vertical" />
               <CardsCol>
-                <Title size="xs">Load Safe</Title>
+                <Title size="xs">Load existing Safe</Title>
                 <Text size="xl">
-                  Create a new Safe Multisig that is controlled by one or multiple owners. <br />
-                  You will be required to pay a network fee for creating your new Safe.
+                  Already have a Safe? Do you want to access your Safe Multisig from a different device? Easily load
+                  your Safe Multisig using your Safe address.
                 </Text>
                 <Block className={styles.safeActions} margin="md">
                   <LoadSafe provider={provider} size="large" />

From 3ce774f6e3965b47c409101bae6bcd4ae4c21287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 24 Nov 2020 15:54:40 -0300
Subject: [PATCH 03/18] align card content

---
 src/routes/welcome/components/Layout.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 3da5a807c0..28f645f2dc 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -4,6 +4,7 @@ import styles from './Layout.module.scss'
 import { Card, Title, Text, Divider, ButtonLink } from '@gnosis.pm/safe-react-components'
 
 import ConnectButton from 'src/components/ConnectButton'
+/* import Dot from 'src/routes/safe/components/Dot' */
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Heading from 'src/components/layout/Heading'
@@ -19,20 +20,22 @@ const safe = require('../assets/safe.svg')
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
 `
 const StyledCardDouble = styled(Card)`
   display: flex;
   padding: 0;
 `
-
 const StyledCard = styled(Card)`
   margin: 0 20px 0 0;
   max-width: 33%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 `
 const CardsCol = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   padding: 24px;
   width: 50%;
 `

From a44ebde8ca8d96fa7b45515ac25840ec9bee9a0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 25 Nov 2020 18:04:11 -0300
Subject: [PATCH 04/18] fix text about Safe Multisig

---
 src/routes/welcome/components/Layout.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 28f645f2dc..7117d915a8 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -118,8 +118,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
     </>
   ) : (
     <>
-      Gnosis Safe Multisig is the most trusted platform to manage <br /> digital assets on Ethereum. Here is how to get
-      started:{' '}
+      Gnosis Safe Multisig is the most trusted platform to manage digital assets. <br /> Here is how to get started:{' '}
     </>
   )
   return (

From accf4b49c5fc65aac2e7c4eb65a877ad7c47f260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Mon, 30 Nov 2020 15:29:54 -0300
Subject: [PATCH 05/18] add new components from SRC

---
 src/routes/welcome/components/Layout.tsx | 100 +++++++++++------------
 1 file changed, 49 insertions(+), 51 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 7117d915a8..5d182413a1 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import styles from './Layout.module.scss'
-import { Card, Title, Text, Divider, ButtonLink } from '@gnosis.pm/safe-react-components'
+import { Card, Title, Text, Divider, ButtonLink, Dot } from '@gnosis.pm/safe-react-components'
 
 import ConnectButton from 'src/components/ConnectButton'
 /* import Dot from 'src/routes/safe/components/Dot' */
@@ -30,28 +30,13 @@ const StyledCard = styled(Card)`
   max-width: 33%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 `
 const CardsCol = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   padding: 24px;
   width: 50%;
 `
-
-/* const StyledDoubleCard = styled(Card)`
-  display: inline-block;
-  margin: 0 20px 0 0;
-  position: relative;
-`
-
-const StyledDivider = styled(Divider)`
-  left: 50%;
-  position: absolute;
-  margin: -24px 0 0 0;
-`  */
-
 const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -59,19 +44,17 @@ const TitleWrapper = styled.div`
   margin: 0 0 16px 0;
 
   h5 {
-    margin: 0 16px;
+    color: white;
   }
 `
-
-const Dot = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  height: 36px;
-  width: 36px;
-  background-color: ${({ theme }) => theme.colors.primary};
-  color: ${({ theme }) => theme.colors.white};
+const StyledTitle = styled(Title)`
+  margin: 0 0 0 16px;
+`
+const StyledTitleOnly = styled(Title)`
+  margin: 0 0 16px 0;
+`
+const StyledButtonLink = styled(ButtonLink)`
+  margin: 16px 0 0 -8px;
 `
 const buttonStyle = {
   marginLeft: marginButtonImg,
@@ -123,41 +106,35 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
   )
   return (
     <Block className={styles.safe}>
-      <Title size="md">Welcome to Gnosis Safe Multisig</Title>
-      {/* <Heading align="center" margin="lg" tag="h1" weight="bold">
-        Welcome to Gnosis Safe Multisig
-      </Heading> */}
+      <Title size="md" strong withoutMargin>
+        Welcome to Gnosis Safe Multisig.
+      </Title>
       <Title size="xs">{headingText}</Title>
 
-      {/* <Heading align="center" margin="xl" tag="h3">
-        {headingText}
-        <a
-          className={styles.learnMoreLink}
-          href="https://gnosis-safe.io/teams"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Learn more
-          <OpenInNew style={openIconStyle} />
-        </a>
-      </Heading> */}
       {provider ? (
         <>
           <Wrapper>
             <StyledCard>
               <TitleWrapper>
-                <Dot>
+                <Dot color="primary">
                   <Title size="xs">1</Title>
                 </Dot>
-                <Title size="xs">Connect wallet</Title>
+                <StyledTitle size="sm" strong withoutMargin>
+                  Connect wallet
+                </StyledTitle>
               </TitleWrapper>
               <Text size="xl">
                 Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the
                 authentication factors.
               </Text>
-              <ButtonLink textSize="xl" color="primary" iconType="externalLink">
+              <StyledButtonLink textSize="xl" color="primary" iconType="externalLink">
                 Why do I need to connect wallet?
-              </ButtonLink>
+              </StyledButtonLink>
+              <Button size="lg" color="primary" variant="contained">
+                <Text size="xl" color="white">
+                  Connect wallet
+                </Text>
+              </Button>
               <Block className={styles.LoadSafe} margin="md" padding="lg">
                 <LoadSafe provider={provider} size="large" />
               </Block>
@@ -165,26 +142,47 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
             <StyledCardDouble>
               <CardsCol>
                 <TitleWrapper>
-                  <Dot>
+                  <Dot color="primary">
                     <Title size="xs">2</Title>
                   </Dot>
-                  <Title size="xs">Create Safe</Title>
+                  <StyledTitle size="sm" strong withoutMargin>
+                    Create Safe
+                  </StyledTitle>
                 </TitleWrapper>
                 <Text size="xl">
                   Create a new Safe Multisig that is controlled by one or multiple owners. <br />
                   You will be required to pay a network fee for creating your new Safe.
                 </Text>
+                <Button size="lg" color="primary" variant="contained">
+                  <Text size="xl" color="white">
+                    + Create new Safe
+                  </Text>
+                </Button>
                 <Block className={styles.safeActions} margin="md">
                   <CreateSafe provider={provider} size="large" />
                 </Block>
               </CardsCol>
               <Divider orientation="vertical" />
               <CardsCol>
-                <Title size="xs">Load existing Safe</Title>
+                <StyledTitleOnly size="sm" strong withoutMargin>
+                  Load existing Safe
+                </StyledTitleOnly>
                 <Text size="xl">
                   Already have a Safe? Do you want to access your Safe Multisig from a different device? Easily load
                   your Safe Multisig using your Safe address.
                 </Text>
+                <Button
+                  variant="bordered"
+                  iconType="safe"
+                  iconSize="sm"
+                  size="lg"
+                  color="secondary"
+                  onClick={() => alert('click')}
+                >
+                  <Text size="xl" color="secondary">
+                    Load existing Safe
+                  </Text>
+                </Button>
                 <Block className={styles.safeActions} margin="md">
                   <LoadSafe provider={provider} size="large" />
                 </Block>
@@ -194,7 +192,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
         </>
       ) : (
         <Block className={styles.connectWallet} margin="md">
-          <Heading align="center" margin="md" tag="h3">
+          <Heading align="left" margin="md" tag="h3">
             Get Started by Connecting a Wallet
           </Heading>
           <ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />

From acc936d9e4c8d89bcd52040d403e13d179e9681e Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 1 Dec 2020 15:18:57 -0300
Subject: [PATCH 06/18] update SRC

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4531edb7ed..fa02b361ea 100644
--- a/package.json
+++ b/package.json
@@ -168,7 +168,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#03ff672d6f73366297986d58631f9582fe2ed4a3",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#9f8bcf6",    
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.30.0",
     "@material-ui/core": "4.11.0",
diff --git a/yarn.lock b/yarn.lock
index d09cb003c4..468567acf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1522,9 +1522,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#03ff672d6f73366297986d58631f9582fe2ed4a3":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#9f8bcf6":
   version "0.4.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#03ff672d6f73366297986d58631f9582fe2ed4a3"
+  resolved "https://github.com/gnosis/safe-react-components.git#9f8bcf6599a0db10b15a769510ed86d8c49426f7"
   dependencies:
     classnames "^2.2.6"
     polished "^3.6.7"

From a1415e138ef3a89e098f9c08b97b0e35218eb37a Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 1 Dec 2020 15:19:09 -0300
Subject: [PATCH 07/18] changes to welcome page

---
 src/components/ConnectButton/index.tsx        |  24 +-
 src/components/NoSafe/index.tsx               |  22 --
 src/routes/safe/container/index.tsx           |  10 +-
 .../welcome/components/Layout.module.scss     |  26 --
 src/routes/welcome/components/Layout.tsx      | 231 +++++++-----------
 5 files changed, 106 insertions(+), 207 deletions(-)
 delete mode 100644 src/components/NoSafe/index.tsx
 delete mode 100644 src/routes/welcome/components/Layout.module.scss

diff --git a/src/components/ConnectButton/index.tsx b/src/components/ConnectButton/index.tsx
index c382253aaa..841a97b0f4 100644
--- a/src/components/ConnectButton/index.tsx
+++ b/src/components/ConnectButton/index.tsx
@@ -65,21 +65,17 @@ export const onboardUser = async (): Promise<boolean> => {
   return walletSelected && onboard.walletCheck()
 }
 
-const ConnectButton = (props): React.ReactElement => (
-  <Button
-    color="primary"
-    minWidth={140}
-    onClick={async () => {
-      const walletSelected = await onboard.walletSelect()
+export const onConnectButtonClick = async () => {
+  const walletSelected = await onboard.walletSelect()
 
-      // perform wallet checks only if user selected a wallet
-      if (walletSelected) {
-        await onboard.walletCheck()
-      }
-    }}
-    variant="contained"
-    {...props}
-  >
+  // perform wallet checks only if user selected a wallet
+  if (walletSelected) {
+    await onboard.walletCheck()
+  }
+}
+
+const ConnectButton = (props): React.ReactElement => (
+  <Button color="primary" minWidth={140} onClick={onConnectButtonClick} variant="contained" {...props}>
     Connect
   </Button>
 )
diff --git a/src/components/NoSafe/index.tsx b/src/components/NoSafe/index.tsx
deleted file mode 100644
index 34a2246038..0000000000
--- a/src/components/NoSafe/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-
-import Bold from 'src/components/layout/Bold'
-import Col from 'src/components/layout/Col'
-import Paragraph from 'src/components/layout/Paragraph/index'
-import Row from 'src/components/layout/Row'
-import { CreateSafe } from 'src/routes/welcome/components/Layout'
-
-const NoSafe = ({ provider, text }) => (
-  <Row>
-    <Col center="xs" margin="md" sm={10} smOffset={2} start="sm" xs={12}>
-      <Paragraph size="lg">
-        <Bold>{text}</Bold>
-      </Paragraph>
-    </Col>
-    <Col center="xs" margin="md" sm={10} smOffset={2} start="sm" xs={12}>
-      <CreateSafe provider={provider} />
-    </Col>
-  </Row>
-)
-
-export default NoSafe
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index f0008b308e..80cc204076 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -3,9 +3,7 @@ import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
-import NoSafe from 'src/components/NoSafe'
-import { providerNameSelector } from 'src/logic/wallets/store/selectors'
-import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeFeaturesEnabledSelector } from 'src/logic/safe/store/selectors'
 import { AppReduxState } from 'src/store'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
@@ -34,8 +32,6 @@ const Container = (): React.ReactElement => {
     onClose: () => {},
   })
 
-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const provider = useSelector(providerNameSelector)
   const featuresEnabled = useSelector<AppReduxState, FEATURES[] | undefined>(
     safeFeaturesEnabledSelector,
     (left, right) => {
@@ -49,10 +45,6 @@ const Container = (): React.ReactElement => {
   const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
   const safeAppsEnabled = Boolean(featuresEnabled?.includes(FEATURES.SAFE_APPS))
 
-  if (!safeAddress) {
-    return <NoSafe provider={provider} text="Safe not found" />
-  }
-
   const closeGenericModal = () => {
     if (modal.onClose) {
       modal.onClose?.()
diff --git a/src/routes/welcome/components/Layout.module.scss b/src/routes/welcome/components/Layout.module.scss
deleted file mode 100644
index b8db1e0409..0000000000
--- a/src/routes/welcome/components/Layout.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "src/theme/variables.scss";
-
-.safe {
-  justify-content: center;
-  justify-items: center;
-  margin-top: $xl;
-}
-
-.summary {
-  display: flex;
-  justify-content: space-around;
-}
-
-.safeActions {
-  display: flex;
-  justify-content: start;
-  margin-top: $xl;
-}
-
-.learnMoreLink {
-  color: $secondary;
-}
-
-.connectWallet {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 5d182413a1..4604e72bdf 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,21 +1,11 @@
 import * as React from 'react'
 
-import styles from './Layout.module.scss'
-import { Card, Title, Text, Divider, ButtonLink, Dot } from '@gnosis.pm/safe-react-components'
-
-import ConnectButton from 'src/components/ConnectButton'
-/* import Dot from 'src/routes/safe/components/Dot' */
-import Block from 'src/components/layout/Block'
-import Button from 'src/components/layout/Button'
-import Heading from 'src/components/layout/Heading'
-import Img from 'src/components/layout/Img'
-import Link from 'src/components/layout/Link'
-import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
-import { marginButtonImg } from 'src/theme/variables'
 import styled from 'styled-components'
+import { Card, Button, Title, Text, Divider, ButtonLink, Dot } from '@gnosis.pm/safe-react-components'
 
-const plus = require('../assets/new.svg')
-const safe = require('../assets/safe.svg')
+import Block from 'src/components/layout/Block'
+// import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
+import { onConnectButtonClick } from 'src/components/ConnectButton'
 
 const Wrapper = styled.div`
   display: flex;
@@ -56,148 +46,117 @@ const StyledTitleOnly = styled(Title)`
 const StyledButtonLink = styled(ButtonLink)`
   margin: 16px 0 0 -8px;
 `
-const buttonStyle = {
-  marginLeft: marginButtonImg,
-}
-
-export const CreateSafe = ({ provider, size }: any) => (
-  <Button
-    color="primary"
-    component={Link}
-    disabled={!provider}
-    minHeight={42}
-    minWidth={240}
-    size={size || 'medium'}
-    to={OPEN_ADDRESS}
-    variant="contained"
-    testId="create-new-safe-btn"
-  >
-    <Img alt="Safe" height={14} src={plus} />
-    <div style={buttonStyle}>Create new Safe</div>
-  </Button>
-)
 
-export const LoadSafe = ({ provider, size }) => (
-  <Button
-    color="primary"
-    component={Link}
-    disabled={!provider}
-    minWidth={240}
-    size={size || 'medium'}
-    to={LOAD_ADDRESS}
-    variant="outlined"
-    testId="load-existing-safe-btn"
-  >
-    <Img alt="Safe" height={14} src={safe} />
-    <div style={buttonStyle}>Load existing Safe</div>
-  </Button>
-)
+type Props = {
+  isOldMultisigMigration?: boolean
+  provider: any
+}
 
-const Welcome = ({ isOldMultisigMigration, provider }: any) => {
-  const headingText = isOldMultisigMigration ? (
-    <>
-      We will replicate the owner structure from your existing Gnosis MultiSig to let you test the new interface. As
-      soon as you feel comfortable, start moving funds to your new Safe.
-    </>
-  ) : (
-    <>
-      Gnosis Safe Multisig is the most trusted platform to manage digital assets. <br /> Here is how to get started:{' '}
-    </>
-  )
+const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElement => {
   return (
-    <Block className={styles.safe}>
+    <Block>
+      {/* Title */}
       <Title size="md" strong withoutMargin>
         Welcome to Gnosis Safe Multisig.
       </Title>
-      <Title size="xs">{headingText}</Title>
 
-      {provider ? (
-        <>
-          <Wrapper>
-            <StyledCard>
+      {/* Subtitle */}
+      <Title size="xs">
+        {isOldMultisigMigration ? (
+          <>
+            We will replicate the owner structure from your existing Gnosis MultiSig to let you test the new interface.
+            As soon as you feel comfortable, start moving funds to your new Safe.
+          </>
+        ) : (
+          <>
+            Gnosis Safe Multisig is the most trusted platform to manage digital assets. <br /> Here is how to get
+            started:{' '}
+          </>
+        )}
+      </Title>
+
+      <>
+        <Wrapper>
+          {/* Connect wallet */}
+          <StyledCard>
+            <TitleWrapper>
+              <Dot color="primary">
+                <Title size="xs">1</Title>
+              </Dot>
+              <StyledTitle size="sm" strong withoutMargin>
+                Connect wallet
+              </StyledTitle>
+            </TitleWrapper>
+            <Text size="xl">
+              Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the authentication
+              factors.
+            </Text>
+            <StyledButtonLink textSize="xl" color="primary" iconType="externalLink">
+              Why do I need to connect wallet?
+            </StyledButtonLink>
+            <Button
+              size="lg"
+              color="primary"
+              variant="contained"
+              onClick={onConnectButtonClick}
+              data-testid="connect-btn"
+            >
+              <Text size="xl" color="white">
+                Connect wallet
+              </Text>
+            </Button>
+          </StyledCard>
+
+          <StyledCardDouble>
+            {/* Create safe */}
+            <CardsCol>
               <TitleWrapper>
                 <Dot color="primary">
-                  <Title size="xs">1</Title>
+                  <Title size="xs">2</Title>
                 </Dot>
                 <StyledTitle size="sm" strong withoutMargin>
-                  Connect wallet
+                  Create Safe
                 </StyledTitle>
               </TitleWrapper>
               <Text size="xl">
-                Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the
-                authentication factors.
+                Create a new Safe Multisig that is controlled by one or multiple owners. <br />
+                You will be required to pay a network fee for creating your new Safe.
               </Text>
-              <StyledButtonLink textSize="xl" color="primary" iconType="externalLink">
-                Why do I need to connect wallet?
-              </StyledButtonLink>
-              <Button size="lg" color="primary" variant="contained">
+              <Button size="lg" color="primary" variant="contained" disabled={!provider}>
                 <Text size="xl" color="white">
-                  Connect wallet
+                  + Create new Safe
                 </Text>
               </Button>
-              <Block className={styles.LoadSafe} margin="md" padding="lg">
-                <LoadSafe provider={provider} size="large" />
-              </Block>
-            </StyledCard>
-            <StyledCardDouble>
-              <CardsCol>
-                <TitleWrapper>
-                  <Dot color="primary">
-                    <Title size="xs">2</Title>
-                  </Dot>
-                  <StyledTitle size="sm" strong withoutMargin>
-                    Create Safe
-                  </StyledTitle>
-                </TitleWrapper>
-                <Text size="xl">
-                  Create a new Safe Multisig that is controlled by one or multiple owners. <br />
-                  You will be required to pay a network fee for creating your new Safe.
-                </Text>
-                <Button size="lg" color="primary" variant="contained">
-                  <Text size="xl" color="white">
-                    + Create new Safe
-                  </Text>
-                </Button>
-                <Block className={styles.safeActions} margin="md">
-                  <CreateSafe provider={provider} size="large" />
-                </Block>
-              </CardsCol>
-              <Divider orientation="vertical" />
-              <CardsCol>
-                <StyledTitleOnly size="sm" strong withoutMargin>
+            </CardsCol>
+
+            <Divider orientation="vertical" />
+
+            {/* Load safe */}
+            <CardsCol>
+              <StyledTitleOnly size="sm" strong withoutMargin>
+                Load existing Safe
+              </StyledTitleOnly>
+              <Text size="xl">
+                Already have a Safe? Do you want to access your Safe Multisig from a different device? Easily load your
+                Safe Multisig using your Safe address.
+              </Text>
+              <Button
+                variant="bordered"
+                iconType="safe"
+                iconSize="sm"
+                size="lg"
+                color="secondary"
+                onClick={() => alert('click')}
+                disabled={!provider}
+              >
+                <Text size="xl" color="secondary">
                   Load existing Safe
-                </StyledTitleOnly>
-                <Text size="xl">
-                  Already have a Safe? Do you want to access your Safe Multisig from a different device? Easily load
-                  your Safe Multisig using your Safe address.
                 </Text>
-                <Button
-                  variant="bordered"
-                  iconType="safe"
-                  iconSize="sm"
-                  size="lg"
-                  color="secondary"
-                  onClick={() => alert('click')}
-                >
-                  <Text size="xl" color="secondary">
-                    Load existing Safe
-                  </Text>
-                </Button>
-                <Block className={styles.safeActions} margin="md">
-                  <LoadSafe provider={provider} size="large" />
-                </Block>
-              </CardsCol>
-            </StyledCardDouble>
-          </Wrapper>
-        </>
-      ) : (
-        <Block className={styles.connectWallet} margin="md">
-          <Heading align="left" margin="md" tag="h3">
-            Get Started by Connecting a Wallet
-          </Heading>
-          <ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />
-        </Block>
-      )}
+              </Button>
+            </CardsCol>
+          </StyledCardDouble>
+        </Wrapper>
+      </>
     </Block>
   )
 }

From 574d4513c85883bcf1782b0dcc0526b714ea46bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 2 Dec 2020 15:11:46 -0300
Subject: [PATCH 08/18] fix margins

---
 src/routes/welcome/components/Layout.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 4604e72bdf..9c2e0edaac 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -10,23 +10,29 @@ import { onConnectButtonClick } from 'src/components/ConnectButton'
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
+  margin: 24px 0 0 0;
 `
 const StyledCardDouble = styled(Card)`
   display: flex;
   padding: 0;
 `
 const StyledCard = styled(Card)`
-  margin: 0 20px 0 0;
-  max-width: 33%;
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  margin: 0 20px 0 0;
+  max-width: 33%;
 `
 const CardsCol = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   padding: 24px;
   width: 50%;
 `
+const StyledButton = styled(Button)`
+  margin-top: auto;
+`
 const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -44,7 +50,7 @@ const StyledTitleOnly = styled(Title)`
   margin: 0 0 16px 0;
 `
 const StyledButtonLink = styled(ButtonLink)`
-  margin: 16px 0 0 -8px;
+  margin: 16px 0 16px -8px;
 `
 
 type Props = {
@@ -56,7 +62,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
   return (
     <Block>
       {/* Title */}
-      <Title size="md" strong withoutMargin>
+      <Title size="md" strong>
         Welcome to Gnosis Safe Multisig.
       </Title>
 
@@ -122,11 +128,11 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
                 Create a new Safe Multisig that is controlled by one or multiple owners. <br />
                 You will be required to pay a network fee for creating your new Safe.
               </Text>
-              <Button size="lg" color="primary" variant="contained" disabled={!provider}>
+              <StyledButton size="lg" color="primary" variant="contained" disabled={!provider}>
                 <Text size="xl" color="white">
                   + Create new Safe
                 </Text>
-              </Button>
+              </StyledButton>
             </CardsCol>
 
             <Divider orientation="vertical" />
@@ -140,7 +146,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
                 Already have a Safe? Do you want to access your Safe Multisig from a different device? Easily load your
                 Safe Multisig using your Safe address.
               </Text>
-              <Button
+              <StyledButton
                 variant="bordered"
                 iconType="safe"
                 iconSize="sm"
@@ -152,7 +158,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
                 <Text size="xl" color="secondary">
                   Load existing Safe
                 </Text>
-              </Button>
+              </StyledButton>
             </CardsCol>
           </StyledCardDouble>
         </Wrapper>

From 917013bc98f746dde17c3e091f366b6ed949c305 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 2 Dec 2020 16:33:50 -0300
Subject: [PATCH 09/18] update SRC

---
 package.json                             |  2 +-
 src/routes/welcome/components/Layout.tsx | 11 ++++++-----
 yarn.lock                                |  4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index fa02b361ea..23d232701c 100644
--- a/package.json
+++ b/package.json
@@ -168,7 +168,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#9f8bcf6",    
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#155576d",        
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.30.0",
     "@material-ui/core": "4.11.0",
diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 9c2e0edaac..5647fbed2b 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -4,8 +4,9 @@ import styled from 'styled-components'
 import { Card, Button, Title, Text, Divider, ButtonLink, Dot } from '@gnosis.pm/safe-react-components'
 
 import Block from 'src/components/layout/Block'
-// import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
+import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
 import { onConnectButtonClick } from 'src/components/ConnectButton'
+import Link from 'src/components/layout/Link'
 
 const Wrapper = styled.div`
   display: flex;
@@ -113,7 +114,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
             </Button>
           </StyledCard>
 
-          <StyledCardDouble>
+          <StyledCardDouble disabled={!provider}>
             {/* Create safe */}
             <CardsCol>
               <TitleWrapper>
@@ -128,7 +129,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
                 Create a new Safe Multisig that is controlled by one or multiple owners. <br />
                 You will be required to pay a network fee for creating your new Safe.
               </Text>
-              <StyledButton size="lg" color="primary" variant="contained" disabled={!provider}>
+              <StyledButton size="lg" color="primary" variant="contained" component={Link} to={OPEN_ADDRESS}>
                 <Text size="xl" color="white">
                   + Create new Safe
                 </Text>
@@ -152,8 +153,8 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
                 iconSize="sm"
                 size="lg"
                 color="secondary"
-                onClick={() => alert('click')}
-                disabled={!provider}
+                component={Link}
+                to={LOAD_ADDRESS}
               >
                 <Text size="xl" color="secondary">
                   Load existing Safe
diff --git a/yarn.lock b/yarn.lock
index 468567acf8..6539564108 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1522,9 +1522,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#9f8bcf6":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#155576d":
   version "0.4.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#9f8bcf6599a0db10b15a769510ed86d8c49426f7"
+  resolved "https://github.com/gnosis/safe-react-components.git#155576d5995de6967169b5cd68d9b4aa2337b227"
   dependencies:
     classnames "^2.2.6"
     polished "^3.6.7"

From abb08bb1bf6bcfbe11453db9bd98cd84db5def3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 2 Dec 2020 16:51:51 -0300
Subject: [PATCH 10/18] fix icon size

---
 src/routes/welcome/components/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 5647fbed2b..333c7d82e9 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -98,7 +98,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
               Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the authentication
               factors.
             </Text>
-            <StyledButtonLink textSize="xl" color="primary" iconType="externalLink">
+            <StyledButtonLink textSize="xl" color="primary" iconType="externalLink" iconSize="sm">
               Why do I need to connect wallet?
             </StyledButtonLink>
             <Button

From fe410eb7bf945dcc86cc05c571bbf03cc35565df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 3 Dec 2020 10:16:45 -0300
Subject: [PATCH 11/18] update SRC hash

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 23d232701c..96f1c9e1e9 100644
--- a/package.json
+++ b/package.json
@@ -168,7 +168,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#155576d",        
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#600b5b2",        
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.30.0",
     "@material-ui/core": "4.11.0",
diff --git a/yarn.lock b/yarn.lock
index 6539564108..896e99c361 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1522,9 +1522,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#155576d":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#600b5b2":
   version "0.4.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#155576d5995de6967169b5cd68d9b4aa2337b227"
+  resolved "https://github.com/gnosis/safe-react-components.git#600b5b2984540e81e73645994033f1cf6b4a7a82"
   dependencies:
     classnames "^2.2.6"
     polished "^3.6.7"

From 5db59791026846762ea98fd51fd4034a5c395537 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 3 Dec 2020 10:48:41 -0300
Subject: [PATCH 12/18] Dot: replacer number by check when wallet is connected

---
 src/routes/welcome/components/Layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 333c7d82e9..cde0c065da 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import styled from 'styled-components'
-import { Card, Button, Title, Text, Divider, ButtonLink, Dot } from '@gnosis.pm/safe-react-components'
+import { Card, Button, Title, Text, Divider, ButtonLink, Dot, Icon } from '@gnosis.pm/safe-react-components'
 
 import Block from 'src/components/layout/Block'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
@@ -88,7 +88,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
           <StyledCard>
             <TitleWrapper>
               <Dot color="primary">
-                <Title size="xs">1</Title>
+                {!provider ? <Title size="xs">1</Title> : <Icon color="white" type="check" size="md" />}
               </Dot>
               <StyledTitle size="sm" strong withoutMargin>
                 Connect wallet

From 159be82cc2a56cd288d84100ab6be4dedc1c9c23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 3 Dec 2020 12:18:54 -0300
Subject: [PATCH 13/18] fix card  width

---
 src/routes/welcome/components/Layout.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index cde0c065da..99b25a249c 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -22,7 +22,8 @@ const StyledCard = styled(Card)`
   flex-direction: column;
   align-items: flex-start;
   margin: 0 20px 0 0;
-  max-width: 33%;
+  max-width: 27%;
+  height: 276px;
 `
 const CardsCol = styled.div`
   display: flex;
@@ -101,7 +102,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
             <StyledButtonLink textSize="xl" color="primary" iconType="externalLink" iconSize="sm">
               Why do I need to connect wallet?
             </StyledButtonLink>
-            <Button
+            <StyledButton
               size="lg"
               color="primary"
               variant="contained"
@@ -111,7 +112,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
               <Text size="xl" color="white">
                 Connect wallet
               </Text>
-            </Button>
+            </StyledButton>
           </StyledCard>
 
           <StyledCardDouble disabled={!provider}>

From 919070cb08101765fb42ee15b50469f7b83a1abd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 3 Dec 2020 14:13:50 -0300
Subject: [PATCH 14/18] add url to help to connect wallet.

---
 src/routes/welcome/components/Layout.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 99b25a249c..d1f1ad0a92 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react'
 
 import styled from 'styled-components'
-import { Card, Button, Title, Text, Divider, ButtonLink, Dot, Icon } from '@gnosis.pm/safe-react-components'
+import { Card, Button, Title, Text, Divider, ButtonLink, Dot, Icon, Link } from '@gnosis.pm/safe-react-components'
 
 import Block from 'src/components/layout/Block'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
 import { onConnectButtonClick } from 'src/components/ConnectButton'
-import Link from 'src/components/layout/Link'
 
 const Wrapper = styled.div`
   display: flex;
@@ -100,7 +99,15 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
               factors.
             </Text>
             <StyledButtonLink textSize="xl" color="primary" iconType="externalLink" iconSize="sm">
-              Why do I need to connect wallet?
+              <Link
+                size="xl"
+                href="https://help.gnosis-safe.io/en/articles/4689442-why-do-i-need-to-connect-a-wallet"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="More info about: Why do I need to connect wallet?"
+              >
+                Why do I need to connect wallet?
+              </Link>
             </StyledButtonLink>
             <StyledButton
               size="lg"

From 0f13bd2552cefa58e588c7f969733c91d2b3bf75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 9 Dec 2020 13:05:31 -0300
Subject: [PATCH 15/18] remove underline on button as a link (Load Safe).

---
 package.json                             | 2 +-
 src/routes/welcome/components/Layout.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 96f1c9e1e9..c12cde1099 100644
--- a/package.json
+++ b/package.json
@@ -168,7 +168,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#600b5b2",        
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#b6a6cf0",        
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.30.0",
     "@material-ui/core": "4.11.0",
diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index d1f1ad0a92..c63be357f2 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -33,6 +33,7 @@ const CardsCol = styled.div`
 `
 const StyledButton = styled(Button)`
   margin-top: auto;
+  text-decoration: none;
 `
 const TitleWrapper = styled.div`
   display: flex;

From 686d65f25d4aa3a3584aa0b5a6e3ce579291de34 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 10 Dec 2020 08:53:25 -0300
Subject: [PATCH 16/18] Fix buttnos

---
 src/routes/welcome/components/Layout.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 7376e5e7af..079f7d219e 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,7 +1,18 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Card, Button, Title, Text, Divider, ButtonLink, Dot, Icon, Link } from '@gnosis.pm/safe-react-components'
+import {
+  Card,
+  Button,
+  Title,
+  Text,
+  Divider,
+  ButtonLink,
+  Dot,
+  Icon,
+  Link as LinkSRC,
+} from '@gnosis.pm/safe-react-components'
 
+import Link from 'src/components/layout/Link'
 import Block from 'src/components/layout/Block'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
 import { onConnectButtonClick } from 'src/components/ConnectButton'
@@ -99,7 +110,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
               factors.
             </Text>
             <StyledButtonLink textSize="xl" color="primary" iconType="externalLink" iconSize="sm">
-              <Link
+              <LinkSRC
                 size="xl"
                 href="https://help.gnosis-safe.io/en/articles/4689442-why-do-i-need-to-connect-a-wallet"
                 target="_blank"
@@ -107,7 +118,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
                 title="More info about: Why do I need to connect wallet?"
               >
                 Why do I need to connect wallet?
-              </Link>
+              </LinkSRC>
             </StyledButtonLink>
             <StyledButton
               size="lg"

From f5d66f96df5faa6aa0a0dcf4118a269f8a3a65e4 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 11 Dec 2020 11:05:01 -0300
Subject: [PATCH 17/18] disable connect wallet button when theres is a
 connected wallet

---
 src/routes/welcome/components/Layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 079f7d219e..84d2b652e9 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -125,6 +125,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
               color="primary"
               variant="contained"
               onClick={onConnectButtonClick}
+              disabled={provider}
               data-testid="connect-btn"
             >
               <Text size="xl" color="white">

From 879c21741e38ef5286f1e0e3a6de6602d265179b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 11 Dec 2020 15:11:53 -0300
Subject: [PATCH 18/18] fix padding in New Transaction button

---
 src/components/AppLayout/Sidebar/SafeHeader/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
index ee1503d499..2946cfd644 100644
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
@@ -44,6 +44,7 @@ const IconContainer = styled.div`
   justify-content: space-evenly;
 `
 const StyledButton = styled(Button)`
+  padding: 0 18px;
   *:first-child {
     margin: 0 4px 0 0;
   }