refactoring of the public pages design

app/assets/stylesheets/colors.css.scss

@@ -7,7 +7,7 @@ $background-blue: #E7F2F7;
 $grey: #2B2B2B;
 $light-grey: #DDDDDD;
 
-$border-grey: #DDDDDD;
+$border-grey: #CCCCCC;
 $border-dark-grey: #999999;
 
 $link-grey: #777777;

app/assets/stylesheets/new_styles/_forms.scss

@@ -1,71 +1,121 @@
+input,
+textarea { /* Bootstrap reset */
+  &,
+  &:active,
+  &:invalid,
+  &:invalid:required, {
+    border-color: $border-grey;
+    box-shadow: none;
+  }
+
+  &:focus,
+  &:active:focus,
+  &:invalid:focus,
+  &:invalid:required:focus {
+    border-color: $border-dark-grey;
+    box-shadow: none;
+  }
+}
+
 /* autocomplete colors */
 input:-webkit-autofill{
   background-color: #fff !important;
   background-image: none !important;
 }
 
-
+/* Forms described here are only used on the public pages at the moment */
 form.block-form {
-  display : inline-block;
+  margin: 20px auto;
 
   label {
     color : $text-dark-grey;
-  }
+    position: absolute;
-
+    top: -9999px;
-  input {
+    left: -9999px;
-    &:invalid,
-    &:invalid:required,
-    &:invalid:required:focus {
-      box-shadow : none;
-
-      border : none;
-      color : $text-dark-grey;
-    }
   }
 
   fieldset {
-    box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7);
     margin-bottom: 1em;
     background-color: #fff;
-    border : 1px solid $border-dark-grey;
+    position: relative; /* To correctly place the entypo icon */
-    border-radius: 5px;
 
-    input[type=text],
+    input {
-    input[type=email],
+      color : $text-dark-grey;
-    input[type=password] {
+      margin: 0px;
-      box-shadow: 0 0 0 0;
+      border-bottom-width: 0px;
-      border-radius: 0;
+      border-radius: 0px;
-      border : none;
+    }
-      background : transparent;
+
+    .form-control {
+      font-size: 16px;
+      height: 40px;
       padding: 10px;
-      margin-bottom : 0;
+      padding-left: 40px;
     }
 
-  /* mainly bootstrap overrides */
+    .form-control:first-of-type {
-    .control-group {
+      &,
-      margin : 0;
+      &:focus,
-      border-bottom : 1px solid $border-grey;
+      &:invalid,
-
+      &:invalid:focus,
-      .control-label,
+      &:invalid:required,
-      input[type=text],
+      &:invalid:required:focus {
-      input[type=password],
+        border-top-left-radius: 5px;
-      .field_with_errors label {
+        border-top-right-radius: 5px;
-        padding : 10px;
+      }
-        margin : 0;
     }
 
-      .controls { margin-left : 100px; position : relative; }
+    .form-control:last-of-type {
-      .control-label { width : 80px; }
+      &,
+      &:focus,
+      &:invalid,
+      &:invalid:focus,
+      &:invalid:required,
+      &:invalid:required:focus {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        border-bottom-width: 1px;
+      }
+    }
 
-      .controls .field_with_errors input {
+    .form-control:focus {
-        background : {
+      &,
-          image : image-url('invalid_fat@2x.png');
+      &:invalid,
-          repeat : no-repeat;
+      &:invalid:required {
-          position : 197px;
+        border-color: $border-dark-grey;
-          size: 20px 20px;
+        border-bottom-width: 1px;
+      }
+      /* remove the border of the element under the one with the focus */
+      & + label + .entypo + .form-control {
+        border-top-width: 0px;
       }
     }
+
+    .entypo {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      width: 20px;
+      text-align: center;
+      color: $text-grey;
+      font-size: 20px;
     }
+
+    .entypo:nth-of-type(2) {
+      top: 50px;
+    }
+
+    .entypo:nth-of-type(3) {
+      top: 90px;
+    }
+
+    .entypo:nth-of-type(4) {
+      top: 130px;
+    }
+
+    input:-moz-placeholder { text-transform: uppercase; }
+    input::-webkit-input-placeholder { text-transform: uppercase; }
+    input:-ms-input-placeholder { text-transform: uppercase; }
   }
 
   input[type=submit] {
@@ -76,19 +126,6 @@ form.block-form {
   }
 }
 
-textarea, input[type=text], input[type=password], input[type=search] {
-  &:focus,
-  &:invalid,
-  &:invalid:focus,
-  &:invalid:required,
-  &:invalid:required:focus {
-    border: 1px solid $border-dark-grey;
-    outline: none;
-    box-shadow: none;
-    color : $text-dark-grey;
-  }
-}
-
 /* buttons to be extracted? */
 .new-btn {
   @include transition(box-shadow);

app/assets/stylesheets/new_styles/_login.scss

@@ -1,91 +1,16 @@
 #login,
 #forgot_password,
 #reset_password {
-  padding-top: 20px;
+  padding-top: 25px;
 
   .branding-asterisk {
     margin: auto;
     width: 154px;
     height: 154px;
-    margin-bottom: 30px;
+    margin-bottom: 12px;
   }
 
-  .span4.offset4 {
+  form.block-form {
-    margin-bottom: 30px;
-  }
-  
-  label {
-    text-transform: uppercase;
-    text-align: right;
-    padding: 10px 0;
-    overflow: hidden;
-  }
-  
-  #new_user {
-    display: block;
-    margin: auto;
     max-width: 400px;
-    margin-bottom: 30px;
-  }
-} 
-
-#login {
-  .form-signin {
-    .form-control {
-      font-size: 16px;
-      height: auto;
-      padding: 10px;
-      padding-left: 40px;
-    }
-    fieldset {
-      margin-bottom: 20px;
-    }
-    .entypo {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      text-align: center;
-      top: -6px;
-      left: 12px;
-      color: $text-grey;
-      font-size: 20px;
-    }
-    input[type=text], input[type=password] {
-      &:focus {
-        border: 1px solid #ccc;
-      }
-    }
-    input[type=text] {
-      margin-bottom: -24px;
-      border-radius: 5px 5px 0 0;
-    }
-    input[type=password] {
-      margin-bottom: -23px;
-      border-radius: 0 0 5px 5px;
-    }
-  }
-}
-
-#forgot_password {
-  label {
-    width: 40%;
-  }
-    
-  input[type=password] {
-    width: 60%;
-  }
-}
-
-#reset_password {
-  label {
-    width: 45%;
-  }
-   
-  input[type=password] {
-    width: 55%;
-  }
-  
-  #new_user {
-    width: 500px;
   }
 }

app/assets/stylesheets/new_styles/_registration.scss

@@ -1,5 +1,4 @@
 #registration {
-    
   & > .container-fluid {
    margin-top: 5%;
   }
@@ -33,14 +32,39 @@
   }
 
   form {
-    .control-label,
+    .form-control:last-of-type {
-    .controls {
+      border-bottom-left-radius: 0px;
-      margin-left : auto;
+      border-bottom-right-radius: 0px;
-      width : auto;
     }
 
-    .controls {
+    .captcha {
+      border: 1px solid $border-grey;
+      border-top: 0px;
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+
+      .captcha_img {
+        float: left;
+        margin-top: 3px;
+      }
+
+      #user_captcha {
         float: right;
+        width: 69%;
+        border: 0px;
+        border-radius: 0px;
+        border-bottom-right-radius: 5px;
+        border-left: 1px solid $border-grey;
+
+        &:focus {
+          border: solid 1px $border-dark-grey;
+          /* Sorry about this dirty hack, the only way I found to correctly display the grey border */
+          position: relative;
+          top: -1px;
+          margin-right: -1px;
+          margin-bottom: -2px;
+        }
+      }
     }
 
     #terms > a {

app/assets/stylesheets/sessions.css.scss

@@ -1,162 +0,0 @@
-//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-//   licensed under the Affero General Public License version 3 or later.  See
-//   the COPYRIGHT file.
-
-@font-face {
-  font-family: 'BrandonGrotesqueLightRegular';
-  src: url('brandongrotesque_light/Brandon_light-webfont.eot');
-  src: local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg');
-  font: {
-    weight: normal;
-    style: normal;
-  }
-}
-
-#flash_notice,
-#flash_error,
-#flash_alert {
-  z-index: 100;
-  top: 32px;
-  position: absolute;
-  color: #000;
-  width: 400px;
-  margin: 0 0 0 -200px;
-  left: 50%;
-  text-align: center;
-  font-size: 14px;
-  padding: 3px 0;
-}
-
-#flash_notice {
-  background-color: #CFC;
-  border: solid 1px #6C6;
-}
-
-#flash_error,
-#flash_alert {
-  background-color: #FCC;
-  border: solid 1px #C66;
-}
-
-.fieldWithErrors {
-  display: inline;
-}
-
-.error_messages {
-  width: 400px;
-  border: 2px solid #CF0000;
-  padding: 0;
-  padding-bottom: 12px;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
-  font-size: 12px;
-  h2 {
-    text-align: left;
-    padding: 5px 5px 5px 15px;
-    margin: 0;
-    font: {
-      weight: bold;
-      size: 12px;
-    }
-    background-color: #c00;
-  }
-  p {
-    margin: 8px 10px;
-  }
-  ul {
-    margin: 0;
-  }
-}
-
-/* via blueprint */
-html {
-  font-size: 100.01%;
-}
-
-/* via blueprint */
-body {
-  font: {
-    size: 75%;
-    family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-  }
-  color: #222;
-  background: #fff;
-
-  margin-left: 100px;
-}
-
-/* via blueprint */
-input[type=text],
-input[type=password],
-textarea, select {
-  background-color: #fff;
-  border: 1px solid #bbb;
-}
-
-/* via blueprint */
-input[type=text]:focus,
-input[type=password]:focus,
-input.text:focus,
-input.title:focus,
-textarea:focus, select:focus {
-  border-color: #666;
-}
-
-#huge_text {
-  font: {
-    size: 40px;
-    family: 'BrandonGrotesqueLightRegular';
-  }
-  line-height: 120px;
-  color: #333;
-  text-shadow: 0 1px 1px #999;
-}
-
-input {
-  font-size: 14px;
-}
-
-form p {
-  position: relative;
-  padding: 0;
-}
-
-label {
-  color: #999;
-  position: absolute;
-  padding-top: 7px;
-  left: 8px;
-  font: {
-    size: 14px;
-    weight: normal;
-  }
-}
-
-input[type='text'],
-input[type='password'] {
-  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-  padding: 0.3em;
-  width: 395px;
-  border-top: 1px solid #999;
-}
-
-#user {
-  display: inline;
-  width: 500px;
-  .username {
-    width: 200px;
-    display: inline;
-
-    input {
-      display: inline;
-      width: 200px;
-    }
-  }
-
-  .user_network {
-    width: 200px;
-    display: inline;
-    font-size: 18px;
-  }
-}
-

