From c6c91cd8abd75a36e1278d28c4094ff470fd998e Mon Sep 17 00:00:00 2001 From: Akinori MUSHA 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.

<% if has_oauth_configuration_for?('twitter') %> -

<%= link_to "Authenticate with Twitter", "/auth/twitter" %>

+

<%= link_to "/auth/twitter", class: 'btn btn-default btn-auth btn-auth-twitter' do %>Authenticate with Twitter<% end %>

<% end %> <% if has_oauth_configuration_for?('37signals') %> -

<%= link_to "Authenticate with 37Signals (Basecamp)", "/auth/37signals" %>

+

<%= link_to "/auth/37signals", class: 'btn btn-default btn-auth btn-auth-37signals' do %>Authenticate with 37Signals (Basecamp)<% end %>

<% end -%> <% if has_oauth_configuration_for?('github') %> -

<%= link_to "Authenticate with Github", "/auth/github" %>

+

<%= link_to "/auth/github", class: 'btn btn-default btn-auth btn-auth-github' do %>Authenticate with Github<% end %>

<% end -%>