1 files changed, 13 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index 6da6f76..f2f02d2 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -48,10 +48,20 @@ class EfluxChrome extends Component {
     }
   }
   render() {
-    const { navStyle, playing, transcriptOpen, growlOpen, growlMessage, atEndOfSection, currentSection } = this.props
+    const {
+      navStyle, navGradient,
+      playing, transcriptOpen,
+      growlOpen, growlMessage,
+      atEndOfSection, currentSection
+    } = this.props
     const showingTranscriptTooltip = ((atEndOfSection && currentSection.index === 0) || this.state.transcript)
+    let className = "eflux-header"
+    if (navStyle) className += ' ' + navStyle
+    if (navGradient) className += ' gradient'
+    if (transcriptOpen) className += ' transcript-open'
     return (
-      <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
+      <div className={className}>
+        <div className="eflux-gradient" />
         <div className="eflux-logo">
           <a
             href={URLS.eflux_logo}
@@ -99,6 +109,7 @@ class EfluxChrome extends Component {
 
 const mapStateToProps = state => ({
   navStyle: state.viewer.navStyle,
+  navGradient: state.viewer.navGradient,
   playing: state.audio.playing,
   transcriptOpen: state.viewer.transcript,
   growlOpen: state.viewer.growlOpen,