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

@@ -241,7 +241,22 @@ h2 .scenario, a span.label.scenario {

                   width: 200px;
              

                 }
              

                 
              

                -.btn-auth {
              

                +$services:            twitter     37signals   github;
              

                +$service-colors:      #55acee     #8fc857     #444;
              

                +
              

                +@mixin services {
              

                +  @each $service in $services {
              

                +    $i: index($services, $service);
              

                +    $service-color: nth($service-colors, $i);
              

                +
              

                +    &.service-#{$service} {
              

                +      color: #fff;
              

                +      background-color: $service-color;
              

                +    }
              

                +  }
              

                +}
              

                +
              

                +.btn-service {
              

                   position: relative;
              

                   padding-left: 40px;
              

                   $border-color: rgba(0,0,0,0.2);
              
@@ -260,18 +275,6 @@ h2 .scenario, a span.label.scenario {

                     border-right: 1px solid $border-color;
              

                   }
              

                 
              

                -  &.btn-auth-twitter {
              

                -    color: #fff;
              

                -    background-color: #55acee;
              

                -  }
              

                -
              

                -  &.btn-auth-37signals {
              

                -    color: #fff;
              

                -    background-color: #8fc857;
              

                -  }
              

                -
              

                -  &.btn-auth-github {
              

                -    color: #fff;
              

                -    background-color: #444;
              

                -  }
              

                +  @include services;
              

                +}
              

                 }
              

app/helpers/application_helper.rb

@@ -53,4 +53,11 @@ module ApplicationHelper

                   def omniauth_provider_name(provider)
              

                     t("devise.omniauth_providers.#{provider}")
              

                   end
              

                +
              

                +  def omniauth_button(provider)
              

                +    link_to [
              

                +      omniauth_provider_icon(provider),
              

                +      content_tag(:span, "Authenticate with #{omniauth_provider_name(provider)}")
              

                +    ].join.html_safe, user_omniauth_authorize_path(provider), class: "btn btn-default btn-service service-#{provider}"
              

                +  end
              

                 end
              

app/views/services/index.html.erb

@@ -12,7 +12,7 @@

                         for guidance.
              

                       </p>
              

                       <%- Devise.omniauth_providers.each { |provider| -%>
              

                -        <p><%= link_to user_omniauth_authorize_path(provider), class: "btn btn-default btn-auth btn-auth-#{provider}" do %><%= icon_for_service(provider) %><span>Authenticate with <%= t("devise.omniauth_providers.#{provider}") %></span><% end %></p>
              

                +        <p><%= omniauth_button(provider) %></p>
              

                       <%- } -%>
              

                       <hr>