fix color of capacity change #180
Conversation
Keep the color of decimals consistent
Keith-CY
requested review from
zhangyouxin,
Daryl-L,
WhiteMinds,
FrederLu and
silySuper
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Keith-CY
changed the title
| @@ -21,6 +21,9 @@ export const TransactionCapacityValuePanel = styled.div<{ increased: boolean }>` | |||
| justify-content: flex-end; | |||
| color: ${props => (props.increased ? props.theme.primary : '#FF6347')}; | |||
| font-size: 16px; | |||
| .monospace { | |||
There was a problem hiding this comment.
This approach relies on the implementation details of the child component.
Consider alternative approaches that involve exposing interfaces for control from the child component to the parent component:
<DecimalCapacity lowlightDecimalPart={false} /> // lowlightDecimal default set to true<DecimalCapacity decimalPartClass={...} />
There was a problem hiding this comment.
I prefer not to add more options because it makes code hard to maintain. What if using * selector to color all elements in the field
There was a problem hiding this comment.
I will refactor the component to accept style type
There was a problem hiding this comment.
I prefer not to add more options because it makes code hard to maintain. What if using
*selector to color all elements in the field
I believe that implicit coupling is the key issue that increases the difficulty of maintainability. This incurs higher maintenance costs compared to adding a clearly defined and easily understandable interface.
The parent component should not rely on the implementation details of the child component. The more code like this exists in the project, the greater the cognitive burden when modifying certain shared components. It becomes more daunting to make changes because it's uncertain if it will cause issues with implicit dependencies on either side.
A more likely scenario is not being aware of the existence of implicit dependencies because there are no explicit dependencies to reference. This can lead to changes being made without realizing the impact on other parts of the code until later when issues arise.
Explicit dependencies, such as imports/exports, component interfaces exposed through props, or interfaces exposed through Context, allow us to immediately know which areas will be affected when modifying related code.
This can significantly reduce the probability of bugs, decrease the fear of modifying existing code for future maintainers, improve their maintenance speed, and enhance code readability.
There was a problem hiding this comment.
The Capacity component is refactored by #181
There was a problem hiding this comment.
It seems that the current PR #180 is no longer needed?
Keep the color of decimals consistent
Before:
After:
