From 1aeea848b97e5faffd4dfc0adab43df1a0362951 Mon Sep 17 00:00:00 2001
From: Philip Welber <welber@blockchain.com>
Date: Mon, 18 Jun 2018 16:32:26 -0400
Subject: [PATCH] feat(Coinify): animate faq arrows

---
 .../src/components/BuySell/FAQ/index.js                   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/BuySell/FAQ/index.js b/packages/blockchain-wallet-v4-frontend/src/components/BuySell/FAQ/index.js
index 30bb81169c5..8f123f5d838 100644
--- a/packages/blockchain-wallet-v4-frontend/src/components/BuySell/FAQ/index.js
+++ b/packages/blockchain-wallet-v4-frontend/src/components/BuySell/FAQ/index.js
@@ -20,6 +20,12 @@ const Answer = styled.div`
   font-size: 12px;
   padding: 0px 10px;
 `
+const ToggleIcon = styled(Icon)`
+  cursor: pointer;
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+  transform: ${props => props.toggled && 'rotate(180deg)'};
+`
 
 export default class Helper extends React.PureComponent {
   constructor (props) {
@@ -32,7 +38,7 @@ export default class Helper extends React.PureComponent {
       <Container>
         <Question onClick={() => this.setState({ open: !this.state.open })}>
           { this.props.question }
-          { this.state.open ? <Icon name='up-arrow-filled' color='brand-secondary' /> : <Icon name='down-arrow-filled' /> }
+          <ToggleIcon name='up-arrow-filled' color='brand-secondary' toggled={this.state.open} />
         </Question>
         { this.state.open ? <Answer> { this.props.answer } </Answer> : null }
       </Container>