ThresholdModal wip

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

@@ -0,0 +1,45 @@
+// @flow
+import React from 'react'
+import { List } from 'immutable'
+import { withStyles } from '@material-ui/core/styles'
+import Close from '@material-ui/icons/Close'
+import IconButton from '@material-ui/core/IconButton'
+import Hairline from '~/components/layout/Hairline'
+import Paragraph from '~/components/layout/Paragraph'
+import Button from '~/components/layout/Button'
+import Block from '~/components/layout/Block'
+import Row from '~/components/layout/Row'
+import Col from '~/components/layout/Col'
+import type { Owner } from '~/routes/safe/store/models/owner'
+import { styles } from './style'
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  threshold: number,
+  owners: List<Owner>,
+}
+
+const ChangeThreshold = ({ onClose, owners, threshold, classes, }: Props) => (
+  <React.Fragment>
+    <Row align="center" grow className={classes.heading}>
+      <Paragraph className={classes.manage} weight="bolder" noMargin>
+        Remove owner
+      </Paragraph>
+      <IconButton onClick={onClose} disableRipple>
+        <Close className={classes.close} />
+      </IconButton>
+    </Row>
+    <Col layout="column" middle="xs" className={classes.detailsContainer}>
+      <Hairline />
+    </Col>
+    <Hairline />
+    <Row align="center" className={classes.buttonRow}>
+      <Button color="primary" className={classes.button} minWidth={140} onClick={onClose} variant="contained">
+        Done
+      </Button>
+    </Row>
+  </React.Fragment>
+)
+
+export default withStyles(styles)(ChangeThreshold)

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

@@ -0,0 +1,37 @@
+// @flow
+import { lg, md, sm } from '~/theme/variables'
+
+export const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'flex-start',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  annotation: {
+    letterSpacing: '-1px',
+    color: '#a2a8ba',
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
+  headingText: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  container: {
+    padding: `${md} ${lg}`,
+  },
+  amount: {
+    marginLeft: sm,
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+  },
+})

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

@@ -1,43 +1,73 @@
 // @flow
-import React from 'react'
+import React, { useState } from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import { List } from 'immutable'
 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 Modal from '~/components/Modal'
+import Paragraph from '~/components/layout/Paragraph'
+import ChangeThreshold from './ChangeThreshold'
+import type { Owner } from '~/routes/safe/store/models/owner'
 import { styles } from './style'
 
 type Props = {
-  owners: any,
+  owners: List<Owner>,
   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 />
-      {' '}
+const ThresholdSettings = ({ owners, threshold, classes }: Props) => {
+  const [isModalOpen, setModalOpen] = useState(false)
+
+  const toggleModal = () => {
+    setModalOpen(prevOpen => !prevOpen)
+  }
+
+  return (
+    <React.Fragment>
+      <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>
-      {' '}
+        </Paragraph>
+        <Paragraph size="xxl" className={classes.ownersText}>
+          <Bold>{threshold}</Bold>
+          {' '}
 out of
-      <Bold>{owners.size}</Bold>
-      {' '}
+          <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>
-)
+        </Paragraph>
+        <Row align="center" className={classes.buttonRow}>
+          <Button
+            color="primary"
+            minWidth={120}
+            className={classes.modifyBtn}
+            onClick={toggleModal}
+            variant="contained"
+          >
+            Modify
+          </Button>
+        </Row>
+      </Block>
+      <Modal
+        title="Change Required Confirmations"
+        description="Change Required Confirmations Form"
+        handleClose={toggleModal}
+        open={isModalOpen}
+      >
+        <ChangeThreshold
+          onClose={toggleModal}
+        />
+      </Modal>
+    </React.Fragment>
+  )
+}
 
 export default withStyles(styles)(ThresholdSettings)

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

@@ -1,5 +1,7 @@
 // @flow
-import { fontColor, lg, smallFontSize, md } from '~/theme/variables'
+import {
+  fontColor, lg, smallFontSize, md,
+} from '~/theme/variables'
 
 export const styles = () => ({
   ownersText: {