app/views/passwords/edit.haml

@@ -1,5 +1,5 @@
 - content_for :page_title do
-  = "#{AppConfig.settings.pod_name} / #{t('devise.passwords.edit.change_password')}"
+  = "#{AppConfig.settings.pod_name} - #{t('devise.passwords.edit.change_password')}"
 
 #reset_password
   .container-fluid
@@ -10,20 +10,20 @@
 
     = form_for(resource, as: resource_name, url: password_path(resource_name), html: {class: "form-horizontal block-form", method: :put }, autocomplete: 'off') do |f|
       %fieldset
-        = f.hidden_field :reset_password_token
+        %label{for: "user_password"}
-        .control-group
-          %label{class: "control-label", for: "user_password"}
           = t('devise.passwords.edit.new_password')
-          .controls
+        %i.entypo.lock
-            = f.password_field :password, required: true, placeholder: "••••••••", autocapitalize: "off", autocorrect: "off", autofocus: true
+        = f.password_field :password, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.new_password'), autocapitalize: "none", autocorrect: "off", autofocus: true
-        .control-group
+
-          %label{class: "control-label", for: "user_password_confirmation"}
+        = f.hidden_field :reset_password_token
+
+        %label{for: "user_password_confirmation"}
           = t('devise.passwords.edit.confirm_password')
