Redesign feedback

centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx

@@ -172,7 +172,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
             <AnchorButton
               href={dataUrl}
               download={`asset-${loanId}-timeseries.csv`}
-              variant="secondary"
+              variant="inverted"
               icon={IconDownload}
               small
             >
@@ -252,19 +252,19 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                                 <Text variant="label2">{'Value'}</Text>
                                 <Text variant="label2">
                                   {payload[0].payload.historicPV
-                                    ? formatBalance(payload[0].payload.historicPV, 'USD' || '', 2)
+                                    ? formatBalance(payload[0].payload.historicPV, 'USD', 2)
                                     : payload[0].payload.futurePV
-                                    ? `~${formatBalance(payload[0].payload.futurePV, 'USD' || '', 2)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePV, 'USD', 2)}`
                                     : '-'}
                                 </Text>
                               </Shelf>
                               <Shelf justifyContent="space-between" pl="4px" key={index}>
                                 <Text variant="label2">{'Price'}</Text>
                                 <Text variant="label2">
                                   {payload[0].payload.historicPrice
-                                    ? formatBalance(payload[0].payload.historicPrice, 'USD' || '', 6)
+                                    ? formatBalance(payload[0].payload.historicPrice, 'USD', 6)
                                     : payload[0].payload.futurePrice
-                                    ? `~${formatBalance(payload[0].payload.futurePrice, 'USD' || '', 6)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePrice, 'USD', 6)}`
                                     : '-'}
                                 </Text>
                               </Shelf>
