Swap Bity Promo w/ Shapeshift, Adjust Promo Display (#1115)

common/components/BalanceSidebar/PromoComponents/Bity.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import BityLogo from 'assets/images/logo-bity-white.svg';
-
-export const Bity: React.SFC = () => (
-  <Link className="Promos-promo Promos-Bity" target="_blank" rel="noopener noreferrer" to="/swap">
-    <div className="Promos-promo-inner">
-      <div className="Promos-promo-text">
-        <p>It’s now easier to get more ETH</p>
-        <h5>Swap BTC &lt;-&gt; ETH</h5>
-      </div>
-      <div className="Promos-promo-images">
-        <img src={BityLogo} />
-      </div>
-    </div>
-  </Link>
-);

common/components/BalanceSidebar/PromoComponents/Coinbase.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import CoinbaseLogo from 'assets/images/logo-coinbase.svg';
+import { NewTabLink } from 'components/ui';
 
 export const Coinbase: React.SFC = () => (
-  <a
-    className="Promos-promo Promos-Coinbase"
-    target="_blank"
-    rel="noopener noreferrer"
+  <NewTabLink
+    className="Promos-promo Promos--coinbase"
     href="https://buy.coinbase.com?code=60c05061-3a76-57be-b1cd-a7afa97bcb8c&address=0xA7DeFf12461661212734dB35AdE9aE7d987D648c&crypto_currency=ETH&currency=USD"
   >
     <div className="Promos-promo-inner">
@@ -17,5 +16,5 @@ export const Coinbase: React.SFC = () => (
         <img src={CoinbaseLogo} />
       </div>
     </div>
-  </a>
+  </NewTabLink>
 );

common/components/BalanceSidebar/PromoComponents/HardwareWallets.tsx

@@ -5,10 +5,7 @@ import ledgerLogo from 'assets/images/logo-ledger.svg';
 import trezorLogo from 'assets/images/logo-trezor.svg';
 
 export const HardwareWallets: React.SFC = () => (
-  <HelpLink
-    className="Promos-promo Promos-HardwareWallets"
-    article={HELP_ARTICLE.PROTECT_YOUR_FUNDS}
-  >
+  <HelpLink className="Promos-promo Promos--hardware" article={HELP_ARTICLE.PROTECT_YOUR_FUNDS}>
     <div className="Promos-promo-inner">
       <div className="Promos-promo-text">
         <h6>Learn more about protecting your funds.</h6>

common/components/BalanceSidebar/PromoComponents/Shapeshift.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ShapeshiftLogo from 'assets/images/logo-shapeshift.svg';
+
+export const Shapeshift: React.SFC = () => (
+  <Link className="Promos-promo Promos--shapeshift" to="/swap">
+    <div className="Promos-promo-inner">
+      <div className="Promos-promo-text">
+        <h5>
+          Exchange Coins
+          <br />
+          & Tokens with
+        </h5>
+      </div>
+      <div className="Promos-promo-images">
+        <img src={ShapeshiftLogo} />
+      </div>
+    </div>
+  </Link>
+);

common/components/BalanceSidebar/PromoComponents/index.ts

@@ -1,3 +1,3 @@
 export * from './HardwareWallets';
 export * from './Coinbase';
-export * from './Bity';
+export * from './Shapeshift';

common/components/BalanceSidebar/Promos.scss

@@ -9,18 +9,6 @@
     overflow: hidden;
   }
 
-  &-Bity {
-    background-color: #006e79;
-  }
-
-  &-Coinbase {
-    background-color: #2b71b1;
-  }
-
-  &-HardwareWallets {
-    background-color: #6e9a3e;
-  }
-
   &-promo {
     position: relative;
     height: inherit;
@@ -42,19 +30,18 @@
       position: absolute;
       display: flex;
       align-items: center;
+      justify-content: center;
       top: 50%;
       left: 0;
       width: 100%;
       transform: translateY(-50%);
-    }
-
-    &-text,
-    &-images {
-      padding: 0 $space-sm;
+      padding: 0 $space;
     }
 
     &-text {
-      flex: 1;
+      flex: 5;
+      padding-right: $space-xs;
+      max-width: 220px;
 
       p,
       h4,
@@ -73,15 +60,15 @@
     }
 
     &-images {
-      padding: 0 $space * 1.5;
+      flex: 3;
+      max-width: 108px;
+      padding-left: $space-xs;
 
       img {
         display: block;
         margin: 0 auto;
         width: 100%;
-        max-width: 96px;
         height: auto;
-        padding: $space-xs;
       }
     }
   }
@@ -106,6 +93,23 @@
       }
     }
   }
+
+  // Per-promo customizations
+  &--shapeshift {
+    background-color: #263A52;
+
+    .Promos-promo-images {
+      max-width: 130px;
+    }
+  }
+
+  &--coinbase {
+    background-color: #2b71b1;
+  }
+
+  &--hardware {
+    background-color: #6e9a3e;
+  }
 }
 
 .carousel-exit {

common/components/BalanceSidebar/Promos.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import { HardwareWallets, Coinbase, Bity } from './PromoComponents';
+import { HardwareWallets, Coinbase, Shapeshift } from './PromoComponents';
 import './Promos.scss';
 
-const promos = [HardwareWallets, Coinbase, Bity];
+const promos = [HardwareWallets, Coinbase, Shapeshift];
 
 const CarouselAnimation = ({ children, ...props }) => (
   <CSSTransition {...props} timeout={300} classNames="carousel">
@@ -36,11 +36,7 @@ export default class Promos extends React.PureComponent<{}, State> {
     return (
       <div className="Promos">
         <TransitionGroup className="Promos-promo-wrapper">
-          {promos
-            .filter(i => {
-              return i === promos[activePromo];
-            })
-            .map(promo => <CarouselAnimation key={Math.random()}>{promo}</CarouselAnimation>)}
+          <CarouselAnimation key={Math.random()}>{promos[activePromo]}</CarouselAnimation>
         </TransitionGroup>
         <div className="Promos-nav">
           {promos.map((_, index) => {