-          .controls
+        %i.entypo.lock
-            = f.password_field :password_confirmation, required: true, placeholder: "••••••••", autocapitalize: "off", autocorrect: "off"
+        = f.password_field :password_confirmation, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.confirm_password'), autocapitalize: "none", autocorrect: "off"
+
       = hidden_field(:user, :remember_me, value: 1)
       = f.submit t('devise.passwords.edit.change_password'), class: "btn"
 
     .text-center
       = link_to t('devise.shared.links.sign_in'), new_session_path(resource_name)
-

app/views/passwords/new.haml

@@ -1,5 +1,5 @@
 - content_for :page_title do
-  = "#{AppConfig.settings.pod_name} / #{t('devise.passwords.new.forgot_password')}"
+  = "#{AppConfig.settings.pod_name} - #{t('devise.passwords.new.forgot_password')}"
 
 #forgot_password
   .container-fluid
@@ -12,15 +12,13 @@
       - if !devise_error_messages!.empty?
         %legend
           %i
-            = t('devise.passwords.new.no_account')
+            = t('devise.passwords.new.no_account') # this is an error message and should not be displayed as a legend
       %fieldset
-        .control-group
+        %label{for: "user_email"}
-          %label{class: "control-label", for: "user_email"}
           = t('devise.passwords.new.email')
