1 files changed, 21 insertions, 11 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
index 3ad16b2..7cec52b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
@@ -1,20 +1,30 @@
 import React, { Component } from 'react'
 
-export const Gallery = ({ media }) => {
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
+
+export const Gallery = ({ media, annotation }) => {
   const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+  }
+
   // console.log(display_lookup)
   // console.log(width)
   return (
-    <div className='gallery-items'>
-      <div className='gallery-scroll'>
-        {image_order.map(id => {
-          const image = display_lookup[id]
-          const caption = (caption_lookup && caption_lookup[id]) || {}
-          // console.log(image)
-          return (
-            <GalleryItem key={id} image={image} caption={caption} />
-          )
-        })}
+    <div style={style} className='gallery-container'>
+      <div className='gallery-items'>
+        <div className='gallery-scroll'>
+          {image_order.map(id => {
+            const image = display_lookup[id]
+            const caption = (caption_lookup && caption_lookup[id]) || {}
+            // console.log(image)
+            return (
+              <GalleryItem key={id} image={image} caption={caption} />
+            )
+          })}
+        </div>
       </div>
     </div>
   )