From 4d4e5824cdd0c11ebac601bf15a5fa99679232ee Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Fri, 7 Sep 2012 13:29:49 -0400
Subject: [PATCH] Change form style for login and signup modals so it is
 consistant in every browser and we have no usability problems

---
 lms/static/sass/ie.scss            |  4 ----
 lms/static/sass/shared/_modal.scss | 11 +++++++++--
 lms/templates/login_modal.html     |  4 ++--
 lms/templates/signup_modal.html    | 14 +++++++-------
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/lms/static/sass/ie.scss b/lms/static/sass/ie.scss
index ff5608deaf..a22d3935fd 100644
--- a/lms/static/sass/ie.scss
+++ b/lms/static/sass/ie.scss
@@ -130,10 +130,6 @@ header.global {
   background: #000;
 }
 
-.modal .inner-wrapper form label {
-  display: block;
-}
-
 nav.course-material ol.course-tabs li a.active, nav.course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.course-material ol.course-tabs li a.seq_video.active {
   background-color: #333;
   background-color: rgba(0, 0, 0, .4);
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index 409c6088ec..b7ea762ce8 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -147,10 +147,9 @@
       }
 
       label {
-        display: none;
+        color: #999;
 
         &.field-error {
-          display: block;
           color: #8F0E0E;
 
           + input {
@@ -164,6 +163,14 @@
         margin-right: 5px;
       }
 
+      ::-webkit-input-placeholder {
+        color: #ddd;
+      }
+
+      :-moz-placeholder {  
+        color: #ddd;  
+      }
+
       textarea {
         background: rgb(255,255,255);
         display: block;
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index 8652f457e6..d7d327178c 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -10,9 +10,9 @@
 
     <form id="login_form" class="login_form" method="post" data-remote="true" action="/login">
       <label>E-mail</label>
-      <input name="email" type="email" placeholder="E-mail">
+      <input name="email" type="email">
       <label>Password</label>
-      <input name="password" type="password" placeholder="Password">
+      <input name="password" type="password">
       <label class="remember-me">
         <input name="remember" type="checkbox" value="true">
         Remember me
diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html
index 1510eb407b..96b2e33ac3 100644
--- a/lms/templates/signup_modal.html
+++ b/lms/templates/signup_modal.html
@@ -21,18 +21,18 @@
         <div class="input-group">
 	  % if has_extauth_info is UNDEFINED:
           <label data-field="email">E-mail*</label>
-          <input name="email" type="email" placeholder="E-mail*">
+          <input name="email" type="email" placeholder="eg. example@edx.org">
           <label data-field="password">Password*</label>
-          <input name="password" type="password" placeholder="Password*">
+          <input name="password" type="password" placeholder="****">
           <label data-field="username">Public Username*</label>
-          <input name="username" type="text" placeholder="Public Username*">
+          <input name="username" type="text" placeholder="Shown on forms">
           <label data-field="name">Full Name</label>
-          <input name="name" type="text" placeholder="Full Name*">
+          <input name="name" type="text" placeholder="For your certificate">
 	  % else:
 	  <p><i>Welcome</i> ${extauth_email}</p><br/>
 	  <p><i>Enter a public username:</i></p>
           <label data-field="username">Public Username*</label>
-          <input name="username" type="text" value="${extauth_username}" placeholder="Public Username*">
+          <input name="username" type="text" value="${extauth_username}" placeholder="Shown on forums">
 	  % endif
         </div>
 
@@ -75,9 +75,9 @@
           </section>
 
           <label data-field="mailing_address">Mailing address</label>
-          <textarea name="mailing_address" placeholder="Mailing address"></textarea>
+          <textarea name="mailing_address"></textarea>
           <label data-field="goals">Goals in signing up for edX</label>
-          <textarea name="goals" placeholder="Goals in signing up for edX"></textarea>
+          <textarea name="goals"></textarea>
 
         </div>