Merge pull request #16411 from edx/thallada/ret-section-highlights-copy-edit

Edit highlights modal copy

cms/static/js/views/modals/course_outline_modals.js

@@ -225,11 +225,9 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         getIntroductionMessage: function() {
             return StringUtils.interpolate(
                 gettext(
-                    'The highlights you provide here are messaged (i.e., emailed) to learners. Each {item}\'s ' +
-                    'highlights are emailed at the time that we expect the learner to start working on that {item}. ' +
-                    'At this time, we assume that each {item} will take 1 week to complete.'
-                ),
-                {item: this.options.xblockType}
+                  'Enter 3-5 highlights to include in the email message that learners receive for ' +
+                  'this section (250 character limit).'
+                )
             );
         },
 

cms/static/sass/elements/_modal-window.scss

@@ -41,7 +41,7 @@
       @extend %t-copy-sub1;
 
       margin: 0 0 $baseline 0;
-      color: $gray;
+      color: $gray-d2;
     }
 
     .message-status {

cms/static/sass/views/_outline.scss

@@ -655,15 +655,16 @@
     width: 18px;
   }
 
-  .highlight-input-text {
-    width: 100%;
-    margin-bottom: ($baseline/4);
-    margin-top: ($baseline/4);
-  }
+  .highlights-section-modal {
+    .highlight-input-text {
+      width: 100%;
+      margin-bottom: ($baseline/4);
+      margin-top: ($baseline/4);
+    }
 
-  .highlights-description {
-    font-size: 80%;
-    font-weight: bolder;
+    .highlight-input-label {
+      font-weight: 600;
+    }
   }
 
   // outline: edit item settings
@@ -755,10 +756,6 @@
   .bulkpublish-section-modal,
   .bulkpublish-subsection-modal,
   .bulkpublish-unit-modal {
-    .modal-introduction {
-      color: $gray-d2;
-    }
-
     .modal-section .outline-bulkpublish {
       max-height: ($baseline*20);
       overflow-y: auto;

cms/templates/js/highlights-editor.underscore

@@ -2,25 +2,34 @@
 <h3 class="modal-section-title" id="highlights_label"><%- gettext('Section Highlights') %></h3>
 <div class="modal-section-content block-highlights">
     <div role="group" class="list-fields" aria-labelledby="highlights_label">
-        <p class='field-message highlights-description' id='highlights_description'>
-            <%- gettext('Please enter 3-5 highlights to be sent as separate bullet points in the message.') %>
-        </p>
         <%
             var max_number_of_highlights = 5;
         %>
-        <% _.each(highlights, function(highlight){ %>
-            <input
-                    class="input input-text highlight-input-text"
-                    type="text" maxlength="250" aria-describedby="highlights_description"
-                    value="<%= _.escape(highlight) %>"
-            />
+        <% _.each(highlights, function(highlight, i){ %>
+            <label class="highlight-input-label">
+                <%- edx.StringUtils.interpolate(
+                    gettext('Highlight {highlight_index}'),
+                    { highlight_index: i + 1 }
+                ) %>
+                <input
+                        class="input input-text highlight-input-text"
+                        type="text" maxlength="250" aria-describedby="highlights_description"
+                        value="<%= _.escape(highlight) %>"
+                />
+            </label>
         <% }); %>
         <% for (i = highlights.length; i < max_number_of_highlights; i++) { %>
-            <input
-                    class="input input-text highlight-input-text"
-                    type="text" maxlength="250" aria-describedby="highlights_description"
-                    placeholder="<%- gettext('A highlight to look forward to this week.') %>"
-            />
+            <label class="highlight-input-label">
+                <%- edx.StringUtils.interpolate(
+                    gettext('Highlight {highlight_index}'),
+                    { highlight_index: i + 1 }
+                ) %>
+                <input
+                        class="input input-text highlight-input-text"
+                        type="text" maxlength="250" aria-describedby="highlights_description"
+                        placeholder="<%- gettext('A highlight to look forward to this week.') %>"
+                />
+            </label>
         <% } %>
     </div>
 </div>