From eea6839063333f336acb1493ece8d66a397d8995 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:12:27 +0200
Subject: [PATCH] Small fixes (#2500)

* Fix button border

* Add black border back to pool card

* Fix short description spacing to fit elements

* Fixes to issuer section
---
 .../src/components/IssuerSection.tsx          | 29 +++++++++++++----
 .../src/components/PoolCard/index.tsx         | 32 +++++++++----------
 .../src/pages/Pool/Overview/index.tsx         |  2 +-
 fabric/src/components/Button/WalletButton.tsx | 13 ++------
 4 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
index d18150fc25..3342c66756 100644
--- a/centrifuge-app/src/components/IssuerSection.tsx
+++ b/centrifuge-app/src/components/IssuerSection.tsx
@@ -19,7 +19,7 @@ import { formatPercentage } from '../utils/formatting'
 import { ExecutiveSummaryDialog } from './Dialogs/ExecutiveSummaryDialog'
 import { LabelValueStack } from './LabelValueStack'
 import { AnchorPillButton, PillButton } from './PillButton'
-import { RouterTextLink } from './TextLink'
+import { AnchorTextLink, RouterTextLink } from './TextLink'
 
 const SUBTLE_GRAY = '#91969b21'
 
@@ -58,6 +58,21 @@ const StyledRouterTextLink = styled(RouterTextLink)`
   }
 `
 
+const StyledAnchorTextLink = styled(AnchorTextLink)`
+  color: white;
+  font-size: 14px;
+  text-decoration: unset;
+  :active {
+    color: white;
+  }
+  :visited {
+    color: white;
+  }
+  :hover {
+    text-decoration: underline;
+  }
+`
+
 export function ReportDetails({ metadata }: IssuerSectionProps) {
   const pathname = useLocation().pathname
   const report = metadata?.pool?.reports?.[0]
@@ -160,14 +175,14 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
         <Links links={links} />
       </Shelf>
       <Box pt={4} display="flex" justifyContent="space-between">
-        <Box>
+        <Box width={metadata?.pool?.issuer?.categories?.length ? '50%' : '100%'} marginRight={3}>
           <Text variant="heading2">{metadata?.pool?.issuer.name}</Text>
-          <Text variant="body2" style={{ marginTop: '12px' }}>
+          <Text variant="body2" style={{ marginTop: '12px', lineHeight: '22px', letterSpacing: '-0.14px' }}>
             {metadata?.pool?.issuer.description}
           </Text>
         </Box>
         {metadata?.pool?.issuer?.categories?.length ? (
-          <Box width="50%" bg="white" padding="8px" borderRadius={10} ml={1}>
+          <Box width="50%" bg="white" padding={2} borderRadius={10} ml={1} height="min-content">
             {metadata?.pool?.issuer?.categories.map((category) => (
               <Box display="flex" justifyContent="space-between" padding={1}>
                 <Text color="textSecondary" variant="body2" style={{ minWidth: 120, textTransform: 'capitalize' }}>
@@ -270,12 +285,14 @@ export const PoolAnalysis = ({ metadata, inverted }: IssuerSectionProps & { inve
   const report = metadata?.pool?.reports?.[0]
   // Not sure why some pools have N/A, it should be empty but this is a fix for those pools in the meantime
   const isEmpty = report?.author.name === 'N/A'
+
+  console.log(report)
   return report?.author?.name || report?.author?.title ? (
     isEmpty ? null : (
       <Stack gap={1}>
-        <Text color={inverted ? 'textPrimary' : 'white'} variant={inverted ? 'heading2' : 'heading4'}>
+        <StyledAnchorTextLink color={inverted ? 'textPrimary' : 'white'} href={report.uri}>
           Pool analysis
-        </Text>
+        </StyledAnchorTextLink>
         <Stack gap={0}>
           <Text variant="body3" color="textSecondary">
             Reviewer: {report?.author?.name || 'N/A'}
diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
index f861de872f..a45f0d3b66 100644
--- a/centrifuge-app/src/components/PoolCard/index.tsx
+++ b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -35,14 +35,15 @@ const StyledRouterTextLink = styled(RouterTextLink)`
 const StyledCard = styled(Card)`
   width: 100%;
   max-width: 100%;
-  height: 320px;
+  height: 300px;
 
   margin-right: 12px;
   margin-bottom: 12px;
   padding: 12px;
+  border: 1px solid rgba(207, 207, 207, 0.5);
 
   &:hover {
-    border: 1px solid ${({ theme }) => theme.colors.backgroundTertiary};
+    border: 1px solid ${({ theme }) => theme.colors.textPrimary};
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
 
@@ -262,24 +263,21 @@ export function PoolCard({
             {tranchesData?.map((tranche) => renderText(`${tranche.minInvestment}`))}
           </Stack>
         </Box>
-        {metaData?.pool?.issuer?.shortDescription ||
-          (isTinlakePool && (
-            <Box marginY={12}>
-              <Text as="p" variant="body2" color="textButtonPrimaryDisabled">
-                {isTinlakePool
-                  ? tinlakeTranches[tinlakeKey].shortDescription
-                  : metaData?.pool?.issuer?.shortDescription}
-              </Text>
-            </Box>
-          ))}
+        {(metaData?.pool?.issuer?.shortDescription || isTinlakePool) && (
+          <Box marginY={12}>
+            <Text as="p" variant="body3" color="textButtonPrimaryDisabled">
+              {isTinlakePool ? tinlakeTranches[tinlakeKey].shortDescription : metaData?.pool?.issuer?.shortDescription}
+            </Text>
+          </Box>
+        )}
+
         <Box display="flex" justifyContent="space-between" mt={1}>
-          <Text variant="body2">Asset type</Text>
-          <Text variant="body2">{assetClass ?? '-'}</Text>
+          <Text variant="body3">Asset type</Text>
+          <Text variant="body3">{assetClass ?? '-'}</Text>
         </Box>
         <Box display="flex" justifyContent="space-between">
-          <Text variant="body2">Investor type</Text>
-          <Text variant="body2">
-            {' '}
+          <Text variant="body3">Investor type</Text>
+          <Text variant="body3">
             {isTinlakePool ? tinlakeTranches[tinlakeKey].investorType : metaData?.pool?.investorType ?? '-'}
           </Text>
         </Box>
diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
index 49b124d109..1b9e43283d 100644
--- a/centrifuge-app/src/pages/Pool/Overview/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -124,7 +124,7 @@ export function PoolDetailOverview() {
         )}
         <React.Suspense fallback={<Spinner />}>
           <Grid
-            gridTemplateColumns="1fr 0.5fr"
+            gridTemplateColumns={metadata?.pool?.reports?.length || !isTinlakePool ? '1fr 0.5fr' : '1fr'}
             gap={2}
             marginY={3}
             borderBottom={`1px solid ${theme.colors.borderPrimary}`}
diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
index 0488669e84..a09a120c0c 100644
--- a/fabric/src/components/Button/WalletButton.tsx
+++ b/fabric/src/components/Button/WalletButton.tsx
@@ -24,20 +24,13 @@ const StyledButton = styled.button`
   display: inline-block;
   width: 100%;
   padding: 0;
-  border-width: 3;
-  border-color: transparent;
+  border: none;
   appearance: none;
   background-color: ${({ theme }) => theme.colors.backgroundPrimary};
   outline: 0;
-  border-radius: 40px;
+  border-radius: 4px;
   white-space: nowrap;
-  & > span {
-    border-width: 3;
-    border-color: ${({ theme }) => theme.colors.backgroundPrimary};
-    :hover {
-      border: ${({ theme }) => `3px solid ${theme.colors.borderSecondary}`};
-    }
-  }
+  border: 3px solid transparent;
 `
 
 const IdenticonWrapper = styled(Flex)({