approve tx modal ui

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/index.jsx

@@ -0,0 +1,80 @@
+// @flow
+import React from 'react'
+import Close from '@material-ui/icons/Close'
+import IconButton from '@material-ui/core/IconButton'
+import { withStyles } from '@material-ui/core/styles'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import Checkbox from '@material-ui/core/Checkbox'
+import Modal from '~/components/Modal'
+import Hairline from '~/components/layout/Hairline'
+import Button from '~/components/layout/Button'
+import Row from '~/components/layout/Row'
+import Bold from '~/components/layout/Bold'
+import Block from '~/components/layout/Block'
+import Paragraph from '~/components/layout/Paragraph'
+import { styles } from './style'
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  isOpen: boolean,
+  createTransaction: Function,
+  nonce: string,
+}
+
+const ApproveTxModal = ({
+  onClose, isOpen, classes, createTransaction, nonce,
+}: Props) => (
+  <Modal
+    title="Approve Transaction"
+    description="Approve Transaction"
+    handleClose={onClose}
+    open={isOpen}
+    // paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
+  >
+    <Row align="center" grow className={classes.heading}>
+      <Paragraph weight="bolder" className={classes.headingText} noMargin>
+        Approve transaction
+      </Paragraph>
+      <IconButton onClick={onClose} disableRipple>
+        <Close className={classes.closeIcon} />
+      </IconButton>
+    </Row>
+    <Hairline />
+    <Block className={classes.container}>
+      <Row>
+        <Paragraph>
+          This action will approve this transaction. A separate transaction will be performed to submit the approval.
+        </Paragraph>
+        <Paragraph size="sm" color="medium">
+          Transaction nonce:
+          <br />
+          <Bold className={classes.nonceNumber}>{nonce}</Bold>
+        </Paragraph>
+        <Paragraph color="error">
+          Approving transaction does not execute it immediately. If you want to approve and execute the transaction
+          right away, click on checkbox below.
+        </Paragraph>
+        <FormControlLabel control={<Checkbox checked={false} color="primary" />} label="Execute transaction" />
+      </Row>
+    </Block>
+    <Row align="center" className={classes.buttonRow}>
+      <Button className={classes.button} minWidth={140} minHeight={42} onClick={onClose}>
+        Exit
+      </Button>
+      <Button
+        type="submit"
+        className={classes.button}
+        variant="contained"
+        minWidth={214}
+        minHeight={42}
+        color="primary"
+        data-testid="review-tx-btn"
+      >
+        Approve Transaction
+      </Button>
+    </Row>
+  </Modal>
+)
+
+export default withStyles(styles)(ApproveTxModal)

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/style.js

@@ -0,0 +1,35 @@
+// @flow
+import {
+  lg, md, sm, border,
+} from '~/theme/variables'
+
+export const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  headingText: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  container: {
+    padding: `${md} ${lg}`,
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    borderTop: `1px solid ${border}`,
+  },
+  nonceNumber: {
+    marginTop: sm,
+    fontSize: md,
+  },
+})

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx

@@ -20,6 +20,7 @@ import { secondary } from '~/theme/variables'
 import OwnersList from './OwnersList'
 import ButtonRow from './ButtonRow'
 import CancelTxModal from './CancelTxModal'
+import ApproveTxModal from './ApproveTxModal'
 import { styles } from './style'
 import { formatDate } from '../columns'
 
@@ -136,11 +137,12 @@ to:
             </Row>
             <Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
             <Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
-            <ButtonRow onTxApprove={openApproveModal} onTxCancel={openCancelModal} />
+            <ButtonRow onTxConfirm={openApproveModal} onTxCancel={openCancelModal} />
           </Col>
         </Row>
       </Block>
       <CancelTxModal isOpen={openModal === 'cancelTx'} onClose={closeModal} nonce={tx.nonce} />
+      <ApproveTxModal isOpen={openModal === 'approveTx'} onClose={closeModal} nonce={tx.nonce} />
     </>
   )
 }