@@ -278,27 +278,39 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                 />
 
                 {activeFilter.value === 'price' && (
-                  <Line type="monotone" dataKey="historicPrice" stroke="#1253FF" strokeWidth={2} dot={false} />
+                  <Line
+                    type="monotone"
+                    dataKey="historicPrice"
+                    stroke={theme.colors.textGold}
+                    strokeWidth={2}
+                    dot={false}
+                  />
                 )}
                 {activeFilter.value === 'price' && (
                   <Line
                     type="monotone"
                     dataKey="futurePrice"
-                    stroke="#c2d3ff"
+                    stroke={theme.colors.textGold}
                     strokeWidth={2}
                     dot={false}
                     strokeDasharray="6 6"
                   />
                 )}
 
                 {activeFilter.value === 'value' && (
-                  <Line type="monotone" dataKey="historicPV" stroke="#1253FF" strokeWidth={2} dot={false} />
+                  <Line
+                    type="monotone"
+                    dataKey="historicPV"
+                    stroke={theme.colors.textGold}
+                    strokeWidth={2}
+                    dot={false}
+                  />
                 )}
                 {activeFilter.value === 'value' && (
                   <Line
                     type="monotone"
                     dataKey="futurePV"
-                    stroke="#c2d3ff"
+                    stroke={theme.colors.textGold}
                     strokeWidth={2}
                     dot={false}
                     strokeDasharray="6 6"

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

@@ -270,7 +270,11 @@ function PoolPerformanceChart() {
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
                 yAxisId="right"
                 orientation="right"
-                domain={selectedTabIndex === 0 ? ['dataMin - 0.25', 'dataMax + 0.25'] : [0, 'dataMax + 0.25']}
+                domain={
+                  selectedTabIndex === 0
+                    ? ['auto', 'auto']
+                    : [(dataMin: number) => [Math.round(dataMin)], (dataMax: number) => [Math.round(dataMax)]]
+                }
               />
               <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
               <Tooltip
@@ -401,8 +405,6 @@ function CustomLegend({
   setRange: (value: { value: string; label: string }) => void
   selectedTabIndex: number
 }) {
-  const juniorAPY = data.juniorAPY ?? 0
-
   const Dot = ({ color }: { color: string }) => (
     <Box width="8px" height="8px" borderRadius="50%" backgroundColor={color} marginRight="4px" />
   )
@@ -438,7 +440,7 @@ function CustomLegend({
     {
       color: 'textGold',
       label: 'Junior APY',
-      value: formatPercentage(juniorAPY),
+      value: formatPercentage(data.juniorAPY ?? 0),
       show: !!data.juniorAPY,
     },
     {

centrifuge-app/src/components/IssuerSection.tsx

@@ -27,10 +27,29 @@ type IssuerSectionProps = {
   metadata: Partial<PoolMetadata> | undefined
 }
 
+const StyledBox = styled(Box)`
+  padding: 30px 20px;
+  &:hover {
+    background: ${SUBTLE_GRAY};
+    border-radius: 0px;
+  }
+`
+
+const HoverBox = styled(StyledBox)`
+  padding: 8px 22px;
+  border-radius: 4px;
+  background-color: ${SUBTLE_GRAY};
+  &:hover {
+    a {
+      color: ${({ theme }) => theme.colors.textGold};
+    }
+  }
+`
+
 const reportLinks = [
   { label: 'Balance sheet', href: '/balance-sheet', icon: <IconBalanceSheet color="white" /> },
   { label: 'Profit & loss', href: '/profit-and-loss', icon: <IconProfitAndLoss color="white" /> },
-  { label: 'Cashflow statement', href: '/cash-flow-statement', icon: <IconCashflow color="white" /> },
+  { label: 'Cash flow statement', href: '/cash-flow-statement', icon: <IconCashflow color="white" /> },
 ]
 
 const StyledRouterTextLink = styled(RouterTextLink)`
@@ -54,32 +73,29 @@ export function ReportDetails({ metadata }: IssuerSectionProps) {
         <Text color="white" variant="heading4">
           Reports
         </Text>
-        <Box backgroundColor={SUBTLE_GRAY} padding="8px 22px" borderRadius="4px">
+        <HoverBox backgroundColor={SUBTLE_GRAY}>
           <StyledRouterTextLink to={`${pathname}/reporting`}>View all</StyledRouterTextLink>
-        </Box>
+        </HoverBox>
       </Box>
 
-      <Box marginY={2} backgroundColor={SUBTLE_GRAY} padding={2} borderRadius={10}>
+      <Box marginY={2} backgroundColor={SUBTLE_GRAY} borderRadius={10}>
         {reportLinks.map((link, i) => (
-          <Box
-            borderBottom={i === reportLinks.length - 1 ? null : `2px solid ${SUBTLE_GRAY}`}
-            display="flex"
-            alignItems="center"
-            justifyContent="space-between"
-            paddingY={3}
-          >
-            <Box display="flex" alignItems="center">
-              {link.icon}
-              <StyledRouterTextLink
-                style={{ marginLeft: 8 }}
-                to={`${pathname}/reporting${link.href}`}
-                key={`${link.label}-${i}`}
-              >
-                {link.label}
-              </StyledRouterTextLink>
-            </Box>
-            <IconChevronRight color="white" />
-          </Box>
+          <StyledRouterTextLink to={`${pathname}/reporting${link.href}`} key={`${link.label}-${i}`}>
+            <StyledBox
+              borderBottom={i === reportLinks.length - 1 ? null : `2px solid ${SUBTLE_GRAY}`}
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Box display="flex" alignItems="center">
+                {link.icon}
+                <Text color="white" style={{ marginLeft: 4 }}>
+                  {link.label}
+                </Text>
+              </Box>
+              <IconChevronRight color="white" />
+            </StyledBox>
+          </StyledRouterTextLink>
         ))}
       </Box>
 
@@ -109,7 +125,7 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
       show: !!metadata?.pool?.issuer.email,
     },
     {
-      label: 'Executive Summary',
+      label: 'Executive summary',
       show: !!metadata?.pool?.links.executiveSummary,
       onClick: () => setIsDialogOpen(true),
     },

centrifuge-app/src/components/LoanLabel.tsx

@@ -28,7 +28,7 @@ export function getLoanLabelStatus(l: Loan | TinlakeLoan): [LabelStatus, string]
 
   if (l.status === 'Active' && l.pricing.maturityDate) {
     const isTinlakeLoan = 'riskGroup' in l
-    if (isTinlakeLoan) return ['info', 'Ongoing']
+    if (isTinlakeLoan) return ['warning', 'Ongoing']
 
     const days = daysBetween(today, l.pricing.maturityDate)
     if (days === 0) return ['warning', 'Due today']
@@ -37,7 +37,7 @@ export function getLoanLabelStatus(l: Loan | TinlakeLoan): [LabelStatus, string]
     if (days === -1) return ['critical', `Due ${Math.abs(days)} day ago`]
     if (days < -1) return ['critical', `Due ${Math.abs(days)} days ago`]
   }
-  return ['info', 'Ongoing']
+  return ['warning', 'Ongoing']
 }
 
 export function LoanLabel({ loan }: Props) {

centrifuge-app/src/components/Menu/GovernanceMenu.tsx

@@ -87,7 +87,7 @@ export function GovernanceMenu() {
         {isLarge ? (
           <Stack as="ul" gap={1}>
             {links.map(({ href, label }) => (
-              <Box as="li" pl={4} pr={1} key={href}>
+              <Box as="li" paddingX={4} key={href}>
                 <Link href={href} stacked={!isLarge}>
                   {label}
                 </Link>

centrifuge-app/src/components/Menu/index.tsx

@@ -130,7 +130,7 @@ export function Menu() {
 
 function CreatePool() {
   return (
-    <RouterLinkButton to="/issuer/create-pool" variant="secondary" small>
+    <RouterLinkButton to="/issuer/create-pool" small>
       Create pool
     </RouterLinkButton>
   )

centrifuge-app/src/components/PoolCard/index.tsx

@@ -83,37 +83,39 @@ export function PoolCard({
     </Text>
   )
 
-  const tranchesData = tranches?.map((tranche) => {
-    const words = tranche.currency.name.trim().split(' ')
-    const metadata = metaData?.tranches[tranche.id] ?? null
-    const trancheName = words[words.length - 1]
-    const investmentBalance = new CurrencyBalance(
-      metadata?.minInitialInvestment ?? 0,
-      tranche.currency.decimals
-    ).toDecimal()
+  const tranchesData = tranches
+    ?.map((tranche) => {
+      const words = tranche.currency.name.trim().split(' ')
+      const metadata = metaData?.tranches[tranche.id] ?? null
+      const trancheName = words[words.length - 1]
+      const investmentBalance = new CurrencyBalance(
+        metadata?.minInitialInvestment ?? 0,
+        tranche.currency.decimals
+      ).toDecimal()
 
-    const daysSinceCreation = createdAt ? daysBetween(createdAt, new Date()) : 0
+      const daysSinceCreation = createdAt ? daysBetween(createdAt, new Date()) : 0
 
-    function calculateApy() {
-      if (poolId === '4139607887') return formatPercentage(5, true, {}, 1)
-      if (poolId === '1655476167') return formatPercentage(15, true, {}, 1)
-      if (daysSinceCreation > 30 && tranche.yield30DaysAnnualized)
-        return formatPercentage(tranche.yield30DaysAnnualized, true, {}, 1)
-      if (tranche.interestRatePerSec) return formatPercentage(tranche.interestRatePerSec.toAprPercent(), true, {}, 1)
-      return '-'
-    }
+      function calculateApy() {
+        if (poolId === '4139607887') return formatPercentage(5, true, {}, 1)
+        if (poolId === '1655476167') return formatPercentage(15, true, {}, 1)
+        if (daysSinceCreation > 30 && tranche.yield30DaysAnnualized)
+          return formatPercentage(tranche.yield30DaysAnnualized, true, {}, 1)
+        if (tranche.interestRatePerSec) return formatPercentage(tranche.interestRatePerSec.toAprPercent(), true, {}, 1)
+        return '-'
+      }
 
-    return {
-      name: trancheName,
-      apr: calculateApy(),
-      minInvestment:
-        metadata && metadata.minInitialInvestment ? formatBalanceAbbreviated(investmentBalance, '', 0) : '-',
-    }
-  })
+      return {
+        name: trancheName,
+        apr: calculateApy(),
+        minInvestment:
+          metadata && metadata.minInitialInvestment ? `$${formatBalanceAbbreviated(investmentBalance, '', 0)}` : '-',
+      }
+    })
+    .reverse()
 
   return (
-    <StyledCard>
-      <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>
+    <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>
+      <StyledCard>
         <CardHeader marginBottom={12}>
           <Box>
             <PoolStatus status={status} />
@@ -146,7 +148,7 @@ export function PoolCard({
           {!isOneTranche && (
             <Stack>
               <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
-                Tranches
+                Tranche
               </Text>
               {tranchesData?.map((tranche) => renderText(tranche.name))}
               {tranches && tranches.length > 2 ? (
@@ -162,7 +164,7 @@ export function PoolCard({
           </Stack>
           <Stack>
             <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
-              Min Investment
+              Min. investment
             </Text>
             {tranchesData?.map((tranche) => renderText(`${tranche.minInvestment}`))}
           </Stack>
@@ -175,14 +177,14 @@ export function PoolCard({
           </Box>
         )}
         <Box display="flex" justifyContent="space-between">
-          <Text variant="body2">{assetClass && 'Asset Type'}</Text>
+          <Text variant="body2">{assetClass && 'Asset type'}</Text>
           <Text variant="body2">{assetClass ?? ''}</Text>
         </Box>
         <Box display="flex" justifyContent="space-between">
           <Text variant="body2">{metaData?.pool?.investorType && 'Investor Type'}</Text>
           <Text variant="body2"> {metaData?.pool?.investorType ?? ''}</Text>
         </Box>
-      </RouterTextLink>
-    </StyledCard>
+      </StyledCard>
+    </RouterTextLink>
   )
 }