fullscreen background colors... update ui with section name

3 files changed, 13 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 0a6cc17..9ca5295 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -39,6 +39,7 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         <AnnotationFormFullscreen
           annotation={annotation}
           handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
         />
       )}
     </div>
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index a926741..6c835c5 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -8,15 +8,6 @@ import { annotationFadeTimings } from 'app/utils/annotation.utils'
 export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
   return (
     <div className='options'>
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
       <TextInput
         title="Curtain text"
         name="curtain_text"
@@ -30,18 +21,28 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         alwaysAccessible
         annotation={annotation}
         handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
       />
     </div>
   )
 }
 
-export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange }) => {
+export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
   const {
     fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
   } = annotationFadeTimings(annotation)
   return (
     <div>
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       <TextInput
         title="Total duration"
         name="duration"
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 5b4e199..50ca033 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -39,6 +39,7 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         <AnnotationFormFullscreen
           annotation={annotation}
           handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
         />
       )}
     </div>