TransferRow: add responsive prototype

aragon · Jan 7, 2019 · 85e5bb7 · 85e5bb7
1 parent ed1af21
commit 85e5bb7
Showing 1 changed file with 76 additions and 6 deletions.
diff --git a/apps/finance/app/src/components/TransferRow.js b/apps/finance/app/src/components/TransferRow.js
@@ -11,7 +11,7 @@ import {
   theme,
 } from '@aragon/ui'
 import provideNetwork from '../lib/provideNetwork'
-import { formatTokenAmount } from '../lib/utils'
+import { formatTokenAmount, isSmallScreen } from '../lib/utils'
 import IconTokens from './icons/IconTokens'
 import ConfirmMessage from './ConfirmMessage'
 
@@ -44,7 +44,53 @@ class TransferRow extends React.Component {
       showCopyTransferMessage: false,
     })
   }
+
   render() {
+    return isSmallScreen()
+      ? this.renderSmallScreens()
+      : this.renderMediumAndBiggerScreens()
+  }
+
+  renderSmallScreens() {
+    const {
+      network: { type },
+      token: { decimals, symbol },
+      transaction: {
+        date,
+        entity,
+        isIncoming,
+        numData: { amount },
+        reference,
+      },
+    } = this.props
+    const { showCopyTransferMessage } = this.state
+    const formattedAmount = formatTokenAmount(
+      amount,
+      isIncoming,
+      decimals,
+      true,
+      { rounding: 5 }
+    )
+    const formattedDate = format(date, "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")
+    return (
+      <TableRow>
+        <StyledTableCell>
+          <Grid>
+            <IdentityBadge networkType={type} entity={entity} shorten={true} />
+            <time dateTime={formattedDate} title={formattedDate}>
+              {format(date, 'dd MMM yyyy')}
+            </time>
+            <TextOverflow>{reference}</TextOverflow>
+            <Amount positive={isIncoming}>
+              {formattedAmount} {symbol}
+            </Amount>
+          </Grid>
+        </StyledTableCell>
+      </TableRow>
+    )
+  }
+
+  renderMediumAndBiggerScreens() {
     const { network, token, transaction, wideMode } = this.props
     const { showCopyTransferMessage } = this.state
     const { etherscanBaseUrl } = network
@@ -116,6 +162,35 @@ class TransferRow extends React.Component {
   }
 }
 
+const StyledTableCell = styled(TableCell)`
+  &&& {
+    border-left: 0;
+    border-right: 0;
+
+    :first-child,
+    :last-child {
+      border-radius: 0;
+    }
+  }
+`
+
+const Amount = styled.span`
+  font-weight: 600;
+  color: ${({ positive }) => (positive ? theme.positive : theme.negative)};
+`
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  width: 100%;
+  padding: 0 10px;
+
+  time, ${Amount} {
+    text-align: right;
+  }
+`
+
 const NoWrapCell = styled(TableCell)`
   white-space: nowrap;
 `
@@ -126,11 +201,6 @@ const TextOverflow = styled.div`
   text-overflow: ellipsis;
 `
 
-const Amount = styled.span`
-  font-weight: 600;
-  color: ${({ positive }) => (positive ? theme.positive : theme.negative)};
-`
-
 const ActionsWrapper = styled.div`
   position: relative;
 `