From b2765395b16bbd5eaec12071aca6ca02f13f0a4f Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 14 Mar 2012 16:24:26 -0400
Subject: [PATCH] Added some more markup and added styles for the email and
 profile changes

--HG--
branch : pmitros-name-change
---
 profile.html                | 35 ++++++++++++++++++----------------
 sass/_profile.scss          | 38 +++++++++++++++++++++++++++++++++----
 sass/layout/_leanmodal.scss | 25 ++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/profile.html b/profile.html
index 9f293e7e10..ef666ff241 100644
--- a/profile.html
+++ b/profile.html
@@ -141,19 +141,23 @@ $(function() {
 
     <section class="user-info">
 
-      <h1>${name}</h1>
-      %if True:
-        <a href="#apply_name_change" rel="leanModal">Apply to change</a>
-      %else:
-	(Name change pending)
-      %endif
+      <header>
+        <h1>${name}</h1>
+        %if True:
+          <a href="#apply_name_change" rel="leanModal">Apply to change</a>
+        %else:
+          (Name change pending)
+        %endif
+      </header>
+
       <ul>
         <li>
-	  Forum name: <strong>${username}</strong> 
-	</li>
+          Forum name: <strong>${username}</strong> 
+        </li>
+
         <li>
-	  E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal">Update</a>
-	</li>
+          E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal" class="edit-email">Edit</a>
+        </li>
         <li>
           Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Edit</a>
         </li>
@@ -169,9 +173,9 @@ $(function() {
         <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</a>
+        <a href="#unenroll_course" rel="leanModal">Unenroll from 6.002x</a>
       </div>
     </section>
   </div>
@@ -189,6 +193,8 @@ $(function() {
   <h1>Apply to change your name</h1>
   <form>
     <fieldset>
+      <p>A member of the course staff will review your request, and if approved, update your information. Please allow up to a week for your requested to be processed.</p> 
+
       <ul>
         <li>
           <label>Enter your desired full name, as it will appear on the MITx Certificate: </label>
@@ -199,7 +205,6 @@ $(function() {
           <textarea id="name_rationale" value=""></textarea>
         </li>
         <li>
-          <label>A member of the course staff will review your request, and if approved, update your information. Please allow up to a week for your requested to be processed.</label> 
           <input type="submit" id="submit">
         </li>
       </ul>
@@ -233,9 +238,7 @@ $(function() {
 
 <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>
+  <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>
   <form>
     <fieldset>
       <ul>
diff --git a/sass/_profile.scss b/sass/_profile.scss
index 3182d61b36..50e10b84f5 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -8,11 +8,14 @@ div.profile-wrapper {
     border-left: 1px solid #d3d3d3;
     border-right: 0;
 
-    h1 {
+    header {
       padding: lh(.5) lh();
-      font-size: 18px;
       margin: 0 ;
       @extend .bottom-border;
+
+      h1 {
+        font-size: 18px;
+      }
     }
 
     ul {
@@ -57,7 +60,7 @@ div.profile-wrapper {
           font-size: 12px;
         }
 
-        a#change_language, a#change_location {
+        a#change_language, a#change_location, a.edit-email {
           position: absolute;
           top: 9px;
           right: lh(.5);
@@ -69,12 +72,39 @@ div.profile-wrapper {
             color: #555;
           }
         }
+
       }
     }
 
     div#change_password_pop {
-      padding: 7px lh();
+      border-bottom: 1px solid #d3d3d3;
+      @include box-shadow(0 1px 0 #eee);
       color: #4D4D4D;
+      padding: 7px lh();
+
+      h2 {
+        margin-top: 0;
+        font-weight: bold;
+        text-transform: uppercase;
+        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;
+        }
+      }
     }
   }
 
diff --git a/sass/layout/_leanmodal.scss b/sass/layout/_leanmodal.scss
index b9399a39e4..0f72225dda 100644
--- a/sass/layout/_leanmodal.scss
+++ b/sass/layout/_leanmodal.scss
@@ -17,6 +17,7 @@ div.leanModal_box {
   @include box-sizing(border-box);
   display: none;
   padding: lh(2);
+  text-align: left;
 
   a.modal_close {
     color: #aaa;
@@ -204,6 +205,30 @@ div#pwd_reset {
   }
 }
 
+div#apply_name_change,
+div#change_email,
+div#unenroll_course {
+  max-width: 700px;
+
+  ul {
+    list-style: none;
+
+    li {
+      margin-bottom: lh(.5);
+
+      textarea, #{$all-text-inputs} {
+        display: block;
+        width: 100%;
+        @include box-sizing(border-box);
+      }
+
+      textarea {
+        height: 60px;
+      }
+    }
+  }
+}
+
 div#feedback_div{
   form{
     ol {