Added a fake deactivate and unenroll links and some style for profile

static/css/marketing.css

@@ -915,20 +915,22 @@ div#pwd_reset p {
 div#pwd_reset input[type="email"] {
   margin-bottom: 25.888px; }
 
-div#apply_name_change, div#change_email, div#unenroll_course {
+div#apply_name_change, div#change_email, div#unenroll, div#deactivate-account {
   max-width: 700px; }
-div#apply_name_change ul, div#change_email ul, div#unenroll_course ul {
+div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-account ul {
   list-style: none; }
-div#apply_name_change ul li, div#change_email ul li, div#unenroll_course ul li {
+div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li {
   margin-bottom: 12.944px; }
-div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll_course ul li textarea, div#unenroll_course ul li input[type="email"], div#unenroll_course ul li input[type="number"], div#unenroll_course ul li input[type="password"], div#unenroll_course ul li input[type="search"], div#unenroll_course ul li input[type="tel"], div#unenroll_course ul li input[type="text"], div#unenroll_course ul li input[type="url"], div#unenroll_course ul li input[type="color"], div#unenroll_course ul li input[type="date"], div#unenroll_course ul li input[type="datetime"], div#unenroll_course ul li input[type="datetime-local"], div#unenroll_course ul li input[type="month"], div#unenroll_course ul li input[type="time"], div#unenroll_course ul li input[type="week"] {
+div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] {
   display: block;
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
-div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll_course ul li textarea {
+div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea {
   height: 60px; }
+div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] {
+  white-space: normal; }
 
 div#feedback_div form ol li {
   float: none;

templates/profile.html

@@ -129,7 +129,10 @@ $(function() {
   <div class="profile-wrapper">
 
     <section class="course-info">
-      <h1>Course Progress</h1>
+      <header>
+        <h1>Course Progress</h1>
+        <a href="#unenroll" rel="leanModal" class="unenroll">Unenroll from 6.002x</a>
+      </header>
 
       <div id="grade-detail-graph"></div>
 
@@ -172,21 +175,26 @@ $(function() {
         %endif
         %endfor
       </ol> <!--End chapters-->
+
     </section>
 
     <section class="user-info">
 
       <header>
-        <h1>${name}</h1>
-        %if True:
-          <a href="#apply_name_change" rel="leanModal">Edit</a>
-        %else:
-          (Name change pending)
-        %endif
+        <h1>Student Profile</h1>
       </header>
 
       <ul>
         <li>
+          Name: <strong>${name}</strong>
+          %if True:
+          <a href="#apply_name_change" rel="leanModal" class="name-edit">Edit</a>
+          %else:
+          (Name change pending)
+          %endif
+        </li>
+
+        <li>
           Forum name: <strong>${username}</strong> 
         </li>
 
@@ -199,19 +207,21 @@ $(function() {
         <li>
           Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Edit</a>
         </li>
+        <li>
+          Password reset
+          <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
+          <input type="submit" id="pwd_reset_button" value="Reset" />
+          <p>We'll e-mail a password reset link to ${email}.</p>
+        </li>
+        <li>
+          Email preferences
+          <a href="#" class="email-edit">Edit</a>
+        </li>
+        <li class="deactivate">
+          <a href="#deactivate-account" rel="leanModal" class="deactivate">Deactivate MITx account</a>
+        </li>
       </ul>
 
-      <div id="change_password_pop">
-        <h2>Password change</h2>
-        <p>We'll e-mail a password reset link to ${email}.</p>
-
-        <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
-        <input type="submit" id="pwd_reset_button" value="Reset Password" />
-      </div>
-
-      <!--div id="unenroll">
-        <a href="#unenroll_course" rel="leanModal">Unenroll from 6.002x</a>
-      </div-->
     </section>
   </div>
 </section>
@@ -272,21 +282,33 @@ $(function() {
     </form>
 </div>
 
-<div id="unenroll_course" class="leanModal_box">
-  <h1> Unenroll </h1>
-  <p> At the end of the semester, all students who do not complete the course will be automatically dropped. If you would still prefer to deactivate your account, you can: </p>
+<div id="deactivate-account" class="leanModal_box">
+  <h1>Deactivate MITx Account</h1>
+  <p>Once you deactivate you&rsquo;re MIT<em>x</em> account you will no longer recieve updates and new class announcements from MIT<em>x</em>.</p>
+  <p>If you&rsquo;d like to still get updates and new class announcements you can just <a href="#unenroll" rel="leanModal">unenroll</a> and keep your account active.</p>
+
   <form id="unenroll_form">
     <div id="unenroll_error"> </div>
     <fieldset>
       <ul>
         <li>
-          <label><input type="radio" name="updates" checked /> Deactivate account/do not inform me about future courses. </label>
-        </li>
-        <li>
-          <label><input type="radio" name="updates" /> Deactivate account, but inform me about future courses.</label>
+          <input type="submit" id="" value="Yes, I don't want an MITx account or hear about any new classes or updates to MITx" />
         </li>
+      </ul>
+    </fieldset>
+  </form>
+</div>
+
+<div id="unenroll" class="leanModal_box">
+  <h1>Unenroll from 6.002x</h1>
+  <p>Please note: you will still receive updates and new class announcements from MIT<em>x</em>. If you don&rsquo;t wish to receive any more updates or announcements <a href="#deactivate-account" rel="leanModal">deactivate your account</a>.</p>
+
+  <form id="unenroll_form">
+    <div id="unenroll_error"> </div>
+    <fieldset>
+      <ul>
         <li>
-          <input type="submit" id="" value="Unenroll" />
+          <input type="submit" id="" value="Yes, I want to unenroll from 6.002x but still hear about any new classes or updates to MITx" />
         </li>
       </ul>
     </fieldset>

templates/sass/_profile.scss

@@ -75,7 +75,11 @@ div.profile-wrapper {
           font-size: 12px;
         }
 
-        a#change_language, a#change_location, a.edit-email {
+        a#change_language,
+        a#change_location,
+        a.edit-email,
+        a.name-edit,
+       a.email-edit {
           position: absolute;
           top: 9px;
           right: lh(.5);
@@ -88,6 +92,47 @@ div.profile-wrapper {
           }
         }
 
+        p {
+          font-size: 12px;
+          margin-bottom: 0;
+          margin-top: 4px;
+          color: #999;
+        }
+
+        a.deactivate {
+          color: #aaa;
+          font-style: italic;
+        }
+
+        input {
+          background: none;
+          border: none;
+          @include box-shadow(none);
+          color: #999;
+          font-size: 12px;
+          font-weight: normal;
+          margin: 0;
+          padding: 0;
+          position: absolute;
+          right: lh(.5);
+          text-transform: uppercase;
+          top: 9px;
+
+          &:hover {
+            color: #555;
+          }
+        }
+
+        &.deactivate {
+          // border-top: 1px solid #d3d3d3;
+          // position: absolute;
+          // bottom: 0;
+          // @include box-shadow(inset 0 1px 0 #eee);
+          // width: 100%;
+          border-bottom: none;
+          @include box-shadow(none);
+          margin-top: 10px;
+        }
       }
     }
 
@@ -104,30 +149,26 @@ div.profile-wrapper {
         font-size: $body-font-size;
       }
     }
-
-    div#unenroll {
-      border-bottom: 1px solid #d3d3d3;
-      @include box-shadow(0 1px 0 #eee);
-
-      a {
-        color: lighten($text-color, 10%);
-        display: block;
-        display: block;
-        padding: 7px lh();
-        @include transition();
-
-        &:hover {
-          background: #efefef;
-        }
-      }
-    }
   }
 
   section.course-info {
     @extend .content;
 
-    > h1 {
-      @extend .top-header;
+    header {
+      @extend h1.top-header;
+      @extend .clearfix;
+
+      h1 {
+        margin: 0;
+        float: left;
+      }
+
+      a.unenroll {
+        float: right;
+        color: #aaa;
+        font-style: italic;
+        margin-top: 8px;
+      }
     }
 
     div#grade-detail-graph {
@@ -167,30 +208,30 @@ div.profile-wrapper {
           padding-left: flex-gutter(9);
           width: flex-grid(7, 9);
 
-         > li {
-           padding:0 0 lh() 0;
+          > li {
+            padding:0 0 lh() 0;
 
-           &:first-child {
-             padding-top: 0;
-           }
+            &:first-child {
+              padding-top: 0;
+            }
 
-           &:last-child {
-             border-bottom: 0;
-           }
+            &:last-child {
+              border-bottom: 0;
+            }
 
-          h3 {
-            color: #666;
-          }
+            h3 {
+              color: #666;
+            }
 
-          ol {
-            list-style: none;
+            ol {
+              list-style: none;
 
-            li {
-              display: inline-block;
-              padding-right: 1em;
+              li {
+                display: inline-block;
+                padding-right: 1em;
+              }
             }
           }
-          }
         }
       }
     }

templates/sass/layout/_leanmodal.scss

@@ -207,7 +207,8 @@ div#pwd_reset {
 
 div#apply_name_change,
 div#change_email,
-div#unenroll_course {
+div#unenroll,
+div#deactivate-account {
   max-width: 700px;
 
   ul {
@@ -225,6 +226,10 @@ div#unenroll_course {
       textarea {
         height: 60px;
       }
+
+      input[type="submit"] {
+        white-space: normal;
+      }
     }
   }
 }