From 14ded4b8ae3667c61f7d0fcd2912ee63ad9bf4c8 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Tue, 5 Nov 2024 15:23:10 +0100
Subject: [PATCH] Add underline

---
 centrifuge-app/src/components/Tooltips.tsx    | 26 +++----------------
 .../src/pages/Pool/Assets/OffchainMenu.tsx    |  4 +++
 .../src/pages/Pool/Assets/index.tsx           |  7 +++--
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx
index 56fc99eff3..854d2b19c1 100644
--- a/centrifuge-app/src/components/Tooltips.tsx
+++ b/centrifuge-app/src/components/Tooltips.tsx
@@ -1,18 +1,8 @@
 import { Tooltip as FabricTooltip, Text, TextProps } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useParams } from 'react-router'
-import styled from 'styled-components'
 import { usePool } from '../utils/usePools'
 
-const StyledText = styled(Text)<{ hoverable?: boolean }>`
-  ${({ hoverable }) =>
-    hoverable &&
-    `
-    &:hover {
-     text-decoration: underline
-    }
-  `}
-`
 function ValueLockedTooltipBody({ poolId }: { poolId?: string }) {
   const { pid: poolIdParam } = useParams<{ pid: string }>()
   const pool = usePool(poolId || poolIdParam || '', false)
@@ -364,31 +354,21 @@ export type TooltipsProps = {
   props?: any
   size?: 'med' | 'sm' | 'xs'
   color?: string
-  hoverable?: boolean
 } & Partial<Pick<TextProps, 'style' | 'body'>>
 
-export function Tooltips({
-  type,
-  label: labelOverride,
-  size = 'sm',
-  props,
-  color,
-  hoverable = false,
-  ...textProps
-}: TooltipsProps) {
+export function Tooltips({ type, label: labelOverride, size = 'sm', props, color, ...textProps }: TooltipsProps) {
   const { label, body } = type ? tooltipText[type] : { label: labelOverride, body: textProps.body }
   return (
     <FabricTooltip body={React.isValidElement(body) ? React.cloneElement(body, props) : body} {...textProps}>
       {typeof label === 'string' ? (
-        <StyledText
+        <Text
           textAlign="left"
           variant={size === 'sm' ? 'label2' : size === 'xs' ? 'body4' : 'label1'}
           color={size === 'sm' && !color ? 'textPrimary' : 'textSecondary'}
           fontWeight={size === 'sm' ? 'inherit' : 400}
-          hoverable={hoverable}
         >
           {labelOverride || label}
-        </StyledText>
+        </Text>
       ) : (
         label
       )}
diff --git a/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx b/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx
index 8703fb9aa7..9b4d574087 100644
--- a/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx
+++ b/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx
@@ -33,6 +33,10 @@ const StyledButton = styled(Box)`
   display: flex;
   align-items: center;
   font-family: Inter, sans-serif;
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
 `
 
 const LoanOption = ({ loan }: LoanOptionProps) => {
diff --git a/centrifuge-app/src/pages/Pool/Assets/index.tsx b/centrifuge-app/src/pages/Pool/Assets/index.tsx
index e212d2cd35..41c735f452 100644
--- a/centrifuge-app/src/pages/Pool/Assets/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Assets/index.tsx
@@ -22,6 +22,9 @@ const StyledRouterTextLink = styled(RouterTextLink)`
   text-decoration: unset;
   display: flex;
   align-items: center;
+  &:hover {
+    text-decoration: underline;
+  }
 `
 
 export function PoolDetailAssetsTab() {
@@ -92,7 +95,7 @@ export function PoolDetailAssets() {
       heading: true,
     },
     {
-      label: <Tooltips hoverable label={`Onchain reserve (${pool.currency.symbol})`} type="onchainReserve" />,
+      label: <Tooltips label={`Onchain reserve (${pool.currency.symbol})`} type="onchainReserve" />,
       value: (
         <StyledRouterTextLink to={`${basePath}/${pool.id}/assets/0`}>
           <Text>{formatBalance(pool.reserve.total || 0)}</Text>
@@ -104,7 +107,7 @@ export function PoolDetailAssets() {
     ...(!isTinlakePool && cashLoans.length
       ? [
           {
-            label: <Tooltips hoverable label="Offchain cash (USD" type="offchainCash" />,
+            label: <Tooltips label="Offchain cash (USD" type="offchainCash" />,
             value: <OffchainMenu value={formatBalance(offchainReserve)} loans={cashLoans} />,
             heading: false,
           },