-          .controls
+        %i.entypo.mail
-            = f.text_field :email, required: true, autocapitalize: "off", placeholder: "••••••••", autocorrect: "off", autofocus: true
+        = f.text_field :email, class: "input-block-level form-control", required: true, autocapitalize: "off", placeholder: t('devise.passwords.new.email'), autocorrect: "off", autofocus: true
       = f.submit t('devise.passwords.new.send_password_instructions'), class: "btn"
 
     .text-center
       = link_to t('devise.shared.links.sign_in'), new_session_path(resource_name)
-

app/views/registrations/new.haml

@@ -2,50 +2,45 @@
   .container-fluid
     .row-fluid
       .span10.offset1
-        .span6
+        .span7.hidden-phone
           %h1#create-something-text
             = t('.hey_make').html_safe
           %h3#diaspora-hearts
             = t('.diaspora')
-        .span6
+        .span5
           .pull-right
             %h2#pod-name
               = AppConfig.settings.pod_name
-            %h4#sign-up-text
-              = t('.sign_up')
             = form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f|
               %fieldset
-                .control-group
                 %label.control-label{for: "user_email"}
                   = t('.email')
-                  .controls
+                %i.entypo.mail
-                    = f.email_field :email, placeholder: "luke@hoth.net", title: t('registrations.new.enter_email'), required: true
+                = f.email_field :email, class: "input-block-level form-control", placeholder: t('.email'), title: t('registrations.new.enter_email'), required: true
 
-                .control-group
                 %label.control-label{for: "user_username"}
                   = t('.username')
-                  .controls
+                %i.entypo.user
-                    = f.text_field :username, placeholder: "jedi_guy", title: t('registrations.new.enter_username'), required: true, pattern: "[A-Za-z0-9_]+"
+                = f.text_field :username, class: "input-block-level form-control", placeholder: t('.username'), title: t('registrations.new.enter_username'), required: true, pattern: "[A-Za-z0-9_]+"
 
-                .control-group
                 %label.control-label{for: "user_password"}
                   = t('.password')
-                  .controls
+                %i.entypo.lock
-                    = f.password_field :password, placeholder: "••••••••", title: t('registrations.new.enter_password'), required: true, pattern: "......+"
+                = f.password_field :password, class: "input-block-level form-control", placeholder: t('.password'), title: t('registrations.new.enter_password'), required: true, pattern: "......+"
 
-                .control-group
                 %label.control-label{for: "user_password_confirmation"}
                   = t('.password_confirmation')
-                  .controls
+                %i.entypo.lock
-                    = f.password_field :password_confirmation, placeholder: "••••••••", title: t('registrations.new.enter_password_again'), required: true, pattern: "......+"
+                = f.password_field :password_confirmation, class: "input-block-level form-control", placeholder: t('.password_confirmation'), title: t('registrations.new.enter_password_again'), required: true, pattern: "......+"
 
                 - if AppConfig.settings.captcha.enable?
-                  #captcha.control-group
+                  .captcha
                     = show_simple_captcha(object: 'user', code_type: 'numeric')
+                    %div{style: "clear:both;"}
 
                 = invite_hidden_tag(invite)
 
               - if AppConfig.settings.terms.enable?
                 %p#terms.text-center
                   = t('.terms', terms_link: link_to(t('.terms_link'), terms_path, target: "_blank")).html_safe
