Merge pull request #2394 from edx/giulio/highlight-notification-checkbox

Make notification checkbox more obvious

lms/static/sass/_discussion.scss

@@ -1297,6 +1297,13 @@ body.discussion {
 
       .row-item-full {
         
+        .notification-checkbox {
+          display: inline-block;
+          padding: $baseline/4 0 $baseline/2 0;
+          margin-right: $baseline/2;
+          border-radius: 5px;
+          border: 1px solid gray;
+          
           .email-setting {
             display: inline-block;
             text-align: center;
@@ -1311,6 +1318,7 @@ body.discussion {
           .email-setting:checked ~ .icon {
             color: $green;
           }
+        }
         
         .row-description {
           display: inline-block;

lms/templates/discussion/_underscore_templates.html

@@ -237,6 +237,7 @@
       <span class="label">${_("DISCUSSION HOME:")}</span>
       % if course and course.display_name_with_default:
         <h1 class="home-title">${course.display_name_with_default}</h1>
+      % endif
     </section>
   
       % if settings.FEATURES.get('ENABLE_DISCUSSION_HOME_PANEL'):
@@ -275,15 +276,18 @@
           <tr class="helpgrid-row helpgrid-row-notification">
             <td class="row-title">${_('Receive updates')}</td>
             <td class="row-item-full" colspan="3">
-  <label class="sr" for="email-setting-checkbox">${_("Toggle Notifications Setting")}</label>
+              <label for="email-setting-checkbox">
+                <span class="sr">${_("Toggle Notifications Setting")}</span>
+                <span class="notification-checkbox">
                   <input type="checkbox" id="email-setting-checkbox" class="email-setting" name="email-notification"/>
                   <i class="icon icon-envelope"></i>
-  <span class="row-description">${_("If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following.")}</span>
+                </span>
+              </label>
+              <span class="row-description">${_("Check this box to receive an email digest once a day notifying you about new, unread activity from posts you are following.")}</span>
             </td>
           </tr>
         </table>
       % endif
-  % endif
 
   </div>
 </script>