From c6c91cd8abd75a36e1278d28c4094ff470fd998e Mon Sep 17 00:00:00 2001
From: Akinori MUSHA <knu@idaemons.org>
Date: Wed, 24 Sep 2014 12:15:12 +0900
Subject: [PATCH] Turn authentication links into pretty buttons.

---
 .../stylesheets/application.css.scss.erb      | 37 +++++++++++++++++++
 app/views/services/index.html.erb             |  6 +--
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
index 5afbd6ea..688acbf4 100644
--- a/app/assets/stylesheets/application.css.scss.erb
+++ b/app/assets/stylesheets/application.css.scss.erb
@@ -18,6 +18,8 @@
  */
 
 @import "bootstrap";
+@import "font-awesome-sprockets";
+@import "font-awesome";
 
 body { padding-top: 60px; }
 
@@ -237,3 +239,38 @@ h2 .scenario, a span.label.scenario {
 .confirm-agent .popover {
   width: 200px;
 }
+
+.btn-auth {
+  position: relative;
+  padding-left: 40px;
+  $border-color: rgba(0,0,0,0.2);
+  border-color: $border-color;
+
+  > i:first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    line-height: 32px;
+    font-size: 24px;
+    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;
+  }
+}
diff --git a/app/views/services/index.html.erb b/app/views/services/index.html.erb
index 55d44b69..500831e1 100644
--- a/app/views/services/index.html.erb
+++ b/app/views/services/index.html.erb
@@ -12,13 +12,13 @@
         for guidance.
       </p>
       <% if has_oauth_configuration_for?('twitter') %>
-        <p><%= link_to "Authenticate with Twitter", "/auth/twitter" %></p>
+        <p><%= link_to "/auth/twitter", class: 'btn btn-default btn-auth btn-auth-twitter' do %><i class='fa fa-twitter'></i><span>Authenticate with Twitter</span><% end %></p>
       <% end %>
       <% if has_oauth_configuration_for?('37signals') %>
-        <p><%= link_to "Authenticate with 37Signals (Basecamp)", "/auth/37signals" %></p>
+        <p><%= link_to "/auth/37signals", class: 'btn btn-default btn-auth btn-auth-37signals' do %><i class='fa fa-lock'></i><span>Authenticate with 37Signals (Basecamp)</span><% end %></p>
       <% end -%>
       <% if has_oauth_configuration_for?('github') %>
-        <p><%= link_to "Authenticate with Github", "/auth/github" %></p>
+        <p><%= link_to "/auth/github", class: 'btn btn-default btn-auth btn-auth-github' do %><i class='fa fa-github'></i><span>Authenticate with Github</span><% end %></p>
       <% end -%>
       <hr>