-              = f.submit t('.continue'), class: "btn", data: {disable_with: t('.submitting')}
+              = f.submit t('.sign_up'), class: "btn", data: {disable_with: t('.submitting')}

app/views/sessions/new.html.haml

@@ -1,5 +1,5 @@
 - content_for :page_title do
-  = AppConfig.settings.pod_name + " / " + t('devise.sessions.new.sign_in')
+  = AppConfig.settings.pod_name + " - " + t('devise.sessions.new.sign_in')
 
 .container-fluid#login
   .text-center
@@ -7,30 +7,36 @@
     %h1
       = AppConfig.settings.pod_name
 
-  = form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'form-signin'}, autocomplete: 'off' do |f|
+  = form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'block-form'}, autocomplete: 'off' do |f|
     %fieldset
+      %label{for: "user_username"}
+        = t('registrations.new.username')
+      %i.entypo.user
       = f.text_field :username,
                      placeholder: t('registrations.new.username'),
                      class: 'input-block-level form-control',
                      required: true,
                      pattern: '[A-Za-z0-9_.@\-]+',
-                     autocapitalize: 'off', 
+                     autocapitalize: 'none',
                      autocorrect: 'off',
                      autofocus: true
-      %i.entypo.user
 
+      %label{for: "user_password"}
+        = t('registrations.new.password')
+      %i.entypo.lock
       = f.password_field :password,
                          placeholder: t('registrations.new.password'),
                          class: 'input-block-level form-control',
-                         required: true
+                         required: true,
-      %i.entypo.lock
+                         autocapitalize: 'none',
+                         autocorrect: 'off'
 
     = f.hidden_field :remember_me, value: 1
-    = f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block green'
+    = f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block'
 
   .text-center
-    - if display_registration_link?
-      = link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)
-      \-
     - if display_password_reset_link?
       = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), id: "forgot_password_link"
+      %br
+    - if display_registration_link?
+      = link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)

app/views/simple_captcha/_simple_captcha.haml

@@ -1,4 +1,3 @@
-.control-label
+.captcha_img
   = simple_captcha_options[:image]
-.controls
 = simple_captcha_options[:field]

config/locales/devise/devise.en.yml

@@ -30,13 +30,13 @@ en:
       updated: 'Your password was changed successfully. You are now signed in.'
       edit:
         change_password: "Change my password"
-        new_password: "New password"
+        new_password: "NEW PASSWORD"
-        confirm_password: "Confirm password"
+        confirm_password: "CONFIRM PASSWORD"
       new:
         forgot_password: "Forgot your password?"
         no_account: 'No account with this email exists'
         reset_password: "Reset password"
-        email: "Email address"
+        email: "EMAIL ADDRESS"
         send_password_instructions: "Send me reset password instructions"
     confirmations:
       send_instructions: 'You will receive an email with instructions about how to confirm your account in a few minutes.'

config/locales/diaspora/en.yml

@@ -1014,7 +1014,6 @@ en:
       username: "USERNAME"
       password: "PASSWORD"
       password_confirmation: "PASSWORD CONFIRMATION"
-      continue: "Continue"
       submitting: "Submitting..."
       terms: "By creating an account you accept the %{terms_link}."
       terms_link: "terms of service"

features/desktop/change_password.feature

@@ -12,16 +12,18 @@ Feature: Change password
     Then I should be on the stream page
 
   Scenario: Reset my password
-    Given a user with email "forgetful@users.net"
+    Given a user named "Georges Abitbol" with email "forgetful@users.net"
     Given I am on forgot password page
     When I fill out forgot password form with "forgetful@users.net"
     And I submit forgot password form
     Then I should see "You will receive an email with instructions"
     When I follow the "Change my password" link from the last sent email
-    Then I should see "NEW PASSWORD"
     When I fill out reset password form with "supersecret" and "supersecret"
     And I submit reset password form
     Then I should be on the stream page
+    And I sign out manually
+    And I sign in manually as "georges_abitbol" with password "supersecret"
+    Then I should be on the stream page
 
   Scenario: Attempt to reset password with invalid email
     Given I am on forgot password page