Improve the upgrade modal #737
Conversation
bpierre
commented
Apr 19, 2019
bpierre
commented
- Add a transition on the upgrade banner.
- Add transitions between the highlight screens.
- useSteps(): add the direction.
- Add a transition on the upgrade banner. - Add transitions between the highlight screens. - useSteps(): add the direction.
Also, don’t animate the content when the modal opens.
| const TRANSLATE_VALUE_HEADING = 40 | ||
| const TRANSLATE_VALUE_CONTENT = 60 | ||
|
|
||
| // Helping the styled-components `css` preprocessor |
There was a problem hiding this comment.
Does this help at animate time? Should we do this everywhere (if using css within a react-spring)?
There was a problem hiding this comment.
It’s only for the css preprocessor: because animated.xyz components are not capitalized, it thinks they are HTML tags and transform them into into styled("animated.xyz") instead of styled(animated.xyz)… it’s probably pretty easy to fix, I don’t think there is any valid reason to do that.
So ideally it should be fixed in styled-components, but in the meantime, maybe we can keep doing this? We could also use a shared file to re-export all the animated.xyz into AnimXyz, I don’t really mind either way.
| @@ -193,7 +200,7 @@ HighlightScreen.propTypes = { | |||
| enterProgress: PropTypes.object, | |||
| onUpgrade: PropTypes.func.isRequired, | |||
| showProgress: PropTypes.object, | |||
| status: PropTypes.oneOf(['entering', 'leaving']), | |||
| state: PropTypes.string, | |||
There was a problem hiding this comment.
Should we leave this as a oneOf?
There was a problem hiding this comment.
I decided not to so we don’t have to keep it in sync with react-spring (since it’s directly coming from it now). Do you think we should list the react-spring states here?
There was a problem hiding this comment.
I think we might as well, just in case it accidentally moves underneath us without us noticing :).
