Small UI updates to prime landing page

centrifuge-app/src/pages/Prime/index.tsx

@@ -1,15 +1,6 @@
 import { CurrencyBalance, addressToHex } from '@centrifuge/centrifuge-js'
 import { useCentrifugeUtils, useGetNetworkName } from '@centrifuge/centrifuge-react'
-import {
-  AnchorButton,
-  Box,
-  Grid,
-  IconExternalLink,
-  IconGlobe,
-  Shelf,
-  Text,
-  TextWithPlaceholder,
-} from '@centrifuge/fabric'
+import { Box, Grid, IconExternalLink, IconGlobe, Shelf, Text, TextWithPlaceholder } from '@centrifuge/fabric'
 import { useTheme } from 'styled-components'
 import { AnchorTextLink } from '../../../src/components/TextLink'
 import primePageImage from '../../assets/images/prime_page_image.svg'
@@ -34,36 +25,45 @@ function Prime() {
         <Box display="flex" alignItems="center">
           <Box
             backgroundColor="backgroundSecondary"
-            padding="10px"
             borderRadius={28}
             height={40}
             width={40}
             border={`6px solid ${theme.colors.backgroundLight}`}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            padding="10px"
           >
-            <AnchorTextLink href="https://centrifuge.io/prime/" target="_blank">
-              <IconGlobe size={20} />
-            </AnchorTextLink>
+            <IconGlobe size={20} />
           </Box>
           <Text variant="heading1" style={{ marginLeft: 8 }}>
             Centrifuge Prime
           </Text>
         </Box>
-        <Grid gridTemplateColumns={['1fr 1fr']}>
+        <Grid
+          gridTemplateColumns={['1fr', '1fr 1fr']}
+          gap={6}
+          mt={2}
+          padding="0px 50px"
+          style={{ placeItems: 'center' }}
+        >
           <Box>
-            <Text variant="body1">
+            <Text variant="body1" style={{ lineHeight: '25.6px' }}>
               Centrifuge Prime was built to meet the needs of large decentralized organizations and protocols. Through
               Centrifuge Prime, DeFi native organizations can integrate with the largest financial markets in the world
               and take advantage of real yields from real economic activity - all onchain. Assets tailored to your
               needs, processes adapted to your governance, and all through decentralized rails.
             </Text>
-            <AnchorButton
-              href="https://centrifuge.io/prime/"
-              target="_blank"
-              iconRight={IconExternalLink}
-              variant="tertiary"
-            >
-              Go to website
-            </AnchorButton>
+            <Box display="flex" alignItems="center" mt={4}>
+              <AnchorTextLink
+                href="https://centrifuge.io/prime/"
+                target="_blank"
+                style={{ textDecoration: 'none', marginRight: 8 }}
+              >
+                Go to website
+              </AnchorTextLink>
+              <IconExternalLink size={20} />
+            </Box>
           </Box>
           <Box>
             <Box as="img" src={primePageImage} />
@@ -167,30 +167,6 @@ function DaoPortfoliosTable() {
         trancheBalances[trancheId] = { balance, tokenPrice }
       }
     })
-    // const trancheBalances = !!account
-    //   ? Object.fromEntries(
-    //       account.trancheBalances.nodes.map((tranche: any) => {
-    //         const pool = pools?.find((p) => p.id === tranche.poolId)
-    //         const decimals = pool?.currency.decimals ?? 18
-    //         const tokenPrice = pool?.tranches.find((t) => tranche.trancheId.endsWith(t.id))?.tokenPrice?.toFloat() ?? 1
-    //         let balance = new CurrencyBalance(
-    //           new BN(tranche.claimableTrancheTokens).add(new BN(tranche.pendingRedeemTrancheTokens)),
-    //           decimals
-    //         ).toFloat()
-
-    //         const subqueryCurrencies = account?.currencyBalances.nodes.filter(
-    //           (b: any) => b.currency.trancheId && b.currency.trancheId === tranche.trancheId
-    //         )
-    //         if (subqueryCurrencies.length) {
-    //           balance += subqueryCurrencies.reduce(
-    //             (acc: number, cur: any) => acc + new CurrencyBalance(cur.amount, decimals).toFloat(),
-    //             0
-    //           )
-    //         }
-    //         return [tranche.trancheId.split('-')[1], { balance, tokenPrice }]
-    //       })
-    //     )
-    //   : {}
     const totalValue = Object.values(trancheBalances)?.reduce(
       (acc, { balance, tokenPrice }) => acc + balance * tokenPrice,
       0
@@ -217,6 +193,7 @@ function DaoPortfoliosTable() {
           <Text>{row.name}</Text>
         </Shelf>
       ),
+      width: '2fr',
     },
     {
       align: 'left',
@@ -229,15 +206,18 @@ function DaoPortfoliosTable() {
         />
       ),
       cell: (row: Row) => <Text>{getNetworkName(row.network)}</Text>,
+      width: '2fr',
     },
     {
+      align: 'left',
       header: <SortableTableHeader label="Portfolio value" />,
       cell: (row: Row) => (
         <TextWithPlaceholder isLoading={isSubqueryLoading}>
           {row.value != null && formatBalance(row.value, 'USD')}
         </TextWithPlaceholder>
       ),
       sortKey: 'value',
+      width: '2fr',
     },
     {
       align: 'left',
@@ -252,14 +232,17 @@ function DaoPortfoliosTable() {
   ]
 
   return (
-    <LayoutSection title="DAO portfolios">
+    <Box mt={2} px={4}>
+      <Text variant="heading4" style={{ marginBottom: 12 }}>
+        Portfolios
+      </Text>
       <DataTable
         columns={columns}
         data={filters.data}
         defaultSortKey="value"
         defaultSortOrder="desc"
         onRowClicked={(row: Row) => `/prime/${row.slug}`}
       />
-    </LayoutSection>
+    </Box>
   )
 }

fabric/src/theme/tokens/colors.ts

@@ -2,7 +2,7 @@ export const black = '#252B34'
 export const gold = '#FFC012'
 
 export const grayScale = {
-  10: '#cfcfcf33',
+  10: '#F9FAFB',
   50: '#F6F6F6',
   100: '#E7E7E7',
   300: '#CFCFCF',