feat: dim text of expired nodes

SwingbyProtocol · Nov 14, 2023 · e2e77bf · e2e77bf
1 parent fa6114d
commit e2e77bf
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/modules/scenes/Main/Metanodes/MetanodeList/index.tsx b/src/modules/scenes/Main/Metanodes/MetanodeList/index.tsx
@@ -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>

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};