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

Make notification checkbox more obvious

lms/static/sass/_discussion.scss

@@ -1296,22 +1296,30 @@ body.discussion {
       }
 
       .row-item-full {
-
-        .email-setting {
-          display: inline-block;
-          text-align: center;
-          vertical-align: middle;
-          margin-left: $baseline/2;
-        }
-
-        .icon {
+        
+        .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;
+            vertical-align: middle;
+            margin-left: $baseline/2;
+          }
+  
+          .icon {
+            display: inline-block;
+          }
+      
+          .email-setting:checked ~ .icon {
+            color: $green;
+          }
         }
-    
-        .email-setting:checked ~ .icon {
-          color: $green;
-        }
-
+        
         .row-description {
           display: inline-block;
           width:80%;

lms/templates/discussion/_underscore_templates.html

@@ -233,57 +233,61 @@
 </script>
 <script type="text/template" id="discussion-home">
   <div class="discussion-article blank-slate">
-  <section class="home-header">
-  <span class="label">${_("DISCUSSION HOME:")}</span>
-  % if course and course.display_name_with_default:
-  <h1 class="home-title">${course.display_name_with_default}</h1>
-  </section>
-
-  % if settings.FEATURES.get('ENABLE_DISCUSSION_HOME_PANEL'):
-  <span class="label label-settings">${_("HOW TO USE EDX DISCUSSIONS")}</span>
-  <table class="home-helpgrid">
-  <tr class="helpgrid-row helpgrid-row-navigation">
-  <td class="row-title">${_("Find discussions")}</td>
-  <td class="row-item">
-  <i class="icon icon-reorder"></i>
-  <span class="row-description">${_("Focus in on specific topics")}</span>
-  </td>
-  <td class="row-item">
-  <i class="icon icon-search"></i>
-  <span class="row-description">${_("Search for specific posts ")}</span>
-  </td>
-  <td class="row-item">
-  <i class="icon icon-sort"></i>
-  <span class="row-description">${_("Sort by date, vote, or comments")}</span>
-  </td>
-  </tr>
-  <tr class="helpgrid-row helpgrid-row-participation">
-  <td class="row-title">${_("Engage with posts")}</td>
-  <td class="row-item">
-  <i class="icon icon-plus"></i>
-  <span class="row-description">${_("Upvote posts and good responses")}</span>
-  </td>
-  <td class="row-item">
-  <i class="icon icon-flag"></i>
-  <span class="row-description">${_("Report Forum Misuse")}</span>
-  </td>
-  <td class="row-item">
-  <i class="icon icon-star"></i>
-  <span class="row-description">${_("Follow posts for updates")}</span>
-  </td>
-  </tr>
-  <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>
-  <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>
-  </td>
-  </tr>
-  </table>
-  % endif
-  % endif
+    <section class="home-header">
+      <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'):
+        <span class="label label-settings">${_("HOW TO USE EDX DISCUSSIONS")}</span>
+        <table class="home-helpgrid">
+          <tr class="helpgrid-row helpgrid-row-navigation">
+            <td class="row-title">${_("Find discussions")}</td>
+            <td class="row-item">
+              <i class="icon icon-reorder"></i>
+              <span class="row-description">${_("Focus in on specific topics")}</span>
+            </td>
+            <td class="row-item">
+              <i class="icon icon-search"></i>
+              <span class="row-description">${_("Search for specific posts ")}</span>
+            </td>
+            <td class="row-item">
+              <i class="icon icon-sort"></i>
+              <span class="row-description">${_("Sort by date, vote, or comments")}</span>
+            </td>
+          </tr>
+          <tr class="helpgrid-row helpgrid-row-participation">
+            <td class="row-title">${_("Engage with posts")}</td>
+            <td class="row-item">
+              <i class="icon icon-plus"></i>
+              <span class="row-description">${_("Upvote posts and good responses")}</span>
+            </td>
+            <td class="row-item">
+              <i class="icon icon-flag"></i>
+              <span class="row-description">${_("Report Forum Misuse")}</span>
+            </td>
+            <td class="row-item">
+              <i class="icon icon-star"></i>
+              <span class="row-description">${_("Follow posts for updates")}</span>
+            </td>
+          </tr>
+          <tr class="helpgrid-row helpgrid-row-notification">
+            <td class="row-title">${_('Receive updates')}</td>
+            <td class="row-item-full" colspan="3">
+              <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>
+              </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
 
   </div>
 </script>