From b0a325fd58125047471ba7a2339a442b7b13a667 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Fri, 13 Dec 2024 13:40:51 +0100
Subject: [PATCH] Small UI updates to prime landing page

---
 centrifuge-app/src/pages/Prime/index.tsx | 83 ++++++++++--------------
 fabric/src/theme/tokens/colors.ts        |  2 +-
 2 files changed, 34 insertions(+), 51 deletions(-)

diff --git a/centrifuge-app/src/pages/Prime/index.tsx b/centrifuge-app/src/pages/Prime/index.tsx
index 59ced37404..ef555e2965 100644
--- a/centrifuge-app/src/pages/Prime/index.tsx
+++ b/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,8 +206,10 @@ 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}>
@@ -238,6 +217,7 @@ function DaoPortfoliosTable() {
         </TextWithPlaceholder>
       ),
       sortKey: 'value',
+      width: '2fr',
     },
     {
       align: 'left',
@@ -252,7 +232,10 @@ 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}
@@ -260,6 +243,6 @@ function DaoPortfoliosTable() {
         defaultSortOrder="desc"
         onRowClicked={(row: Row) => `/prime/${row.slug}`}
       />
-    </LayoutSection>
+    </Box>
   )
 }
diff --git a/fabric/src/theme/tokens/colors.ts b/fabric/src/theme/tokens/colors.ts
index ba4cf42d8a..84c6e9d42e 100644
--- a/fabric/src/theme/tokens/colors.ts
+++ b/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',