diff --git a/web/cashtab/src/components/Common/StyledCollapse.js b/web/cashtab/src/components/Common/StyledCollapse.js --- a/web/cashtab/src/components/Common/StyledCollapse.js +++ b/web/cashtab/src/components/Common/StyledCollapse.js @@ -144,7 +144,7 @@ CustomCollapseCtn.propTypes = { optionalDefaultActiveKey: PropTypes.arrayOf(PropTypes.string), - panelHeader: PropTypes.string, + panelHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), children: PropTypes.node, optionalKey: PropTypes.string, }; diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js --- a/web/cashtab/src/components/Send/Send.js +++ b/web/cashtab/src/components/Send/Send.js @@ -84,14 +84,26 @@ const DestinationAddressMultiCtn = styled.div``; const ExpandingAddressInputCtn = styled.div` - min-height: 14rem; + min-height: 15rem; ${DestinationAddressSingleCtn} { overflow: hidden; - max-height: ${props => (props.open ? '0rem' : '17rem')}; + transition: ${props => + props.open + ? 'max-height 200ms ease-in, opacity 200ms ease-out' + : 'max-height 200ms cubic-bezier(0, 1, 0, 1), opacity 200ms ease-in'}; + max-height: ${props => (props.open ? '0rem' : '14rem')}; + opacity: ${props => (props.open ? 0 : 1)}; } ${DestinationAddressMultiCtn} { overflow: hidden; - max-height: ${props => (props.open ? '17rem' : '0rem')}; + transition: ${props => + props.open + ? 'max-height 200ms ease-in, transform 200ms ease-out, opacity 200ms ease-in' + : 'max-height 200ms cubic-bezier(0, 1, 0, 1), transform 200ms ease-out'}; + max-height: ${props => (props.open ? '14rem' : '0rem')}; + transform: ${props => + props.open ? 'translateY(0%)' : 'translateY(100%)'}; + opacity: ${props => (props.open ? 1 : 0)}; } `; diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap --- a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap +++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap @@ -119,7 +119,7 @@