improves styles for omniauth buttons

app/assets/stylesheets/layout.scss

@@ -618,6 +618,11 @@ h2.sidebar-title {
   h1 {
     margin-top: $line-height;
 
+    img {
+      height: rem-calc(80);
+      width: rem-calc(80);
+    }
+
     a {
       color: white;
       display: block;
@@ -643,6 +648,19 @@ h2.sidebar-title {
   }
 }
 
+.auth-divider {
+  border-bottom: 1px solid $border;
+  height: $line-height/2;
+  margin: $line-height 0;
+  text-align: center;
+
+  span {
+    background: white;
+    font-weight: bold;
+    padding: 0 $line-height/2;
+  }
+}
+
 // 06. Forms
 // ---------
 

app/views/devise/_omniauth_form.html.erb

@@ -1,33 +1,72 @@
 <% if feature?(:twitter_login) || feature?(:facebook_login) || feature?(:google_login) %>
 
   <% if current_page?(new_user_session_path) %>
+    <div class="row">
+      <div class="small-12 column">
+        <div class="margin">
+          <strong><%= t("omniauth.info_sign_in") %></strong>
+        </div>
+      </div>
 
       <% if feature? :twitter_login %>
-      <%= link_to t("omniauth.twitter.sign_in"), user_omniauth_authorize_path(:twitter), class: "button-twitter button expanded" %>
+        <div class="small-12 medium-4 column end">
+          <%= link_to t("omniauth.twitter.name"), user_omniauth_authorize_path(:twitter),
+                      title: t("omniauth.twitter.sign_in"),
+                      class: "button-twitter button expanded" %>
+        </div>
       <% end %>
 
       <% if feature? :facebook_login %>
-      <%= link_to t("omniauth.facebook.sign_in"), user_omniauth_authorize_path(:facebook), class: "button-facebook button expanded" %>
+        <div class="small-12 medium-4 column end">
+          <%= link_to t("omniauth.facebook.name"), user_omniauth_authorize_path(:facebook),
+                      title: t("omniauth.facebook.sign_in"),
+                      class: "button-facebook button expanded" %>
+        </div>
       <% end %>
 
       <% if feature? :google_login %>
-      <%= link_to t("omniauth.google_oauth2.sign_in"), user_omniauth_authorize_path(:google_oauth2), class: "button-google button expanded" %>
+        <div class="small-12 medium-4 column end">
+          <%= link_to t("omniauth.google_oauth2.name"), user_omniauth_authorize_path(:google_oauth2),
+                      title: t("omniauth.google_oauth2.sign_in"),
+                      class: "button-google button expanded" %>
+        </div>
       <% end %>
 
-    <hr/>
+      <div class="small-12 column auth-divider">
+        <span><%= t("omniauth.or_fill") %></span>
+      </div>
+    </div>
+
   <% elsif current_page?(new_user_registration_path) %>
+    <div class="row">
+      <div class="small-12 column">
+        <p><%= t("omniauth.info_sign_up") %></p>
+      </div>
 
       <% if feature? :twitter_login %>
-      <%= link_to t("omniauth.twitter.sign_up"), user_omniauth_authorize_path(:twitter), class: "button-twitter button expanded" %>
+        <div class="small-12 medium-4 column end">
+          <%= link_to t("omniauth.twitter.name"), user_omniauth_authorize_path(:twitter),
+                      title: t("omniauth.twitter.sign_up"),
+                      class: "button-twitter button expanded" %>
+        </div>
       <% end %>
 
       <% if feature? :facebook_login %>
-      <%= link_to t("omniauth.facebook.sign_up"), user_omniauth_authorize_path(:facebook), class: "button-facebook button expanded" %>
+        <div class="small-12 medium-4 column end">
+          <%= link_to t("omniauth.facebook.name"), user_omniauth_authorize_path(:facebook),
+                      title: t("omniauth.facebook.sign_up"),
+                      class: "button-facebook button expanded" %>
+        </div>
       <% end %>
 
       <% if feature? :google_login %>
-      <%= link_to t("omniauth.google_oauth2.sign_up"), user_omniauth_authorize_path(:google_oauth2), class: "button-google button expanded" %>
+        <div class="small-12 medium-4 column end">
+          <%= link_to t("omniauth.google_oauth2.name"), user_omniauth_authorize_path(:google_oauth2),
+                      title: t("omniauth.google_oauth2.sign_up"),
+                      class: "button-google button expanded" %>
+        </div>
       <% end %>
+    </div>
 
     <hr/>
   <% end %>

app/views/layouts/devise.html.erb

@@ -26,7 +26,7 @@
       <div class="small-12 medium-9 column">
         <div class="row">
           <div class="small-12 medium-6 small-centered column">
-            <div class="auth-form">
+            <div class="auth-form margin">
               <%= render 'layouts/flash' %>
 
               <%= yield %>

config/locales/en.yml

@@ -245,14 +245,23 @@ en:
     facebook:
       sign_in: Sign in with Facebook
       sign_up: Sign up with Facebook
+      name: Facebook
     finish_signup:
       title: Add your email address
     google_oauth2:
       sign_in: Sign in with Google
       sign_up: Sign up with Google
+      name: Google
     twitter:
       sign_in: Sign in with Twitter
       sign_up: Sign up with Twitter
+      name: Twitter
+    info_sign_in: "Sign in with:"
+    info_sign_up: "Sign up with:"
+    or_fill: "Or fill the following form:"
+    finish_signup:
+      title: "Additional details"
+      username_warning: "Due to a change in the way we interact with social networks, it is possible that your username now appears as 'already in use'. If that is your case, please choose a different username."
   proposals:
     create:
       form:

config/locales/es.yml

@@ -245,14 +245,23 @@ es:
     facebook:
       sign_in: Entra con Facebook
       sign_up: Regístrate con Facebook
+      name: Facebook
     finish_signup:
       title: Añade tu email
     google_oauth2:
       sign_in: Entra con Google
       sign_up: Regístrate con Google
+      name: Google
     twitter:
       sign_in: Entra con Twitter
       sign_up: Regístrate con Twitter
+      name: Twitter
+    info_sign_in: "Entra con:"
+    info_sign_up: "Regístrate con:"
+    or_fill: "O rellena el siguiente formulario:"
+    finish_signup:
+      title: "Detalles adicionales de tu cuenta"
+      username_warning: "Debido a que hemos cambiado la forma en la que nos conectamos con redes sociales y es posible que tu nombre de usuario aparezca como 'ya en uso', incluso si antes podías acceder con él. Si es tu caso, por favor elige un nombre de usuario distinto."
   proposals:
     create:
       form: