arrows and tmp volume icon

2 files changed, 17 insertions, 3 deletions

diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index e6d7d09..d3d3e9f 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -27,7 +27,7 @@ class Transcript extends Component {
   render() {
     const { viewer } = this.props
     return (
-      <div className={viewer.transcript ? "transcript visible" : "transcript"}>
+      <div className="transcript">
         <div className='content'>
           <ParagraphList
             paragraphElementLookup={transcriptElementLookup}
@@ -39,6 +39,9 @@ class Transcript extends Component {
           className='close'
           onClick={this.handleClose}
         />
+        <a className='footer' href='#'>
+          Download PDF
+        </a>
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css
index 38af9f5..a42615d 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.css
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css
@@ -18,11 +18,22 @@
   pointer-events: none;
   user-select: none;
 }
-.transcript.visible {
+.transcript-open .transcript {
   pointer-events: auto;
   user-select: auto;
   transform: translateZ(0) translateX(0);
 }
+.transcript .footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: black;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 /* general paragraph styles */
 
@@ -34,7 +45,7 @@
   padding: 1.5rem 2rem 6rem 1.5rem;
   position: relative;
 }
-.transcript.visible .content {
+.transcript-open .transcript .content {
   overflow-y: scroll;
 }