WIP styling investment flow. (#2152)

* Use theme colors. * Update header button and misc styling. (#2129) * Update header button and misc styling. * Update header button mobile part 1. (#2132) * Update header button mobile part 1. * Re-structure claim button and mobile responsive. (#2137) * Re-structure claim button and mobile responsive. * Claim style improve 5 (#2146) * Update * Update * Investing table styling start * Post merge styling. * WIP styling investment flow. Co-authored-by: David W3stside <[email protected]>
gnosis · Jan 15, 2022 · a07c696 · a07c696
1 parent 4c41c57
commit a07c696
Show file tree

Hide file tree

Showing 2 changed files with 262 additions and 31 deletions.
diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components/macro'
 import { ClaimType, useClaimState } from 'state/claim/hooks'
-import { ClaimTable, ClaimBreakdown } from 'pages/Claim/styled'
+import { ClaimTable, ClaimBreakdown, TokenLogo } from 'pages/Claim/styled'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { ClaimStatus } from 'state/claim/actions'
 // import { UserClaimDataDetails } from './types' TODO: fix in another PR
@@ -63,10 +63,16 @@ const ClaimsTableRow = ({
           />
         </label>
       </td>
-      <td>{isFree ? ClaimType[type] : `Buy vCOW with ${currencyAmount?.currency?.symbol}`}</td>
       <td>
-        <CowProtocolLogo size={16} /> {formatSmart(claimAmount) || 0} vCOW
+        {' '}
+        <TokenLogo symbol={`${currencyAmount?.currency?.symbol}`} size={32} />
+        <CowProtocolLogo size={32} />
+        <span>
+          <b>Buy vCOW</b>
+          <i>{isFree ? ClaimType[type] : `with ${currencyAmount?.currency?.symbol}`}</i>
+        </span>
       </td>
+      <td>{formatSmart(claimAmount) || 0} vCOW</td>
       <td>
         <span>
           Price:{' '}