fix: use transient prop for styled components (#2081)

polkadot-cloud · Apr 12, 2024 · f2a0d73 · f2a0d73
1 parent 7f3d3a6
commit f2a0d73
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/pages/Overview/StakeStatus/Wrappers.ts b/src/pages/Overview/StakeStatus/Wrappers.ts
@@ -4,7 +4,7 @@
 import styled from 'styled-components';
 import { PageWidthMediumThreshold } from 'consts';
 
-export const StatusWrapper = styled.div<{ borderBottom: boolean }>`
+export const StatusWrapper = styled.div<{ $borderBottom: boolean }>`
   display: flex;
   flex-wrap: wrap;
   padding: 1.5rem 1.5rem 0 1.5rem;
@@ -31,7 +31,7 @@ export const StatusWrapper = styled.div<{ borderBottom: boolean }>`
 
     > section {
       border-bottom: ${(props) =>
-        props.borderBottom ? '1px solid var(--border-primary-color)' : 'none'};
+        props.$borderBottom ? '1px solid var(--border-primary-color)' : 'none'};
       padding-bottom: 0.75rem;
       @media (max-width: ${PageWidthMediumThreshold}px) {
         padding-bottom: 0.5rem;

diff --git a/src/pages/Overview/StakeStatus/index.tsx b/src/pages/Overview/StakeStatus/index.tsx
@@ -15,7 +15,7 @@ export const StakeStatus = () => {
 
   return (
     <CardWrapper style={{ padding: 0 }}>
-      <StatusWrapper borderBottom={showTips}>
+      <StatusWrapper $borderBottom={showTips}>
         <RowSection secondary>
           <section>
             <NominationStatus showButtons={false} />