drupal integration - styled and revised markup/copy for password reset modal

lms/static/sass/multicourse/_account.scss

@@ -24,7 +24,7 @@
 }
 
 // shared
-.login, .register, .passwordreset {
+.login, .register, .passwordreset, #forgot-password-modal #password-reset {
   padding: ($baseline*1.5);
   @include clearfix;
 
@@ -183,6 +183,7 @@
 
         input, textarea {
           width: 100%;
+          font-weight: 600;
         }
       }
 
@@ -427,4 +428,84 @@
 // password reset
 .passwordreset {
 
+}
+
+// modal password reset form
+#forgot-password-modal {
+  @include border-radius(2px);
+
+
+  .inner-wrapper {
+    @include border-radius(2px);
+    background: $m-gray-l;
+    padding-bottom: 0 !important;
+  }
+
+  #password-reset {
+
+    header {
+      border-bottom: 1px solid tint($m-gray,70%);
+      background-image: none;
+      padding: 0;
+
+      &:before {
+        background-image: none;
+      }
+
+      h2 {
+        font-size: em(24);
+        font-weight: 700;
+        text-transform: none;
+      }
+    }
+
+    .instructions {
+
+      p {
+        color: $m-gray;
+        font-size: em(14);
+      }
+    }
+
+    fieldset {
+      padding: 0 !important;
+      margin: ($baseline*1.25) 0 !important;
+    }
+
+    form {
+      @include border-radius(0);
+      @include box-shadow(none);
+      margin: $baseline 0;
+      border: none;
+      padding: 0;
+
+      .field {
+
+        &.text, &.email, &.textarea {
+
+          input {
+            background: #fafafa;
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .form-actions {
+        padding: 0 !important;
+
+        .action-primary {
+          float: none;
+          display: block !important;
+          width: 100%;
+        }
+      }
+    } 
+  }
+
+  .modal-form-error {
+    @include border-radius(2px);
+    border: 1px solid tint($red,65%);
+    background: tint($red,98%);
+    color: $red;
+  }
 }

lms/templates/forgot_password_modal.html

@@ -3,19 +3,28 @@
   <div class="inner-wrapper">
     <div id="password-reset">
       <header>
-        <h2>Password reset</h2>
-        <hr>
+        <h2>Password Reset</h2>
       </header>
 
-      <div class="message">
-        <p>Enter your e-mail address below, and we will e-mail instructions for setting a new password.</p>
+      <div class="instructions">
+        <p>Please enter your e-mail address below, and we will e-mail instructions for setting a new password.</p>
       </div>
 
       <form id="pwd_reset_form" action="${reverse('password_reset')}" method="post" data-remote="true">
-        <label for="id_email">E-mail address:</label>
-        <input id="id_email" type="email" name="email" maxlength="75" placeholder="Your E-mail"/>
-        <div class="submit">
-          <input type="submit" id="pwd_reset_button" value="Reset my password" />
+        <fieldset class="group group-form group-form-requiredinformation">
+          <legend class="is-hidden">Required Information</legend>
+        
+          <ol class="list-input">
+            <li class="field required text" id="field-email">
+              <label for="id_email">Your E-mail Address</label>
+              <input class="" id="id_email" type="email" name="email" value="" placeholder="eg. example@edx.org" />
+              <span class="tip tip-input">This is the email address you used to register with edX</span>
+            </li>
+          </ol>
+        </fieldset>
+        
+        <div class="form-actions">
+          <button name="submit" type="submit" id="pwd_reset_button" class="action action-primary action-update">Reset My Password</button>
         </div>
       </form>
     </div>