From 1ba564c32e5b0411e9c566bccb21a1d24317d922 Mon Sep 17 00:00:00 2001
From: Tyler Hallada <thallada@edx.org>
Date: Wed, 1 Nov 2017 14:33:48 -0400
Subject: [PATCH] Edit highlights modal copy

Make modal intro text darker.

Make intro message dark in the base modal scss
---
 .../js/views/modals/course_outline_modals.js  |  8 ++--
 cms/static/sass/elements/_modal-window.scss   |  2 +-
 cms/static/sass/views/_outline.scss           | 21 +++++------
 cms/templates/js/highlights-editor.underscore | 37 ++++++++++++-------
 4 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/cms/static/js/views/modals/course_outline_modals.js b/cms/static/js/views/modals/course_outline_modals.js
index 3711e0d78f..9c4603e092 100644
--- a/cms/static/js/views/modals/course_outline_modals.js
+++ b/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).'
+                )
             );
         },
 
diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss
index 20afee0133..097a45a74f 100644
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/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 {
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index ab5880b39b..605d5ecc50 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -654,15 +654,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
@@ -754,10 +755,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;
diff --git a/cms/templates/js/highlights-editor.underscore b/cms/templates/js/highlights-editor.underscore
index a8c2e97b88..ca398f614c 100644
--- a/cms/templates/js/highlights-editor.underscore
+++ b/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>