forked from External/greenlight
Unify the UI style in sign up, sign in buttons when using omniauth (GRN-35) (#301)
* Changed style to buttons for sign up * Added assets and generalized code for sign up buttons * Added new style to sign in modal * Replaced hex colors with the official ones * Removed the old social icons that are no longer used * Centred text in sign up buttons * Base button rendering on iconset_providers and secured office 365
This commit is contained in:
Jesus Federico
GitHub
@ -21,32 +21,15 @@
|
||||
<div class="card-title">
|
||||
<h3><%= t("login") %></h3>
|
||||
</div>
|
||||
|
||||
<% unless iconset_providers.length.zero? %>
|
||||
|
||||
<% if configured_providers.include? :google %>
|
||||
<% provider = :google %>
|
||||
<% iconset_providers.each do |provider| %>
|
||||
<%= link_to omniauth_login_url(provider), class: "customBtn-#{provider}" do %>
|
||||
<span class="customBtn-icon">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
|
||||
</span>
|
||||
<span class="customBtn-text"><%= t("modal.login.with", provider: provider.capitalize) %></span>
|
||||
<span class="customBtn-icon">
|
||||
<img class="customBtn-image"></img>
|
||||
</span>
|
||||
<span class="customBtn-text"><%= t("modal.login.with", provider: t("provider.#{provider}")) %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if configured_providers.include? :twitter %>
|
||||
<% provider = :twitter %>
|
||||
<%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
|
||||
<i class="fab fa-<%= provider %>"></i> <%= t("modal.login.with", provider: provider.capitalize) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if configured_providers.include? :microsoft_office365 %>
|
||||
<%= link_to omniauth_login_url(:microsoft_office365), class: "btn btn-pill btn-primary btn-block" do %>
|
||||
<i class="fab fa-windows"></i> <%= t("modal.login.with", provider: "Office365") %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<div class="or-line my-6">
|
||||
<div>
|
||||
<span class="text-uppercase">
|
||||
@ -55,7 +38,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= form_for(:session, url: create_session_path) do |f| %>
|
||||
<div class="form-group">
|
||||
<div class="input-icon">
|
||||
@ -65,7 +47,6 @@
|
||||
<%= f.text_field :email, class: "form-control", placeholder: t("email"), value: "" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">
|
||||
@ -74,7 +55,6 @@
|
||||
<%= f.password_field :password, class: "form-control", placeholder: t("password"), value: "" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<%= f.submit t("login"), class: "btn btn-outline-primary btn-block btn-pill" %>
|
||||
</div>
|
||||
|
||||
@ -21,31 +21,15 @@
|
||||
<h4 class="mt-2"><%= t("signup.subtitle") %></h4>
|
||||
</div>
|
||||
<div class="card-body background">
|
||||
<% unless configured_providers.length.zero? %>
|
||||
|
||||
<% if configured_providers.include? :google %>
|
||||
<% provider = :google %>
|
||||
<% unless iconset_providers.length.zero? %>
|
||||
<% iconset_providers.each do |provider| %>
|
||||
<%= link_to omniauth_login_url(provider), class: "customBtn-#{provider}" do %>
|
||||
<span class="customBtn-icon">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
|
||||
<img class="customBtn-image"></img>
|
||||
</span>
|
||||
<span class="customBtn-text"><%= t("signup.with", provider: provider.capitalize) %></span>
|
||||
<span class="customBtn-text"><%= t("signup.with", provider: t("provider.#{provider}")) %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if configured_providers.include? :twitter %>
|
||||
<% provider = :twitter %>
|
||||
<%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
|
||||
<i class="fab fa-<%= provider %>"></i> <%= t("signup.with", provider: provider.capitalize) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if configured_providers.include? :microsoft_office365 %>
|
||||
<%= link_to omniauth_login_url(:microsoft_office365), class: "btn btn-pill btn-primary btn-block" do %>
|
||||
<i class="fab fa-windows"></i> <%= t("signup.with", provider: "Office365") %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<div class="or-line my-3">
|
||||
<div>
|
||||
<span class="text-uppercase" style="background-color: #F5F7FB;">
|
||||
|
||||
Reference in New Issue
Block a user