adding the icons

3 files changed, 56 insertions, 17 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 c66cf21..40c8365 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -1,25 +1,32 @@
-import React from 'react'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import {
   EfluxLogo, EfluxClose, EfluxMenu
 } from './eflux.icons'
+import { PlayButton } from './viewer.icons'
+import actions from 'app/actions'
 
-const EfluxChrome = React.memo(({ navStyle }) => (
-  <div className={"eflux-header " + navStyle}>
+const EfluxChrome = React.memo(({ navStyle, playing, transcriptOpen }) => (
+  <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
     <div className="eflux-logo">
       <a href="/">
         {EfluxLogo}
       </a>
     </div>
     <div className="eflux-nav">
-      <a href="/">
-        {EfluxClose}
-      </a>
-      <a href="/">
+      <PlayButton playing={playing} />
+      <div className="transcript-icon" onClick={() => actions.viewer.toggleComponent('transcript')}>
         {EfluxMenu}
-      </a>
+      </div>
     </div>
   </div>
 ))
 
-export default EfluxChrome
+const mapStateToProps = state => ({
+  navStyle: state.viewer.navStyle,
+  playing: state.audio.playing,
+  transcriptOpen: state.viewer.transcript,
+})
+
+export default connect(mapStateToProps)(EfluxChrome)
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index d04b85c..487c04e 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -4,6 +4,10 @@
   left: 0;
   width: 100%;
   z-index: 10;
+  transition: width 0.2s;
+}
+.eflux-header.transcript-open {
+  width: calc(100vw - 31.875rem);
 }
 .eflux-logo {
   position: absolute;
@@ -19,27 +23,55 @@
   height: 28px;
 }
 .eflux-nav {
+  display: flex;
+  flex-direction: row;
   position: absolute;
   top: 23px;
   right: 32px;
 }
-.eflux-nav svg {
-  width: 26px;
-  height: 20px;
+.eflux-nav .playToggle,
+.eflux-nav .transcript-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  background: white;
+  border-radius: 50%;
   margin-left: 34px;
+  cursor: pointer;
+}
+.eflux-nav svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.eflux-nav .playToggle svg {
+  width: 2rem;
+  height: 2rem;
+}
+.eflux-nav .playToggle.paused svg {
+  margin-left: 2px;
+}
+
+.eflux-nav svg path {
+  fill: #000;
+}
+.eflux-nav svg line {
+  stroke: #000;
 }
 
-.eflux-header svg path {
+.eflux-logo svg path {
   fill: #000;
   transition: fill 0.5s;
 }
-.eflux-header svg line {
+.eflux-logo svg line {
   stroke: #000;
   transition: stroke 0.5s;
 }
-.eflux-header.black svg path {
+.eflux-logo.black svg path {
   fill: #fff;
 }
-.eflux-header.black svg line {
+.eflux-logo.black svg line {
   stroke: #fff;
 }
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 059f0c0..455df6f 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -63,7 +63,7 @@ export const PauseIcon = (
 export const PlayButton = ({ playing }) => {
   return (
     <div
-      className='playToggle'
+      className={playing ? 'playToggle playing' : 'playToggle paused'}
       onClick={() => playing ? actions.audio.pause() : actions.audio.play()}
     >
       {playing ? PauseIcon : PlayIcon}