cover with optional buttons

src/components/TemplateCover.js

@@ -45,7 +45,6 @@ class TemplateCover extends React.Component {
     const { featureVideo } = this.props.cover
     const { featureLang } = this.state
     const { translations } = featureVideo
-    console.log(featureVideo)
     const source = featureLang === 0
       ? featureVideo
       : {
@@ -89,6 +88,16 @@ class TemplateCover extends React.Component {
     )
   }
 
+  renderButton (button, yellow) {
+    return (
+      <div className='row'>
+        <a className={`cell ${yellow ? 'yellow' : 'plain'}`} href={button.href}>
+          {button.title}
+        </a>
+      </div>
+    )
+  }
+
   renderMediaOverlay () {
     const video = this.getVideo(this.state.video, this.props.cover.headerVideos ? this.props.cover.headerVideos.length : 0)
     return (
@@ -116,7 +125,7 @@ class TemplateCover extends React.Component {
       )
     }
 
-    const { videos } = this.props.cover
+    const { videos, footerButton } = this.props.cover
     const { showing } = this.props
     return (
       <div className='default-cover-container'>
@@ -158,9 +167,8 @@ class TemplateCover extends React.Component {
 
           {this.props.cover.featureVideo ? this.renderFeature() : null}
           <div className='hero thin'>
-            {
-              this.props.cover.headerVideos ? this.renderHeaderVideos() : null
-            }
+            {this.props.cover.headerVideos ? this.renderHeaderVideos() : null}
+            {this.props.cover.headerButton ? this.renderButton(this.props.cover.headerButton) : null}
             <div className='row'>
               <div className='cell yellow' onClick={this.props.showAppHandler}>
                 {this.props.cover.exploreButton}
@@ -189,6 +197,13 @@ class TemplateCover extends React.Component {
               </div>
             </div>
           ) : null}
+          {footerButton ? (
+            <div className='hero'>
+              <div className='row'>
+                {this.renderButton(footerButton)}
+              </div>
+            </div>
+          ) : null}
         </div>
 
         {

src/scss/cover.scss

@@ -185,7 +185,7 @@
           letter-spacing: 1px;
         }
         &.yellow {
-          color: black;
+          color: black !important;
           background-color: $yellow;
         }
         &:hover {
@@ -211,7 +211,6 @@
     // mobile styles, remove overlay buttons
     @media only screen and (max-width: 992px) {
       font-size: 22pt !important;
-      .cell.plain, .cell.small { display: none; }
       max-width: 100vw;
       padding: 0 40px 80px 40px;
     }