Merge pull request #1934 from gnosis/feature/link-help-center

src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx

@@ -1,5 +1,6 @@
 import InputAdornment from '@material-ui/core/InputAdornment'
 import MenuItem from '@material-ui/core/MenuItem'
+import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
 import CheckCircle from '@material-ui/icons/CheckCircle'
 import * as React from 'react'
@@ -159,6 +160,18 @@ const SafeOwnersForm = (props): React.ReactElement => {
           Add additional owners (e.g. wallets of your teammates) and specify how many of them have to confirm a
           transaction before it gets executed. You can also add/remove owners and change the signature threshold after
           your Safe is created.
+          <Link
+            href="https://help.gnosis-safe.io/en/articles/4772567-what-gnosis-safe-setup-should-i-use"
+            target="_blank"
+            className={classes.link}
+            rel="noreferrer"
+            title="Learn about which Safe setup to use"
+          >
+            <Text size="lg" as="span" color="primary">
+              Learn about which Safe setup to use
+            </Text>
+            <Icon size="sm" type="externalLink" color="primary" />
+          </Link>
         </Paragraph>
       </Block>
       <Hairline />

src/routes/open/components/SafeOwnersConfirmationsForm/style.ts

@@ -1,4 +1,4 @@
-import { disabled, extraSmallFontSize, lg, md, screenSm, sm } from 'src/theme/variables'
+import { disabled, extraSmallFontSize, lg, md, screenSm, sm, xs } from 'src/theme/variables'
 import { createStyles } from '@material-ui/core'
 
 export const styles = createStyles({
@@ -8,6 +8,16 @@ export const styles = createStyles({
   title: {
     padding: `${md} ${lg}`,
   },
+  link: {
+    paddingLeft: `${xs}`,
+    '& svg': {
+      position: 'relative',
+      top: '1px',
+      left: `${xs}`,
+      height: '14px',
+      width: '14px',
+    },
+  },
   owner: {
     flexDirection: 'column',
     marginTop: '12px',