Merge pull request #12299 from edx/clrux/ac-413

AC-413 adding labels to form fields on Instructor dashboard membership page

common/test/acceptance/pages/lms/instructor_dashboard.py

@@ -828,7 +828,7 @@ class MembershipPageAutoEnrollSection(PageObject):
         """
         Fill in the form with the provided email and submit it.
         """
-        email_selector = "{} >p>textarea".format(self.batch_enrollment_selector)
+        email_selector = "{} textarea".format(self.batch_enrollment_selector)
         enrollment_button = "{} .enrollment-button[data-action='enroll']".format(self.batch_enrollment_selector)
 
         # Fill the email addresses after the email selector is visible.

lms/static/sass/course/instructor/_instructor_2.scss

@@ -435,6 +435,12 @@
     &:last-child {
       margin-bottom: 0;
     }
+        
+    legend {
+        // use the same styles as H3s
+        font-size: 1.2em;
+        margin-bottom: 15px;
+    }
   }
 
   .batch-enrollment, .batch-beta-testers {
@@ -478,19 +484,15 @@
     margin: ($baseline/2) 0;
     position: relative;
 
-      label {
-        border-bottom: 1px dotted $base-font-color;
-      }
-
     .hint {
       @extend %t-copy-sub2;
-      display: none;
+      display: block;
       position: absolute;
-      top: 15px;
-      @include left($baseline*10);
+      top: ($baseline/2);
+      left: -9999em;
       padding: ($baseline/2);
       width: 50%;
-      background-color: $light-gray;
+      background-color: $light-gray3;
       box-shadow: 2px 2px 3px $shadow;
 
       .hint-caret {
@@ -498,30 +500,24 @@
         position: absolute;
         top: 0;
         @include left(-15px);
-        @include border-right(8px solid $light-gray);
+        @include border-right(8px solid $light-gray3);
         @include border-left(8px solid transparent);
-        border-top: 8px solid $light-gray;
+        border-top: 8px solid $light-gray3;
         border-bottom: 8px solid transparent;
       }
     }
-  }
-
-  label[for="auto-enroll"]:hover + .auto-enroll-hint {
-    display: block;
-  }
-
-  label[for="auto-enroll-beta"]:hover + .auto-enroll-beta-hint {
-    width: 30%;
-    display: block;
-  }
-
-  label[for="email-students"]:hover + .email-students-hint {
-    display: block;
-  }
-
-  label[for="email-students-beta"]:hover + .email-students-beta-hint {
-    width: 30%;
-    display: block;
+    
+    /* ***
+     * Ideally we want to handle functionality with JS.
+     * This functionality should eventually be moved into CS/JS, and out of here. */ 
+    .has-hint:hover > .hint {    
+        @include left($baseline*10);
+    }
+    
+    .has-hint input:focus ~ .hint {
+        @include left($baseline*10);
+    }
+    /* *** */
   }
 
   .enroll-actions {
@@ -595,6 +591,7 @@
             border-bottom: 1px solid $light-gray;
           }
 
+          th,
           td {
             @extend %t-copy-sub1;
             vertical-align: middle;