Add threshold settings component (TODO Modal)

src/components/layout/Block/index.jsx

@@ -24,7 +24,7 @@ class Block extends PureComponent<Props> {
     const paddingStyle = padding ? capitalize(padding, 'padding') : undefined
     return (
       <div className={cx(className, 'block', margin, paddingStyle, align)} {...props}>
-        { children }
+        {children}
       </div>
     )
   }

src/components/layout/Link/index.jsx

@@ -13,7 +13,7 @@ type Props = {
   children: React.Node,
   color?: 'regular' | 'white',
   className?: string,
-  innerRef: React.ElementRef<any>,
+  innerRef?: React.ElementRef<any>,
 }
 
 const GnosisLink = ({

src/components/layout/Row/index.jsx

@@ -1,6 +1,6 @@
 // @flow
 import classNames from 'classnames/bind'
-import React from 'react'
+import * as React from 'react'
 import { capitalize } from '~/utils/css'
 import styles from './index.scss'
 
@@ -27,7 +27,7 @@ const Row = ({
 
   return (
     <div className={rowClassNames} {...props}>
-      { children }
+      {children}
     </div>
   )
 }

src/routes/safe/components/Layout.jsx

@@ -148,6 +148,8 @@ class Layout extends React.Component<Props, State> {
             safeAddress={address}
             safeName={name}
             etherScanLink={etherScanLink}
+            threshold={safe.threshold}
+            owners={safe.owners}
           />
         )}
       </React.Fragment>

src/routes/safe/components/Settings/Threshold/index.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Threshold = () => {
-  return <div>
-    This will change the threshold
-  </div>
-}
-
-export default Threshold

src/routes/safe/components/Settings/ThresholdSettings/index.jsx

@@ -0,0 +1,43 @@
+// @flow
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Heading from '~/components/layout/Heading'
+import Button from '~/components/layout/Button'
+import Bold from '~/components/layout/Bold'
+import Block from '~/components/layout/Block'
+import Row from '~/components/layout/Row'
+import Paragraph from '~/components/layout/Paragraph/index'
+import { styles } from './style'
+
+type Props = {
+  owners: any,
+  threshold: number,
+  classes: Object,
+}
+
+const ThresholdSettings = ({ owners, threshold, classes }: Props) => (
+  <Block className={classes.container}>
+    <Heading tag="h3">Required confirmations</Heading>
+    <Paragraph>
+      Any transaction over any daily limit
+      <br />
+      {' '}
+requires the confirmation of:
+    </Paragraph>
+    <Paragraph size="xxl" className={classes.ownersText}>
+      <Bold>{threshold}</Bold>
+      {' '}
+out of
+      <Bold>{owners.size}</Bold>
+      {' '}
+owners
+    </Paragraph>
+    <Row align="center" className={classes.buttonRow}>
+      <Button color="primary" minWidth={120} className={classes.modifyBtn} onClick={() => {}} variant="contained">
+        Modify
+      </Button>
+    </Row>
+  </Block>
+)
+
+export default withStyles(styles)(ThresholdSettings)

src/routes/safe/components/Settings/ThresholdSettings/style.js

@@ -0,0 +1,33 @@
+// @flow
+import { fontColor, lg, smallFontSize, md } from '~/theme/variables'
+
+export const styles = () => ({
+  ownersText: {
+    fontSize: '26px',
+    color: '#8896b6',
+    '& b': {
+      color: fontColor,
+    },
+  },
+  container: {
+    height: '100%',
+    position: 'relative',
+    padding: lg,
+  },
+  buttonRow: {
+    position: 'absolute',
+    bottom: '51px',
+    left: 0,
+    height: '51px',
+    width: '100%',
+    paddingRight: md,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    borderTop: 'solid 1px #e4e8f1',
+    boxSizing: 'border-box',
+  },
+  modifyBtn: {
+    height: '32px',
+    fontSize: smallFontSize,
+  },
+})

src/routes/safe/components/Settings/index.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import cn from 'classnames'
+import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
@@ -8,7 +9,8 @@ import Row from '~/components/layout/Row'
 import RemoveSafeModal from './RemoveSafeModal'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
-import Threshold from './Threshold'
+import type { Owner } from '~/routes/safe/store/models/owner'
+import ThresholdSettings from './ThresholdSettings'
 import { styles } from './style'
 
 type State = {
@@ -22,6 +24,8 @@ type Props = {
   etherScanLink: string,
   safeAddress: string,
   safeName: string,
+  owners: List<Owner>,
+  threshold: number,
 }
 
 type Action = 'RemoveSafe'
@@ -47,7 +51,7 @@ class Settings extends React.Component<Props, State> {
   render() {
     const { showRemoveSafe, menuOptionIndex } = this.state
     const {
-      classes, granted, etherScanLink, safeAddress, safeName,
+      classes, granted, etherScanLink, safeAddress, safeName, owners, threshold,
     } = this.props
 
     return (
@@ -110,7 +114,7 @@ class Settings extends React.Component<Props, State> {
             <Block className={classes.container}>
               {menuOptionIndex === 1 && <p>To be done</p>}
               {granted && menuOptionIndex === 2 && <p>To be done</p>}
-              {granted && menuOptionIndex === 3 && <Threshold />}
+              {granted && menuOptionIndex === 3 && <ThresholdSettings owners={owners} threshold={threshold} />}
               {granted && menuOptionIndex === 4 && <p>To be done</p>}
             </Block>
           </Col>

src/routes/safe/components/Settings/style.js

@@ -28,7 +28,7 @@ export const styles = (theme: Object) => ({
     fontWeight: bolderFont,
   },
   container: {
-    padding: lg,
+    height: '100%',
   },
   message: {
     margin: `${sm} 0`,