feat: dim text of expired nodes (#311)

SwingbyProtocol · Nov 19, 2023 · 1f7b0df · 1f7b0df · vercel · Nov 19, 2023
1 parent fa6114d
commit 1f7b0df
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git 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,23 +153,22 @@ 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>
                   <BoxAddress>
                     <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
@@ -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};