ownerslist styles

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

@@ -6,7 +6,6 @@ import OpenInNew from '@material-ui/icons/OpenInNew'
 import MuiList from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
 import ListItemText from '@material-ui/core/ListItemText'
 import Tab from '@material-ui/core/Tab'
 import Row from '~/components/layout/Row'
@@ -16,24 +15,28 @@ import Bold from '~/components/layout/Bold'
 import Span from '~/components/layout/Span'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
-import { type Transaction } from '~/routes/safe/store/models/transaction'
+import Identicon from '~/components/Identicon'
 import { type Owner } from '~/routes/safe/store/models/owner'
 import { openTxInEtherScan } from '~/logic/wallets/getWeb3'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
-// import { styles } from './style'
+import { styles } from './style'
 
 type Props = {
-  owners: List<string>,
+  owners: List<Owner>,
+  classes: Object,
 }
 
-const OwnersList = ({ owners }: Props) => (
-  <MuiList>
+const OwnersList = ({ owners, classes }: Props) => (
+  <MuiList className={classes.ownersList}>
     {owners.map(owner => (
-      <ListItem>
-        <ListItemText>{owner}</ListItemText>
+      <ListItem key={owner.address} className={classes.owner}>
+        <ListItemIcon>
+          <Identicon address={owner.address} diameter={32} />
+        </ListItemIcon>
+        <ListItemText primary={owner.name} secondary={owner.address} />
       </ListItem>
     ))}
   </MuiList>
 )
 
-export default OwnersList
+export default withStyles(styles)(OwnersList)

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

@@ -0,0 +1,14 @@
+// @flow
+import { border } from '~/theme/variables'
+
+export const styles = () => ({
+  ownersList: {
+    width: '100%',
+    padding: 0,
+    maxHeight: '192px',
+    overflowY: 'scroll',
+  },
+  owner: {
+    borderBottom: `1px solid ${border}`,
+  },
+})

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

@@ -100,7 +100,7 @@ const ExpandedTx = ({
             </Tabs>
             <Hairline color="#c8ced4" />
           </Row>
-          <Row>{tabIndex === 0 && <OwnersList owners={owners.map(owner => owner.address)} />}</Row>
+          <Row>{tabIndex === 0 && <OwnersList owners={owners} />}</Row>
         </Col>
       </Row>
     </Block>