tidy up, additional ani wrap

src/pages/App.js

@@ -46,7 +46,7 @@ class App extends Component {
         <Web3Connect />
         <BrowserRouter>
           <Switch>
-            <div className="app__switch-wrapper">
+            <div className="app__wrapper">
               <Route exact path="/swap" component={Swap} />
               <Route exact path="/send" component={Send} />
               <Route exact path="/add-liquidity" component={Pool} />

src/pages/App.scss

 @import "../variables.scss";
 
 .app {
-  &__switch-wrapper {
+  &__wrapper {
     height: 100%;
     position: relative;
 

src/pages/Pool/CreateExchange.js

@@ -181,36 +181,39 @@ class CreateExchange extends Component {
             'header--inactive': !isConnected,
           })}
         />
-        <ModeSelector title="Create Exchange" />
-        <AddressInputPanel
-          title="Token Address"
-          value={tokenAddress}
-          onChange={this.onChange}
-          errorMessage={errorMessage}
-        />
-        <OversizedPanel hideBottom>
-          <div className="pool__summary-panel">
-            <div className="pool__exchange-rate-wrapper">
-              <span className="pool__exchange-rate">Label</span>
-              <span>{label || ' - '}</span>
-            </div>
-            <div className="pool__exchange-rate-wrapper">
-              <span className="swap__exchange-rate">Decimals</span>
-              <span>{decimals || ' - '}</span>
+
+        <div className='ani_title_fade_in'>
+          <ModeSelector title="Create Exchange" />
+          <AddressInputPanel
+            title="Token Address"
+            value={tokenAddress}
+            onChange={this.onChange}
+            errorMessage={errorMessage}
+          />
+          <OversizedPanel hideBottom>
+            <div className="pool__summary-panel">
+              <div className="pool__exchange-rate-wrapper">
+                <span className="pool__exchange-rate">Label</span>
+                <span>{label || ' - '}</span>
+              </div>
+              <div className="pool__exchange-rate-wrapper">
+                <span className="swap__exchange-rate">Decimals</span>
+                <span>{decimals || ' - '}</span>
+              </div>
             </div>
+          </OversizedPanel>
+          { this.renderSummary() }
+          <div className="pool__cta-container">
+            <button
+              className={classnames('pool__cta-btn', {
+                'swap--inactive': !isConnected,
+              })}
+              disabled={!isValid}
+              onClick={this.onCreateExchange}
+            >
+              Create Exchange
+            </button>
           </div>
-        </OversizedPanel>
-        { this.renderSummary() }
-        <div className="pool__cta-container">
-          <button
-            className={classnames('pool__cta-btn', {
-              'swap--inactive': !isConnected,
-            })}
-            disabled={!isValid}
-            onClick={this.onCreateExchange}
-          >
-            Create Exchange
-          </button>
         </div>
       </div>
     );

src/pages/Pool/RemoveLiquidity.js

@@ -359,35 +359,39 @@ class RemoveLiquidity extends Component {
             'header--inactive': !isConnected,
           })}
         />
-        <ModeSelector title="Remove Liquidity" />
-        <CurrencyInputPanel
-          title="Pool Tokens"
-          extraText={this.getBalance(tokenAddress)}
-          onValueChange={this.onInputChange}
-          value={value}
-          errorMessage={errorMessage}
-          selectedTokenAddress={tokenAddress}
-          onCurrencySelected={this.onTokenSelect}
-          filteredTokens={['ETH']}
-        />
-        <OversizedPanel>
-          <div className="swap__down-arrow-background">
-            <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
+
+        <div className='ani_title_fade_in'>
+
+          <ModeSelector title="Remove Liquidity" />
+          <CurrencyInputPanel
+            title="Pool Tokens"
+            extraText={this.getBalance(tokenAddress)}
+            onValueChange={this.onInputChange}
+            value={value}
+            errorMessage={errorMessage}
+            selectedTokenAddress={tokenAddress}
+            onCurrencySelected={this.onTokenSelect}
+            filteredTokens={['ETH']}
+          />
+          <OversizedPanel>
+            <div className="swap__down-arrow-background">
+              <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
+            </div>
+          </OversizedPanel>
+          { this.renderOutput() }
+          { this.renderSummary(errorMessage) }
+          <div className="pool__cta-container">
+            <button
+              className={classnames('pool__cta-btn', {
+                'swap--inactive': !isConnected,
+                'pool__cta-btn--inactive': !isValid,
+              })}
+              disabled={!isValid}
+              onClick={this.onRemoveLiquidity}
+            >
+              Remove Liquidity
+            </button>
           </div>
-        </OversizedPanel>
-        { this.renderOutput() }
-        { this.renderSummary(errorMessage) }
-        <div className="pool__cta-container">
-          <button
-            className={classnames('pool__cta-btn', {
-              'swap--inactive': !isConnected,
-              'pool__cta-btn--inactive': !isValid,
-            })}
-            disabled={!isValid}
-            onClick={this.onRemoveLiquidity}
-          >
-            Remove Liquidity
-          </button>
         </div>
       </div>
     ];