1 files changed, 21 insertions, 10 deletions
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
index d3009d8..07a79a3 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
@@ -13,6 +13,17 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
         onChange={handleSettingsSelect}
       />
       <Select
+        title='Background Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={BLACK_WHITE_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+      <LabelDescription>
+        {'Background color for section'}
+      </LabelDescription>
+      <Select
         title='Transition Color'
         name='transition_color'
         selected={annotation.settings.transition_color}
@@ -23,15 +34,6 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
       <LabelDescription>
         {'Player will fade from this color when section begins'}
       </LabelDescription>
-      <Checkbox
-        label="Section does not have audio"
-        name="no_audio"
-        checked={annotation.settings.no_audio}
-        onChange={handleSettingsSelect}
-      />
-      <LabelDescription>
-        {'Check if this is a text-only section'}
-      </LabelDescription>
       {!annotation.settings.no_audio &&
         <div>
           <Select
@@ -43,10 +45,19 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
             onChange={handleSettingsSelect}
           />
           <LabelDescription>
-            {'Set the color of the duration icon on the section navigation'}
+            {'Section nav thumbnail icon color'}
           </LabelDescription>
         </div>
       }
+      <Checkbox
+        label="Section does not have audio"
+        name="no_audio"
+        checked={annotation.settings.no_audio}
+        onChange={handleSettingsSelect}
+      />
+      <LabelDescription>
+        {'Check if this is a text-only section'}
+      </LabelDescription>
     </div>
   )
 }