From 1f7b0df48b2d7685e485bddf0c1318733edad9c7 Mon Sep 17 00:00:00 2001
From: Rye Nguyen <ryenguyen7411@users.noreply.github.com>
Date: Mon, 20 Nov 2023 03:37:03 +0700
Subject: [PATCH] feat: dim text of expired nodes (#311)

---
 .../scenes/Main/Metanodes/MetanodeList/index.tsx    | 13 ++++++-------
 .../scenes/Main/Metanodes/MetanodeList/styled.tsx   |  4 ++++
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/modules/scenes/Main/Metanodes/MetanodeList/index.tsx b/src/modules/scenes/Main/Metanodes/MetanodeList/index.tsx
index c1a639f6..1698a3e4 100644
--- a/src/modules/scenes/Main/Metanodes/MetanodeList/index.tsx
+++ b/src/modules/scenes/Main/Metanodes/MetanodeList/index.tsx
@@ -128,7 +128,7 @@ export const MetanodeList = (props: Props) => {
                         <StatusIcon status={toggleStatusIconColor(node.status)} />
 
                         {isNoRequiredTooltip ? (
-                          <TextNodeStatus variant="label">
+                          <TextNodeStatus>
                             <FormattedMessage id={toggleStatusWord(node.status) as string} />
                           </TextNodeStatus>
                         ) : (
@@ -140,7 +140,7 @@ export const MetanodeList = (props: Props) => {
                             }
                             targetHtmlTag="span"
                           >
-                            <TextNodeStatus variant="label">
+                            <TextNodeStatus>
                               <FormattedMessage id={toggleStatusWord(node.status) as string} />
                             </TextNodeStatus>
                           </TooltipStatus>
@@ -153,13 +153,12 @@ export const MetanodeList = (props: Props) => {
                   <TextRoom>{node.version}</TextRoom>
                 </SizeL>
                 <div>
-                  <TextRoom>{bondAmount}</TextRoom>{' '}
-                  <TextRoom variant="label">({lockedPortion}%)</TextRoom>
+                  <TextRoom>{bondAmount}</TextRoom> <TextRoom>({lockedPortion}%)</TextRoom>
                 </div>
                 <ColumnExpiry>
                   <Column>
                     <TextNowrap>{expireTime}</TextNowrap>
-                    <TextNowrap variant="label">({getDiffDays(expireTimestamp)})</TextNowrap>
+                    <TextNowrap>({getDiffDays(expireTimestamp)})</TextNowrap>
                   </Column>
                 </ColumnExpiry>
                 <SizeL>
@@ -167,9 +166,9 @@ export const MetanodeList = (props: Props) => {
                     <RowAddress>
                       <CurrencyColumn>
                         <CurrencyBox>
-                          <TextRoom variant="label">{sbBTCRewardCurrency}</TextRoom>
+                          <TextRoom>{sbBTCRewardCurrency}</TextRoom>
                         </CurrencyBox>
-                        <TextRoom variant="label">:</TextRoom>
+                        <TextRoom>:</TextRoom>
                       </CurrencyColumn>
                       <ColumnAddress>
                         <AddressP>{ethAddress}</AddressP>
diff --git a/src/modules/scenes/Main/Metanodes/MetanodeList/styled.tsx b/src/modules/scenes/Main/Metanodes/MetanodeList/styled.tsx
index 0d9ec2a4..5092185a 100644
--- a/src/modules/scenes/Main/Metanodes/MetanodeList/styled.tsx
+++ b/src/modules/scenes/Main/Metanodes/MetanodeList/styled.tsx
@@ -77,6 +77,10 @@ export const Row = styled.div<BgProps>`
       : props.bg === MayChurnIn
       ? 'rgba(143, 231, 217, 0.2)'
       : !props.bg && props.theme.pulsar.color.bg.hover};
+  color: ${(props) =>
+    props.bg === InactiveBondExpired || props.bg === Unreachable
+      ? props.theme.pulsar.color.text.placeholder
+      : props.theme.pulsar.color.text.normal};
   display: grid;
   align-items: center;
   grid-template-columns: ${nodeListGridTemplateColumnsFrameMobile};