color background on vitrine modal if it is set

1 files changed, 14 insertions, 6 deletions

diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
index febd3eb..7cea428 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -5,15 +5,17 @@ import actions from 'app/actions'
 
 import { EfluxClose } from '../nav/eflux.icons'
 import { Arrow } from '../nav/viewer.icons'
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 
 class VitrineModal extends Component {
   render() {
-    const { open, media, index } = this.props.vitrineModal
+    const { open, media, color, index } = this.props.vitrineModal
     if (!media) {
       return (
         <div className='vitrine-modal'></div>
       )
     }
+    console.log(color)
     const className = open ? 'vitrine-modal open' : 'vitrine-modal'
     const id = media.settings.image_order[index]
     const image = media.settings.display_lookup[id] || media.settings.image_lookup[id]
@@ -23,6 +25,7 @@ class VitrineModal extends Component {
         <div className='vitrine-modal-content'>
           <div className='vitrine-image' style={{
             backgroundImage: 'url(' + image.url + ')',
+            backgroundColor: color.backgroundColor,
           }} />
           <div className='vitrine-text'>
             <div>
@@ -36,17 +39,17 @@ class VitrineModal extends Component {
         <div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
           {EfluxClose}
         </div>
-        <VitrineNavigation media={media} index={index} direction={-1} />
-        <VitrineNavigation media={media} index={index} direction={+1} />
+        <VitrineNavigation media={media} index={index} color={color} direction={-1} />
+        <VitrineNavigation media={media} index={index} color={CURTAIN_COLOR_LOOKUP.white} direction={+1} />
       </div>
     )
   }
 }
 
-const VitrineNavigation = ({ media, index, direction }) => {
+const VitrineNavigation = ({ media, color, index, direction }) => {
   let id, thumbnail
   const isPrev = direction === -1
-  let className = isPrev ? 'vitrine-nav prev' : 'vitrine-nav next'
+  let className = (isPrev ? 'vitrine-nav prev ' : 'vitrine-nav next ') + color.label
   // const targetIndex = mod(index + direction, media.settings.image_order.length)
   const targetIndex = index + direction
   const shouldClose = (targetIndex < 0) || (targetIndex === media.settings.image_order.length)
@@ -65,7 +68,12 @@ const VitrineNavigation = ({ media, index, direction }) => {
         {shouldClose ? 'Close' : isPrev ? 'Previous' : 'Next'}
         {!isPrev && <Arrow type='right'/>}
       </div>
-      {!shouldClose && <div className='vitrine-nav-thumbnail' style={{ backgroundImage: 'url(' + thumbnail.url + ')' }} />}
+      {!shouldClose && (
+        <div
+          className={'vitrine-nav-thumbnail ' + color.label}
+          style={{ backgroundImage: 'url(' + thumbnail.url + ')' }}
+        />
+      )}
     </div>
   )
 }