Right now our registration page looks great and matches the design mocks, so the next step we're going to take is to integrate the design for the Devise sign in page. If you look through the user interface guide you may notice that we don't have a sign in page mock, we also don't have a file for it in the assets. That's not an issue however because the sign in and registration pages are very similar. The only key differences will be:

• There are fewer fields for the sign in page

• We can get rid of the small, embedded sign in component that we integrated for the registration page.

Let's open up the sign in page and update it so it looks like the code below:

<!-- app/views/devise/sessions/new -->

<div class="container">
  <div class="row">
    <div class="login pull-left">
      <div class="mobile">
        <%= image_tag('mobile.png') %>
        <h2>Heading out?<br/> Stay connected</h2>
        <p>Visit <strong>daily smarty</strong> on your mobile phone.</p>
      </div>
    </div>
    <div class="register pull-right">
      <div class="header">
        <h1>Sign In</h1>
        <span>Access your account.</span>
      </div>

      <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

        <div class="form-group clearfix">
          <%= f.label :email %>
          <%= f.email_field :email, placeholder: 'e.g. jon@snow.com' %>
        </div>

        <div class="form-group clearfix">
          <%= f.label :password %>
          <%= f.password_field :password, autocomplete: "off" %>
        </div>

        <div class="actions">
          <%= f.submit "Log In", class: "btn btn-default btn-orange" %>
        </div>

        <div class="devise-links">
          <%= render "devise/shared/links" %>
        </div>
      <% end %>

    </div>
  </div>
</div>

If you startup the rails server and navigate to localhost:3000/users/sign_in you'll see that our sign in page is looking great, that's exactly what we're going for. The only issue I see is that the devise shared links don't look very good. I put them in a <div> tag and gave them a class of devise-links, so let's add some custom styles so they fit in with the rest of the layout. Create a new style file:

touch app/assets/stylesheets/custom/devise_styles.css

And then make sure to import it into the main application stylesheet file:

/* app/assets/stylesheets/application.css.scss */

@import "custom/devise_styles.css";

Now let's add in some custom style for these links. Instead of just throwing some style code against the wall, let's user the Google Chrome inspector to test out some styles. Right click on the Sign up link and click the Inspect menu item. You should now see a page like this:

Now we can play with the styles on the right hand side of the tool window. You can already see where the current values are being set in the media="all" pane below the element.style. Let's test out these values:

element.style {
  color: white;
  font-size: 1.2em;
}

This looks like it's what we're looking for. Let's update the style in our new css file:

/* app/assets/stylesheets/custom/desvise_styles.css */

.devise-links a {
  color: white;
  font-size: 1.2em;
}

Going back to the browser will show that our styles got picked up and look good, as shown in the image below:

We may or may not choose to play with the alignment later on. I don't want to make any big changes like that until all of the fonts are working since that will make a difference.

Resources

• Project code at this stage