Merge pull request #67 from tvdeyen/new-login

New login screen that fit the new color theme

Author: tvdeyen

app/assets/stylesheets/alchemy-devise/login.scss

@@ -1,15 +1,34 @@
+body.user_sessions,
+body.passwords {
+  background-color: $main-menu-bg-color;
+  color: $white;
+
+  a {
+    color: $white;
+  }
+
+  #errors,
+  .message.info {
+    border-color: transparent;
+  }
+
+  #errors {
+    margin-left: 157px;
+  }
+}
+
 #logo {
-  width: 240px;
-  height: 70px;
-  margin: 0 0 1em 187px;
+  width: 275px;
+  height: auto;
+  margin: 0 0 1em 164px;
 }
 
 .login_signup_box {
   position: absolute;
   width: 450px;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-60%, -50%);
 
   .no-js & {
     display: none;
@@ -18,4 +37,13 @@
   .message {
     margin-left: 157px;
   }
+
+  .link {
+    text-align: right;
+  }
+
+  button.secondary {
+    color: $white;
+    border-color: $white;
+  }
 }

app/views/alchemy/passwords/edit.html.erb

@@ -14,6 +14,11 @@
     <%= f.hidden_field :reset_password_token %>
     <%= f.input :password, autofocus: true, label: Alchemy.t("New password") %>
     <%= f.input :password_confirmation, label: Alchemy.t("Confirm new password") %>
+    <div class="input link">
+      <small>
+        <%= link_to Alchemy.t(:back), alchemy.login_path %>
+      </small>
+    </div>
     <%= f.submit Alchemy.t("Change password") %>
   <% end %>
 </div>

app/views/alchemy/passwords/new.html.erb

@@ -14,6 +14,11 @@
     <%= f.input :email,
       autofocus: true,
       input_html: {value: params[:email]} %>
-    <%= f.submit Alchemy.t("Send reset instructions") %>
+    <div class="input link">
+      <small>
+        <%= link_to Alchemy.t(:back), alchemy.login_path %>
+      </small>
+    </div>
+    <%= f.submit Alchemy.t("Send reset instructions"), input_html: {class: 'secondary'} %>
   <% end %>
 </div>

app/views/alchemy/user_sessions/new.html.erb

@@ -3,14 +3,14 @@
   <%= alchemy_form_for :user, url: {action: 'create'}, id: 'login' do |f| %>
     <%= f.input Devise.authentication_keys.first, autofocus: true %>
     <%= f.input :password %>
-    <div class="input">
-      <small class="hint">
+    <div class="input link">
+      <small>
         <%= link_to Alchemy.t('Forgot your password?'), new_password_path %>
       </small>
     </div>
     <div class="submit">
       <%= hidden_field_tag 'user_screensize' %>
-      <button><%= Alchemy.t(:login) %></button>
+      <button class="secondary"><%= Alchemy.t(:login) %></button>
     </div>
   <% end %>
 </div>