♻ refactor transaction details modal into expanding panel

src/components/ContextualInfo/contextual-info.scss

-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .contextual-info {
   &__summary-wrapper {
-    background-color: $concrete-gray;
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
-    padding: 1rem;
-    color: #737373;
-    font-size: .75rem;
+    color: $dove-gray;
+    font-size: 0.75rem;
     text-align: center;
-    cursor: pointer;
+    margin-top: 1rem;
+    padding-top: 1rem;
   }
 
   &--error {
     color: $salmon-red;
   }
 
-  &__summary-modal {
-    background-color: $white;
-    position: relative;
-    bottom: 12rem;
-    min-height: 12rem;
-    max-height: 12rem;
-    z-index: 2000;
-    padding: 1rem;
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
-    transition: 250ms ease-in-out;
-
-    @media only screen and (min-width : 768px) {
-      max-width: 560px;
-      position: absolute;
-      margin-left: auto;
-      margin-right: auto;
+  &__details {
+    background-color: $concrete-gray;
+    padding: 1.5rem;
     border-radius: 1rem;
-      padding-bottom: 1rem;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      top: 0;
-      margin-top: 4rem;
+    font-size: 0.75rem;
+    margin-top: 1rem;
   }
 
-    .swap__open-details-container {
-      padding: 0.5rem 0;
-      margin-bottom: 1rem;
+  &__open-details-container {
     cursor: pointer;
-    }
-  }
 
-  &__open-details-container {
     @extend %row-nowrap;
     align-items: center;
-    justify-content: space-between;
-    font-size: .75rem;
+    justify-content: center;
+    font-size: 0.75rem;
     color: $royal-blue;
 
-    img {
-      height: .75rem;
-      width: .75rem;
-    }
+    span {
+      margin-right: 12px;
     }
 
-  &__modal-button {
-    padding: 0.5rem 0;
-    margin-bottom: 1rem;
+    img {
+      height: 0.75rem;
+      width: 0.75rem;
+    }
   }
 }

src/components/ContextualInfo/index.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import c from 'classnames';
-import { CSSTransitionGroup } from "react-transition-group";
 
-import Modal from '../Modal';
 import DropdownBlue from "../../assets/images/dropdown-blue.svg";
 import DropupBlue from "../../assets/images/dropup-blue.svg";
 import './contextual-info.scss';
 
 class ContextualInfo extends Component {
   static propTypes = {
-    openModalText: PropTypes.string,
+    openDetailsText: PropTypes.string,
     renderTransactionDetails: PropTypes.func,
     contextualInfo: PropTypes.string,
-    modalClass: PropTypes.string,
     isError: PropTypes.bool,
   };
 
   static defaultProps = {
-    openModalText: 'Transaction Details',
+    openDetailsText: 'Transaction Details',
+    closeDetailsText: 'Hide Details',
     renderTransactionDetails() {},
     contextualInfo: '',
-    modalClass: '',
     isError: false,
   };
 
   state = {
-    showDetailModal: false,
+    showDetails: false,
   };
 
-  renderModal() {
-    if (!this.state.showDetailModal) {
+  renderDetails() {
+    if (!this.state.showDetails) {
       return null;
     }
 
-    const { modalClass } = this.props;
-
     return (
-      <Modal key="modal" onClose={() => this.setState({ showDetailModal: false })}>
-        <CSSTransitionGroup
-          transitionName="summary-modal"
-          transitionAppear={true}
-          transitionLeave={true}
-          transitionAppearTimeout={200}
-          transitionLeaveTimeout={200}
-          transitionEnterTimeout={200}
-        >
-          <div className={c('contextual-info__summary-modal', modalClass)}>
-            <div
-              key="open-details"
-              className="contextual-info__open-details-container contextual-info__modal-button"
-              onClick={() => this.setState({showDetailModal: false})}
-            >
-              <span>Transaction Details</span>
-              <img src={DropupBlue} />
-            </div>
+      <div className="contextual-info__details">
         {this.props.renderTransactionDetails()}
       </div>
-        </CSSTransitionGroup>
-      </Modal>
-    );
+    )
   }
 
   render() {
     const {
-      openModalText,
+      openDetailsText,
+      closeDetailsText,
       contextualInfo,
       isError,
     } = this.props;
@@ -81,12 +58,23 @@ class ContextualInfo extends Component {
       <div
         key="open-details"
         className="contextual-info__summary-wrapper contextual-info__open-details-container"
-        onClick={() => this.setState({showDetailModal: true})}
+        onClick={() => this.setState((prevState) => {
+          return { showDetails: !prevState.showDetails }
+        })}
       >
-        <span>{openModalText}</span>
+        {!this.state.showDetails ? (
+          <>
+            <span>{openDetailsText}</span>
             <img src={DropdownBlue} />
+          </>
+        ) : (
+          <>
+            <span>{closeDetailsText}</span>
+            <img src={DropupBlue} />
+          </>
+        )}
       </div>,
-      this.renderModal()
+      this.renderDetails()
     ]
   }
 }

src/pages/Pool/AddLiquidity.js

@@ -559,6 +559,7 @@ class AddLiquidity extends Component {
         <OversizedPanel hideBottom>
           { this.renderInfo() }
         </OversizedPanel>
+        { this.renderSummary(inputError, outputError) }
         <div className="pool__cta-container">
           <button
             className={classnames('pool__cta-btn', {
@@ -571,8 +572,7 @@ class AddLiquidity extends Component {
             Add Liquidity
           </button>
         </div>
-      </div>,
-      this.renderSummary(inputError, outputError)
+      </div>
     ];
   }
 }

src/pages/Pool/CreateExchange.js

@@ -149,7 +149,7 @@ class CreateExchange extends Component {
     if (errorMessage) {
       return (
         <div className="create-exchange__summary-panel">
-          <div className="create-exchange__summary-text">{errorMessage}</div>
+          <div className="create-exchange__summary-text create-exchange--error">{errorMessage}</div>
         </div>
       )
     }
@@ -200,6 +200,7 @@ class CreateExchange extends Component {
             </div>
           </div>
         </OversizedPanel>
+        { this.renderSummary() }
         <div className="pool__cta-container">
           <button
             className={classnames('pool__cta-btn', {
@@ -211,7 +212,6 @@ class CreateExchange extends Component {
             Create Exchange
           </button>
         </div>
-        { this.renderSummary() }
       </div>
     );
   }

src/pages/Pool/RemoveLiquidity.js

@@ -377,6 +377,7 @@ class RemoveLiquidity extends Component {
           </div>
         </OversizedPanel>
         { this.renderOutput() }
+        { this.renderSummary(errorMessage) }
         <div className="pool__cta-container">
           <button
             className={classnames('pool__cta-btn', {
@@ -389,8 +390,7 @@ class RemoveLiquidity extends Component {
             Remove Liquidity
           </button>
         </div>
-      </div>,
-      this.renderSummary(errorMessage)
+      </div>
     ];
   }
 }

src/pages/Pool/pool.scss

@@ -113,9 +113,11 @@
     }
 
     &__item {
+      &:not(:last-child) {
         margin-bottom: .5rem;
       }
     }
+  }
 }
 
 .pool-modal {
@@ -173,20 +175,18 @@
 
 .create-exchange {
   &__summary-panel {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background-color: $concrete-gray;
-    width: 100%;
+    color: $dove-gray;
     text-align: center;
-    border-top-left-radius: .625rem;
-    border-top-right-radius: .625rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
   }
 
   &__summary-text {
-    padding: .75rem;
     font-size: .75rem;
-    color: $dove-gray;
+  }
+  
+  &--error {
+    color: $salmon-red;
   }
 }
 

src/pages/Send/index.js

@@ -770,6 +770,7 @@ class Send extends Component {
             onChange={address => this.setState({recipient: address})}
           />
           { this.renderExchangeRate() }
+          { this.renderSummary(inputError, outputError) }
           <div className="swap__cta-container">
             <button
               className={classnames('swap__cta-btn', {
@@ -782,7 +783,6 @@ class Send extends Component {
             </button>
           </div>
         </div>
-        { this.renderSummary(inputError, outputError) }
       </div>
     );
   }

src/pages/Swap/index.js

@@ -743,6 +743,7 @@ class Swap extends Component {
             disableUnlock
           />
           { this.renderExchangeRate() }
+          { this.renderSummary(inputError, outputError) }
           <div className="swap__cta-container">
             <button
               className={classnames('swap__cta-btn', {
@@ -755,7 +756,6 @@ class Swap extends Component {
             </button>
           </div>
         </div>
-        { this.renderSummary(inputError, outputError) }
       </div>
     );
   }

src/pages/Swap/swap.scss

@@ -54,7 +54,7 @@
 
   &__cta-container {
     display: flex;
-    margin-top: 1.5rem;
+    margin-top: 1rem;
   }
 
   &__cta-btn {