Merge pull request #1558 from Vizzuality/fix/trase.finance-banner

add new finance banner
Vizzuality · Oct 6, 2020 · 6279f6b · 6279f6b
2 parents 4fb2d76 + 17f0c7b
commit 6279f6b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/frontend/public/images/banner/trase_finance_banner.gif b/frontend/public/images/banner/trase_finance_banner.gif
diff --git a/frontend/scripts/constants.js b/frontend/scripts/constants.js
@@ -53,7 +53,8 @@ export const COLORS = {
   charcoalGrey: '#34444C',
   charcoalGreyTonedDown: '#536269',
   charcoalGreyFadedALot: '#D6DADB',
-  manilla: '#FFEB8B'
+  manilla: '#FFEB8B',
+  strongPink: '#f65e6e'
 };
 
 export const CHOROPLETH_CLASS_ZERO = '#FFFFFF';

diff --git a/frontend/scripts/react-components/home/banner/banner-styles.scss b/frontend/scripts/react-components/home/banner/banner-styles.scss
@@ -33,22 +33,23 @@
 }
 
 .banner-content {
-  display: block;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+  height: 100%;
   padding: 25px 75px 20px 20px;
 
   .banner-title {
     font-family: $font-family-2;
     font-size: $font-size-big;
     letter-spacing: -0.5px;
-    line-height: 1.2;
+    line-height: 1.3;
     font-weight: $font-weight-bold;
-    color: $white;
   }
 
   .banner-link {
     font-family: $font-family-1;
     font-size: $font-size-regular;
-    color: $white !important;
     text-transform: uppercase;
     font-weight: $font-weight-bold;
     margin-top: 40px;

diff --git a/frontend/scripts/react-components/home/banner/banner.component.jsx b/frontend/scripts/react-components/home/banner/banner.component.jsx
@@ -1,13 +1,25 @@
 import React, { useState, useEffect, Fragment } from 'react';
 import { useTransition, animated, config } from 'react-spring';
-
+import { COLORS } from 'constants';
 import './banner-styles.scss';
 
 const slides = [
   {
     id: 0,
-    text: 'Trase is featured in the BBC documentary \'Extinction: The Facts\'',
-    link: 'https://medium.com/trase/extinction-the-facts-trase-featured-in-new-bbc-documentary-788073206fa9',
+    text: 'Trace finance is now live',
+    link: 'https://trase.finance/',
+    textColor: COLORS.charcoalGrey,
+    textWidth: '70%',
+    linkColor: COLORS.strongPink,
+    imageName: 'trase_finance_banner.gif'
+  },
+  {
+    id: 1,
+    text: "Trase is featured in the BBC documentary 'Extinction: The Facts'",
+    link:
+      'https://medium.com/trase/extinction-the-facts-trase-featured-in-new-bbc-documentary-788073206fa9',
+    textColor: COLORS.white,
+    linkColor: COLORS.white,
     imageName: 'banner2x_bbc.png'
   }
 ];
@@ -51,8 +63,17 @@ function Banner() {
               rel="noopener noreferrer"
               className="banner-content"
             >
-              <div className="banner-title">{item.text}</div>
-              <div className="banner-link">See more</div>
+              <div
+                style={{
+                  color: item.textColor,
+                  maxWidth: item.textWidth || null
+                }}
+                className="banner-title"
+              >{item.text}</div>
+              <div
+                style={{ color: item.linkColor }}
+                className="banner-link"
+              >See more</div>
             </a>
           </animated.div>
         </Fragment>